修改首页路径

master
夜笙歌 2 years ago
parent 01024466f0
commit b2a22d7cff

@ -118,20 +118,7 @@
<div v-for="(i,index) in warringList" :key='i' ref="warningRef" <div v-for="(i,index) in warringList" :key='i' ref="warningRef"
style="position:relative;color:#fff;height: 120px;"> style="position:relative;color:#fff;height: 120px;">
<img <img
v-if="i?.ispresslower === 1" :src="imgUrl(i)"
src="../assets/icons/ispresslower.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<img
v-if="i?.ispresshigh === 1"
src="../assets/icons/ispresshigh.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<img
v-if="i?.istemperaturehigh === 1"
src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<img
v-if="i?.ispowerinvalue === 1"
src="../assets/icons/ispowerinvalue.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px"> style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px"> <div style="position: absolute;top: 10px;left: 50px;font-size: 16px">
{{ i?.ispresslower === 1 ? '低压' : '' }} {{ i?.ispresslower === 1 ? '低压' : '' }}
@ -204,7 +191,7 @@ export default {
ispresshigh: 0, ispresshigh: 0,
ispresslower: 0, ispresslower: 0,
istemperaturehigh: 0, istemperaturehigh: 0,
total:0 total: 0
}, },
chartData: [...(chinaMap.features.map(e => { chartData: [...(chinaMap.features.map(e => {
return { return {
@ -275,6 +262,12 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
imgUrl(e) {
if (e.ispowerinvalue === 1) return new URL(`../assets/icons/ispowerinvalue.png`, import.meta.url).href;
if (e.ispresshigh === 1) return new URL(`../assets/icons/ispresshigh.png`, import.meta.url).href;
if (e.ispresslower === 1) return new URL(`../assets/icons/ispresslower.png`, import.meta.url).href;
if (e.istemperaturehigh === 1) return new URL(`../assets/icons/highTemperature.png`, import.meta.url).href;
},
async setInfo() { async setInfo() {
await getIndexdata().then(response => { await getIndexdata().then(response => {
this.warningInfo = { this.warningInfo = {
@ -282,7 +275,7 @@ export default {
ispresshigh: response.data.ispresshigh, ispresshigh: response.data.ispresshigh,
ispresslower: response.data.ispresslower, ispresslower: response.data.ispresslower,
istemperaturehigh: response.data.istemperaturehigh, istemperaturehigh: response.data.istemperaturehigh,
total:response.data.ispowerinvalue+response.data.ispresshigh+response.data.ispresslower+response.data.istemperaturehigh total: response.data.ispowerinvalue + response.data.ispresshigh + response.data.ispresslower + response.data.istemperaturehigh
}, },
this.warringWaitList = [...response.data.warringList], this.warringWaitList = [...response.data.warringList],
this.carData = { this.carData = {

@ -10,7 +10,7 @@
<el-cascader <el-cascader
v-model="form.carId" v-model="form.carId"
:options="options" :options="options"
:props="{ multiple: true, value:'id',label:'title',children:'baseCarList', }" :props="{ multiple: true, value:'id',label:'title',children:'baseCarList',checkStrictly :true }"
clearable clearable
@change="cascaderChange" /> @change="cascaderChange" />
</el-form-item> </el-form-item>
@ -95,10 +95,11 @@ const cascaderChange = (e) => {
let nowIds = e.map(val => val.at(-1)) let nowIds = e.map(val => val.at(-1))
let nowClick = nowIds.filter(val => !(lastIds.includes(val)))?.[0] let nowClick = nowIds.filter(val => !(lastIds.includes(val)))?.[0]
ids.value = e.map(val => val.at(-1)) ids.value = e.map(val => val.at(-1))
console.log(nowClick)
if (!nowClick) return if (!nowClick) return
getInfoById(nowClick) getInfoById(nowClick)
.then(val => { .then(val => {
form.value = val.data form.value = {...form.value, ...val.data}
form.value.time = parseTime(new Date()) form.value.time = parseTime(new Date())
}) })
} }

@ -29,6 +29,7 @@
</el-form> </el-form>
<div id="container4"></div> <div id="container4"></div>
<el-button class="add" @click="createPolygon"></el-button>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -43,12 +44,10 @@ const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance(); const {proxy} = getCurrentInstance();
const queryParams = ref({}) const queryParams = ref({})
let map = null let map = null
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]] let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
let path2 = [[116.400969, 39.921592], [116.401496, 39.919008], [116.399264, 39.919765], [116.39802, 39.921016]] const areaPath = ref([path])
const areaPath = ref([path,path2]) const marketPath = ref([[116.390669, 39.911147],[116.400669, 39.921147]])
let marketPath = [116.390669, 39.911147]
AMapLoader.load({ AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // WebKey load key: "ba8fb8d8bae1b280b93406d5959d492f", // WebKey load
// version: "1.4.15", // // version: "1.4.15", //
@ -66,19 +65,6 @@ AMapLoader.load({
center: [116.397428, 39.90923], // center: [116.397428, 39.90923], //
}); });
let marker = new AMap.Marker({
position: marketPath,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setTitle('我是marker的title');
marker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, -10), //
content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path,path2),
});
marker.setMap(map);
// //
map.addControl(new AMap.ToolBar({position: 'LT'})); map.addControl(new AMap.ToolBar({position: 'LT'}));
@ -91,42 +77,99 @@ AMapLoader.load({
// //
map.addControl(new AMap.MapType()); map.addControl(new AMap.MapType());
areaPath.value.forEach( (e,index)=> {
setPolygon(areaPath.value)
setMarker(marketPath.value)
}).catch(e => {
console.log(e);
})
const setMarker = (e)=>{
let markers = map.getAllOverlays('marker');
map.remove(markers)
e.forEach(val=>{
let marker = new AMap.Marker({
position: val,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setTitle('我是marker的title');
console.log((areaPath.value))
let isPointInRing = false
areaPath.value.forEach(res=>{
if(AMap.GeometryUtil.isPointInRing(val, res)){
isPointInRing=true
}
})
marker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, -10), //
content: "" +isPointInRing,
});
marker.setMap(map);
})
}
const setPolygon = (res) => {
res.forEach((e, index) => {
let polygon = new AMap.Polygon({path: e}); let polygon = new AMap.Polygon({path: e});
map.add([polygon]); map.add([polygon]);
let polyEditor = new AMap.PolygonEditor(map); let polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon]); polyEditor.addAdsorbPolygons([polygon]);
polyEditor.on('add', function (data) { polygon.on('dblclick', () => {
console.log(data); polyEditor.setTarget(polygon);
let polygon = data.target; polyEditor.open();
polyEditor.addAdsorbPolygons(polygon);
}) })
polyEditor.on('addnode', function (data) { polyEditor.on('addnode', function (data) {
// //
areaPath.value[index] = polyEditor.getTarget()._opts.path areaPath.value[index] = polyEditor.getTarget()._opts.path
setMarker(marketPath.value)
}) })
polyEditor.on('adjust', function (data) { polyEditor.on('adjust', function (data) {
// //
areaPath.value[index] = polyEditor.getTarget()._opts.path areaPath.value[index] = polyEditor.getTarget()._opts.path
setMarker(marketPath.value)
}) })
polyEditor.setTarget(polygon);
polyEditor.open();
}) })
setMarker(marketPath.value)
}
let createPolygon = () => {
let arr = []
map.add([new AMap.Polygon({path: arr})]);
let polyEditor = new AMap.PolygonEditor(map)
let index = areaPath.value.length
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
polyEditor.on('add', function (data) {
areaPath.value.push(data.target._opts.path)
// polyEditor.close();
// map.clearMap()
setPolygon(areaPath.value)
})
polyEditor.on('addnode', function (data) {
//
areaPath.value[index] = polyEditor.getTarget()._opts.path
setMarker(marketPath.value)
})
polyEditor.on('adjust', function (data) {
//
areaPath.value[index] = polyEditor.getTarget()._opts.path
setMarker(marketPath.value)
})
}
}).catch(e => {
console.log(e);
})
const getLine = () => { const getLine = () => {
let list = areaPath.value let list = areaPath.value
let params = [] let params = []
list.forEach((e,index)=>{ list.forEach((e, index) => {
e.forEach(val => { e.forEach(val => {
params.push({ params.push({
longitude:val[0], longitude: val[0],
latitude:val[1], latitude: val[1],
index:index index: index
}) })
}) })
}) })
@ -140,4 +183,10 @@ const getLine = () => {
width: 100%; width: 100%;
height: calc(100vh - 190px); height: calc(100vh - 190px);
} }
.add {
position: absolute;
bottom: 15px;
right: 150px;
}
</style> </style>

Loading…
Cancel
Save