diff --git a/src/components/areaMap.vue b/src/components/areaMap.vue
index 0100a24..ba111d2 100644
--- a/src/components/areaMap.vue
+++ b/src/components/areaMap.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
- <div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
+ <div style="width: 45vw;height: 60vh;transform: translateY(-5VH);" id="chart3" v-show="!showArea"></div>
</div>
</template>
@@ -36,7 +36,7 @@
</style>
<script setup>
-import { ref, onMounted, watch } from "vue"
+import { ref, onMounted, watch,defineEmits } from "vue"
import * as echarts from 'echarts';
// import "echarts-gl"
import geoJson from "/static/jsonData/luxian_geo.js"
@@ -66,7 +66,10 @@ const deepCopy = (obj) => {
return copy;
}
-
+const emit = defineEmits(['getTowmName'])
+const getTowmName = (e) => {
+ emit('getTowmName',e)
+}
const pointerFn = () => {
@@ -96,7 +99,7 @@ const pointerFn2 = (lists) => {
value: item.name,
animation: true,
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
- symbolSize: [100, 30], // 图片大小
+ symbolSize: [190, 30], // 图片大小
symbolOffset: ['50%', '-50%'],
data: lists,
@@ -166,29 +169,29 @@ const initAreaMap = () => {
},
- {
- type: "map",
- map: mapName,
- zlevel: -1,
- aspectScale: 1,
- zoom: 1.2,
- layoutCenter: ["50%", "51%"],
- layoutSize: "110%",
- roam: false,
- silent: true,
+ // {
+ // type: "map",
+ // map: mapName,
+ // zlevel: -1,
+ // aspectScale: 1,
+ // zoom: 1.2,
+ // layoutCenter: ["50%", "51%"],
+ // layoutSize: "110%",
+ // roam: false,
+ // silent: true,
- itemStyle: {
- normal: {
- borderWidth: 1,
- borderColor: "rgba(17, 149, 216,0.6)",
- borderColor: "#5AD0E0",
- shadowColor: "rgba(172, 122, 255,0.5)",
- shadowOffsetY: 5,
- shadowBlur: 15,
- areaColor: "rgba(5,21,35,0.1)",
- },
- },
- },
+ // itemStyle: {
+ // normal: {
+ // borderWidth: 1,
+ // borderColor: "rgba(17, 149, 216,0.6)",
+ // borderColor: "#5AD0E0",
+ // shadowColor: "rgba(172, 122, 255,0.5)",
+ // shadowOffsetY: 5,
+ // shadowBlur: 15,
+ // areaColor: "rgba(5,21,35,0.1)",
+ // },
+ // },
+ // },
{
@@ -315,6 +318,8 @@ const initAreaMap = () => {
const bg = echarts.init(myChart)
bg.setOption(option);
bg.on('click', function (params) {
+
+ getTowmName(params.name)
areaStore.areaCodeList.forEach(item => {
if (item.name == (params.name||params.value)) {
areaStore.changeUserInfoFn(510521, item.code)
@@ -336,7 +341,6 @@ const initTownMap = async (name) => {
...areaStore.userInfo
})
- console.log(res.data,4545)
res.data.list.forEach(item => {
@@ -347,17 +351,7 @@ const initTownMap = async (name) => {
id: item.id
})
})
- console.log(center,'center')
- // let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
- let pointerList2 = []
- center.forEach((item, index) => {
- pointerList2.push({
- value: item,
- name: "土地" + index,
- id: 18
- })
- })
-
+
const townJson = deepCopy(geoJson)
@@ -377,18 +371,18 @@ const initTownMap = async (name) => {
type: "map",
map: mapName,
aspectScale: 1,
- zoom: 1.2,
+ zoom: 0.2,
layoutCenter: ["50%", "51%"],
- layoutSize: "110%",
+ layoutSize: "90%",
roam: false,
label: {
emphasis: {
- show: false
+ show: false
}
},
show: true,
map: mapName,
- zoom: 1.2,
+ zoom: 1,
aspectScale: 1,
roam: false,
itemStyle: {
@@ -427,29 +421,7 @@ const initTownMap = async (name) => {
},
- {
- type: "map",
- map: mapName,
- zlevel: -1,
- aspectScale: 1,
- zoom: 1.2,
- layoutCenter: ["50%", "51%"],
- layoutSize: "110%",
- roam: false,
- silent: true,
-
- itemStyle: {
- normal: {
- borderWidth: 1,
- borderColor: "rgba(17, 149, 216,0.6)",
- borderColor: "#5AD0E0",
- shadowColor: "rgba(172, 122, 255,0.5)",
- shadowOffsetY: 5,
- shadowBlur: 15,
- areaColor: "rgba(5,21,35,0.1)",
- },
- },
- },
+
{
@@ -457,9 +429,9 @@ const initTownMap = async (name) => {
map: mapName,
zlevel: -1,
aspectScale: 1,
- zoom: 1.2,
+ zoom: 1,
layoutCenter: ["50%", "52%"],
- layoutSize: "110%",
+ layoutSize: "90%",
roam: false,
silent: true,
@@ -482,9 +454,9 @@ const initTownMap = async (name) => {
map: mapName,
zlevel: -2,
aspectScale: 1,
- zoom: 1.2,
+ zoom: 1,
layoutCenter: ["50%", "53%"],
- layoutSize: "110%",
+ layoutSize: "90%",
roam: false,
silent: true,
@@ -506,9 +478,9 @@ const initTownMap = async (name) => {
map: mapName,
zlevel: -4,
aspectScale: 1,
- zoom: 1.2,
+ zoom: 1,
layoutCenter: ["50%", "54%"],
- layoutSize: "110%",
+ layoutSize: "90%",
roam: false,
silent: true,
@@ -546,7 +518,7 @@ const initTownMap = async (name) => {
// return val[2] / 10;
},
markPoint: {
- data: pointerFn2(pointerList2)
+ data: pointerFn2(pointerList)
},
data: (() => {
@@ -582,9 +554,8 @@ const initTownMap = async (name) => {
}
})
params.data.data.forEach(item => {
-
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
- router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo) }`)
+ router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo)}&landName=${item.name}`)
}
})
diff --git a/src/components/detail/centerBottom.vue b/src/components/detail/centerBottom.vue
index 3c25643..e94581b 100644
--- a/src/components/detail/centerBottom.vue
+++ b/src/components/detail/centerBottom.vue
@@ -1,12 +1,12 @@
<template>
-<div class="bottom-li" :class="(item.flag) ? '' : 'act'" v-for="(item, index) in environmentData">
+<div class="bottom-li" :class="(item.flag) ? '' : 'act',actList.includes(item.name)?'dbg':''" v-for="(item, index) in environmentData">
<span class="color-font">{{ item.name }}</span>
<span>{{ item.value }}{{ item.unit }}</span>
<span v-if="item.flag">状态正常</span>
-<span v-else>状态正常</span>
+<span v-else>状态异常</span>
</div>
@@ -18,6 +18,12 @@
import { monitorInfoApi } from "@/api.js"
import {ref,reactive} from "vue"
+
+const actList=reactive([
+'环境湿度','环境温度','雨量','环境光照'
+
+])
+
const props = defineProps({
data:Object,
})
@@ -134,9 +140,12 @@ const monitorThreshold=reactive({})
}
.act {
- background-image: url('/static/detail/YC.png');
color: #C65956;
+ }
+ .dbg{
+ background-image: url('/static/detail/YC.png');
+
}
</style>
\ No newline at end of file
diff --git a/src/components/farmerMap.vue b/src/components/farmerMap.vue
index ad5e90f..f4bba1a 100644
--- a/src/components/farmerMap.vue
+++ b/src/components/farmerMap.vue
@@ -32,15 +32,32 @@
</style>
<script setup>
-import { ref, onMounted,defineEmits } from "vue"
+import { ref, onMounted, defineEmits } from "vue"
import * as echarts from 'echarts';
import "echarts-gl"
import geoJson from "/static/jsonData/luxian_geo.js"
import { useRoute } from "vue-router"
import { areaObj } from "@/store/index.js"
import { landListApi } from "@/api.js"
-const emit = defineEmits(['changeLand'])
+const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
+const emit = defineEmits(['changeLand'])
+const pointerFn2 = (lists) => {
+ let list = []
+ lists.forEach((item, index) => {
+ list.push({
+ coord: item.value,
+ value: item.name,
+ animation: true,
+ symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
+ symbolSize: [190, 30], // 图片大小
+ symbolOffset: ['50%', '-50%'],
+ data: lists,
+
+ },)
+ })
+ return list
+}
const areaStore = areaObj()
const deepCopy = (obj) => {
if (typeof obj !== 'object' || obj === null) {
@@ -62,39 +79,38 @@ const townJson = deepCopy(geoJson)
townJson.features = townJson.features.filter((item) => {
return item.properties.name == route.query.town
})
-const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
-const pointerFn2 = (lists) => {
- let list = []
- lists.forEach((item, index) => {
- list.push({
- coord: item.value,
- value: item.name,
- animation: true,
- data: lists,
- itemStyle: {
- normal: {
- borderColor: 'red',
- borderWidth: 1, // 标注边线线宽，单位px，默认为1
- label: {
- show: false
- }
- },
- emphasis: {
- borderColor: 'red',
- borderWidth: 5,
- label: {
- show: false
- }
- }
- },
+// const pointerFn2 = (lists) => {
+// let list = []
+// lists.forEach((item, index) => {
+// list.push({
+// coord: item.value,
+// value: item.name,
+// animation: true,
+// data: lists,
+// itemStyle: {
+// normal: {
+// borderColor: 'red',
+// borderWidth: 1, // 标注边线线宽，单位px，默认为1
+// label: {
+// show: false
+// }
+// },
+// emphasis: {
+// borderColor: 'red',
+// borderWidth: 5,
+// label: {
+// show: false
+// }
+// }
+// },
- },)
- })
- return list
-}
+// },)
+// })
+// return list
+// }
onMounted(async () => {
let center = []
let pointerList = []
@@ -112,15 +128,6 @@ onMounted(async () => {
})
- let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
- let pointerList2 = []
- center2.forEach((item, index) => {
- pointerList2.push({
- value: item,
- name: "土地" + index,
- id: 17
- })
- })
var mapName = 'lz';
const myChart = document.getElementById("farmerchart")
@@ -300,13 +307,13 @@ onMounted(async () => {
// return val[2] / 10;
},
markPoint: {
- data: pointerFn2(pointerList2)
+ data: pointerFn2(pointerList)
},
data: (() => {
let data = {
- 资产数: center2
+ 资产数: center
}
let finalData = []
@@ -334,7 +341,11 @@ onMounted(async () => {
params.data.data.forEach(item => {
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
- emit('changeLand',item.id)
+ let data = {
+ id: item.id,
+ name: item.name
+ }
+ emit('changeLand', data)
}
diff --git a/src/components/index/leftCenter.vue b/src/components/index/leftCenter.vue
index b607a45..2b92ac6 100644
--- a/src/components/index/leftCenter.vue
+++ b/src/components/index/leftCenter.vue
@@ -1,5 +1,5 @@
<template>
- <div>监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
+ <div>监测设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
<div class="cont">
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
@@ -15,11 +15,11 @@
</div>
<div class="eqNum">
<div>
- <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
+ <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备数量：<span
class="num color-font" style="margin-left: 10px;">{{ onlineNum }}</span> 台
</div>
<div>
- <img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num color-font"
+ <img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备数量：<span class="num color-font"
style="margin-left: 10px;">{{ offlineNum }}</span>
台
</div>
diff --git a/src/components/index/rightTop.vue b/src/components/index/rightTop.vue
index 25b075e..06952d1 100644
--- a/src/components/index/rightTop.vue
+++ b/src/components/index/rightTop.vue
@@ -1,19 +1,33 @@
<template>
<div class="content" id="eq">
+
+
+
<div class="eq" v-for="item in productList" :key="item">
- <img :src="item.image" style="height: 100%;border-radius: 1vh;" alt="">
- <div
- style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
+
+
+
+
+
+
+
+
+
+ <div class="eq-name"> {{ item.name }}</div>
+
+ <img :src="item.image" style="width: 10vw; border-radius: 1vh;" alt="">
+ <!-- <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
<div style="display: flex;align-items: center;">
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
{{ item.name }}
</div>
<div style="display: flex;align-items: center;">
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
- {{ item.desc }}
+ {{ item.desc }}
</div>
- </div>
+ </div> -->
</div>
+
</div>
</template>
<style lang="scss">
@@ -21,19 +35,48 @@
width: 100%;
height: 100%;
transition: 1s;
- // background-color: #fff;
overflow-y: auto;
font-size: 14px;
+ // flex-wrap: wrap;
+ // display: flex;
+ // justify-content: space-between;
+ // background-color: red;
.eq {
- width: 100%;
- height: 10vh;
- // background-color: #fff;
+ float: left;
+ margin-right: 1vw;
margin-bottom: 1vh;
- background-color: #092049;
- box-sizing: border-box;
- padding: 1vh;
- display: flex;
+ position: relative;
+
+ .eq-name {
+ position: absolute;
+ width: 100%;
+ height: 4vh;
+ text-align: center;
+ box-sizing: border-box;
+ padding-top: 1vh;
+
+ background-color: rgba(52, 76, 115, 0.7);
+ white-space: nowrap;
+ /* 文本不换行 */
+ overflow: hidden;
+ /* 超出部分隐藏 */
+ text-overflow: ellipsis;
+ font-size: 14px;
+
+
+ }
+
+ // display: inline-block;
+ // margin-bottom: 2vh;
+ // min-height: 10vh;
+ // background-color: #fff;
+ // margin-bottom: 1vh;
+ // background-color: #092049;
+ // box-sizing: border-box;
+ // padding: 1vh;
+ // display: flex;
+
}
}
@@ -53,17 +96,16 @@
}
</style>
<script setup>
-import {ref,reactive,onMounted} from "vue"
-import {productListApi} from "@/api.js"
+import { ref, reactive, onMounted } from "vue"
+import { productListApi } from "@/api.js"
import { areaObj } from "@/store/index.js"
-const userInfoStore=areaObj()
-// ...userInfoStore.userInfo
+const userInfoStore = areaObj()
const scrollTableFn = () => {
const tag = document.getElementById('eq')
const height = tag.scrollHeight
setInterval(() => {
tag.scrollTop += 1
- if ((tag.scrollTop + tag.clientHeight) >= height - 50) {
+ if ((tag.scrollTop + tag.clientHeight) >= height - 20) {
tag.scrollTop = 0
}
@@ -72,20 +114,25 @@ const scrollTableFn = () => {
}
-const productList=reactive([])
+const productList = reactive([])
productListApi(
{
- ...userInfoStore.userInfo
+ ...userInfoStore.userInfo
}
-).then(res=>{
+).then(res => {
res.data.list.forEach(item => {
productList.push(item)
});
})
-onMounted( ()=>{
- scrollTableFn()
+onMounted(() => {
+
+ setTimeout(() => {
+ scrollTableFn()
+
+ }, 3000)
+
})
</script>
\ No newline at end of file
diff --git a/src/components/warnDetail.vue b/src/components/warnDetail.vue
index b96a783..6797b97 100644
--- a/src/components/warnDetail.vue
+++ b/src/components/warnDetail.vue
@@ -6,7 +6,7 @@
<div style="display: flex;flex-direction: column;margin-left: 1vw;">
<div style="font-family:FZCYJ ;">告警数据:</div>
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
- <span class="text"> {{ props.data.value }}</span>
+ <span class="text"> {{ eqType(props.data.type, props.data.value) }} </span>
</div>
<!-- <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
<span class="text"> 这是一名后端开发</span>
@@ -19,7 +19,7 @@
<div class="box-bottom">
<div style="font-family: FZCYJ;">告警原因</div>
<div class="text" style="width: 10vw;">{{ props.data.content }}</div>
-
+
</div>
@@ -89,10 +89,41 @@
}
</style>
<script setup>
-import { ref, reactive, defineEmits,defineProps } from "vue"
+import { ref, reactive, defineEmits, defineProps } from "vue"
+
+
+const eqType = (type, value) => {
+
+ switch (type) {
+ case "ambient_temperature":
+ return "气温" + value + "℃"
+ case 'carbon_dioxide':
+ return "空气二氧化碳" + value + "ppm"
+ case 'soil_temperature':
+ return "土壤温度" + value + "℃"
+ case 'soil_moisture':
+ return "土壤湿度" + value + "℃"
+ case 'soil_potassium_phosphate_nitrogen':
+ return "土壤磷酸钾-含氮量偏高" + value + "mg/kg"
+ case 'ambient_air_pressure':
+ return "环境气压" + value + "KPa"
+ case 'rainfall':
+ return "雨量" + value + "mm"
+ case 'ambient_lighting':
+ return "环境光照" + value + "LUX"
+ case 'soil_conductivity':
+ return "土壤导电率" + value + "LUX"
+ case 'soil_PH':
+ return "土壤PH值为" + value
+ default:
+ }
+
+
+}
+
const props = defineProps({
- data:Object,
+ data: Object,
})
diff --git a/src/components/warnPop.vue b/src/components/warnPop.vue
index 3886fc6..94d4094 100644
--- a/src/components/warnPop.vue
+++ b/src/components/warnPop.vue
@@ -263,6 +263,138 @@ const setoptionsFn = (X, Y, tits) => {
}
return data
}
+// const CKP = {
+
+
+// toolbox: {
+// feature: {
+// saveAsImage: {}
+// }
+// },
+// grid: {
+// left: '3%',
+// right: '4%',
+// bottom: '3%',
+// containLabel: true
+// },
+// xAxis: [
+// {
+// show: false,
+// type: "category",
+// boundaryGap: false,
+// axisLabel: {
+// color: "#33a3dc",
+// fontSize: 14
+// },
+// axisLine: {
+// lineStyle: {
+// color: "rgba(255,255,255,.1)"
+// }
+// },
+// data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
+// }
+// ],
+// yAxis: [
+// {
+// show:false,
+// type: 'value'
+// }
+// ],
+// series: [
+// {
+// name: 'Email',
+// type: 'line',
+// stack: 'Total',
+// smooth: true,
+// lineStyle: {
+// normal: {
+// color: "white" // 线条颜色
+// }
+// },
+// areaStyle: {
+// // 区域填充样式
+// normal: {
+// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+// [
+// { offset: 0, color: "#1A4BB3" },
+
+// ],
+// false
+// )
+// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+// }
+// },
+// emphasis: {
+// focus: 'series'
+// },
+// data: [120, 132, 101, 134, 90, 230, 210]
+// },
+// {
+// name: 'Union Ads',
+// type: 'line',
+// smooth: true,
+// stack: 'Total',
+// lineStyle: {
+// normal: {
+// color: "white" // 线条颜色
+// }
+// },
+// areaStyle: {
+// // 区域填充样式
+// normal: {
+// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+// [
+// { offset: 0, color: "#1C6AA9" },
+
+// ],
+// false
+// )
+// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+// }
+// },
+// emphasis: {
+// focus: 'series'
+// },
+// data: [220, 182, 191, 234, 290, 330, 310]
+// },
+// {
+// name: 'Video Ads',
+// type: 'line',
+// stack: 'Total',
+// smooth: true,
+// lineStyle: {
+// normal: {
+// color: "white" // 线条颜色
+// }
+// },
+// areaStyle: {
+// // 区域填充样式
+// normal: {
+// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+// [
+// { offset: 0, color: "#38A3D9" },
+
+// ],
+// false
+// )
+// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+// }
+// },
+// emphasis: {
+// focus: 'series'
+// },
+// data: [150, 232, 201, 154, 190, 330, 410]
+// },
+
+// ]
+// };
+
const CKP = {
// backgroundColor: "#21263A",
@@ -354,8 +486,7 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
- { offset: 0, color: "rgba(22,84,156, 0.8)" },
- { offset: 1, color: "rgba(22,84,156, 0)" }
+ { offset: 0, color: "#306CDC" },
],
false
)
@@ -382,8 +513,7 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
- { offset: 0, color: "rgba(22,84,156, 0.8)" },
- { offset: 1, color: "rgba(22,84,156, 0)" }
+ { offset: 0, color: "#1B4BB5" },
],
false
)
@@ -409,8 +539,7 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
- { offset: 0, color: "rgba(22,84,156, 0.8)" },
- { offset: 1, color: "rgba(22,84,156, 0)" }
+ { offset: 0, color: "#5EAAE2" },
],
false
)
diff --git a/src/view/detail.vue b/src/view/detail.vue
index 8da0174..146836f 100644
--- a/src/view/detail.vue
+++ b/src/view/detail.vue
@@ -22,7 +22,7 @@
<div class="top-c">
<div style="display: flex;justify-content: space-between;">
<div class=" c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
- <div class=" c-top-tits"><span class="color-font">{{ route.query.town }}地块</span> </div>
+ <div class=" c-top-tits"><span class="color-font">{{ landName }}</span> </div>
</div>
<farmerMap @changeLand="changeLandFn"></farmerMap>
</div>
@@ -63,10 +63,13 @@ let data = reactive(
}
)
+
+const landName=ref(route.query.landName)
+
landListApi({
...data
}).then(res => {
- console.log(res)
+ console.log(res.data)
res.data.list.forEach(item => {
if (item.id == data.land_id) {
video_url.value = item.video_url
@@ -74,9 +77,12 @@ landListApi({
})
})
-const changeLandFn = (land_id) => {
-
- data.land_id = land_id
+const changeLandFn = (item) => {
+// console.log(item)
+// return
+ data.land_id = item.id
+ landName.value=item.name
+ // route.query.townName=item.name
}
</script>
diff --git a/src/view/home.vue b/src/view/home.vue
index 70f4ec0..8c52900 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -14,8 +14,8 @@
<div class="c">
<div class="top">
<div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
- <div class=" c-top-tits"><span class="color-font" @click="back">返回首页</span></div>
- <div class=" c-top-tits"><span class="color-font">地块</span> </div>
+ <div class="c-top-tits" style="z-index: 99999;"><span class="color-font" @click="back">返回首页</span></div>
+ <div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div>
</div>
<div class="c-top-tit" v-else>
<div class="c-top-li">种植面积 <span class="color-font"
@@ -26,12 +26,9 @@
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
</div>
- <!-- <div class="c-top-tit">
- <div class=" c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
- <div class=" c-top-tits"><span class="color-font">{{}}地块</span> </div>
- </div> -->
+
<div class="map">
- <areaMap ></areaMap>
+ <areaMap @getTowmName="getTowmName"></areaMap>
</div>
</div>
<div class="bottom">
@@ -49,11 +46,11 @@
</div>
</div>
<div class="video" style="height: 65%;">
- <div class="video-tit"> 实时监测影像 </div>
+ <div class="video-tit "> 实时监测影像 </div>
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
<div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else>
- <img src="/static/index/video.png" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" alt="">
+ <img src="/static/index/video.png" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;" alt="">
</div>
</div>
@@ -114,9 +111,13 @@ const choseUrl=(item)=>{
}
const back=()=>{
+ console.log("back")
router.go(0)
}
-
+const townName=ref("")
+const getTowmName=(e)=>{
+ townName.value=e
+}
</script>
<style lang="scss">
@@ -248,7 +249,7 @@ const back=()=>{
.video {
.video-tit {
- color: white;
+ color: #CEE4FE;
width: 110px;
text-align: center;
line-height: 30px;
@@ -257,6 +258,9 @@ const back=()=>{
background-size: cover;
font-size: 15px;
margin-bottom: 3vh;
+ font-size: 15px;
+ font-family: FZCYJ;
+
}
}
}
@@ -276,5 +280,17 @@ const back=()=>{
}
}
+}
+
+.c-top-tits {
+
+padding: 1vh 1vw;
+font-size: 20px;
+// border: 1px solid red;
+cursor: pointer;
+background-image: url('/static/detail/FHSY.png');
+background-size: 100% 100%;
+
+
}
</style>
\ No newline at end of file
diff --git a/static/detail/地块标签@2x.png b/static/detail/地块标签@2x.png
deleted file mode 100644
index a2a16c6..0000000
Binary files a/static/detail/地块标签@2x.png and /dev/null differ
diff --git a/static/detail/地块标签选中态@2x.png b/static/detail/地块标签选中态@2x.png
deleted file mode 100644
index 6e851eb..0000000
Binary files a/static/detail/地块标签选中态@2x.png and /dev/null differ
diff --git a/static/detail/地方地块显示背景@2x.png b/static/detail/地方地块显示背景@2x.png
deleted file mode 100644
index e309269..0000000
Binary files a/static/detail/地方地块显示背景@2x.png and /dev/null differ
diff --git a/static/detail/数据装饰2@2x.png b/static/detail/数据装饰2@2x.png
deleted file mode 100644
index cc83027..0000000
Binary files a/static/detail/数据装饰2@2x.png and /dev/null differ
diff --git a/static/detail/跳转页_弹窗背景_1@2x.png b/static/detail/跳转页_弹窗背景_1@2x.png
deleted file mode 100644
index 8f98204..0000000
Binary files a/static/detail/跳转页_弹窗背景_1@2x.png and /dev/null differ
diff --git a/static/index/video.png b/static/index/video.png
index a5fb209..bffbd97 100644
Binary files a/static/index/video.png and b/static/index/video.png differ
diff --git a/static/index/地块btn_选中态@3x.png b/static/index/地块btn_选中态@3x.png
deleted file mode 100644
index 33bac9f..0000000
Binary files a/static/index/地块btn_选中态@3x.png and /dev/null differ
diff --git a/static/index/地方标签选中态@3x.png b/static/index/地方标签选中态@3x.png
deleted file mode 100644
index b0a66f2..0000000
Binary files a/static/index/地方标签选中态@3x.png and /dev/null differ
diff --git a/static/index/泸县标签@3x.png b/static/index/泸县标签@3x.png
deleted file mode 100644
index d01b664..0000000
Binary files a/static/index/泸县标签@3x.png and /dev/null differ