From 6a25cf106a57e4026537b164c60fc788202ea752 Mon Sep 17 00:00:00 2001
From: lxz <lxz15516116653@163.com>
Date: Sat, 6 Jan 2024 15:51:01 +0800
Subject: [PATCH] shipin

---
 src/components/areaMap.vue             |   3 +
 src/components/detail/centerBottom.vue | 125 ++++----
 src/components/detail/leftTop.vue      |   2 +-
 src/components/index/centerBottom.vue  |   2 +-
 src/components/index/leftBottom.vue    |   8 +-
 src/components/index/leftTop.vue       |   1 +
 src/components/index/rightTop.vue      | 114 +++-----
 src/components/scrollTable.vue         |   2 +
 src/components/videoFlv.vue            |   6 +-
 src/components/warnPop.vue             | 378 +++++++++++++------------
 src/view/detail.vue                    |  76 +++--
 src/view/home.vue                      | 150 +++++++---
 vite.config.js                         |   3 +-
 13 files changed, 474 insertions(+), 396 deletions(-)

diff --git a/src/components/areaMap.vue b/src/components/areaMap.vue
index ba111d2..5a0be34 100644
--- a/src/components/areaMap.vue
+++ b/src/components/areaMap.vue
@@ -546,6 +546,9 @@ const initTownMap = async (name) => {
   echarts.registerMap(mapName, townJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
+
+
+  
   bg.on('click', function (params) {
     let longInfo = params.data.coord
     areaStore.areaCodeList.forEach(item => {
diff --git a/src/components/detail/centerBottom.vue b/src/components/detail/centerBottom.vue
index e94581b..8edbc06 100644
--- a/src/components/detail/centerBottom.vue
+++ b/src/components/detail/centerBottom.vue
@@ -1,62 +1,58 @@
 <template>
+    <div class="bottom-li" :class="(item.flag) ? '' : 'act', actList.includes(item.name) ? 'dbg' : ''"
+        v-for="(item, index) in environmentData">
 
+        <span style="flex: 2;" class="color-font">{{ item.name }}</span>
+        <span style="flex: 2;">{{ item.value }}{{ item.unit }}</span>
+        <span style="flex: 1;" v-if="item.flag">状态正常</span>
+        <span style="flex: 1;" v-else>状态异常</span>
 
-<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>
-
-</div>
-
-
-
+    </div>
 </template>
 <script setup>
 
 import { monitorInfoApi } from "@/api.js"
 
-import {ref,reactive} from "vue"
+import { ref, reactive } from "vue"
 
-const actList=reactive([
-'环境湿度','环境温度','雨量','环境光照'
+const actList = reactive([
+    '环境湿度', '环境温度', '雨量', '环境光照'
 
 ])
 
 const props = defineProps({
-    data:Object,
+    data: Object,
 })
 
-const statusFn=(min,max,item  )=>{
+const statusFn = (min, max, item) => {
 
-if(item.value>=min&&item.value<=max ) item.flag=true
-else item.flag=false
-    
-} 
+    if (item.value >= min && item.value <= max) item.flag = true
+    else item.flag = false
+
+}
 
 monitorInfoApi(
     {
-      ...props.data
+        ...props.data
     }
 
 ).then(res => {
-    for (let key in res.data.monitorThreshold){
-    monitorThreshold[key]=res.data.monitorThreshold[key]
-}
-    for (let key in environmentData){
-        environmentData[key].value=res.data.landCollection[key]
-}
+    for (let key in res.data.monitorThreshold) {
+        monitorThreshold[key] = res.data.monitorThreshold[key]
+    }
+    for (let key in environmentData) {
+        environmentData[key].value = res.data.landCollection[key]
+    }
 
 
-statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_speed )
-// statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_direction )
-statusFn(monitorThreshold.air_mois_mix,monitorThreshold.air_mois_max,environmentData.ambient_humidity )
-statusFn(monitorThreshold.air_temp_min,monitorThreshold.air_temp_max,environmentData.ambient_temperature )
-statusFn(monitorThreshold.air_co2_content_min,monitorThreshold.air_co2_content_max,environmentData.carbon_dioxide )
-statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_air_pressure )
-// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.rainfall )
-// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_lighting )
+    statusFn(monitorThreshold.wind_speed_min, monitorThreshold.wind_speed_max, environmentData.wind_speed)
+    // statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_direction )
+    statusFn(monitorThreshold.air_mois_mix, monitorThreshold.air_mois_max, environmentData.ambient_humidity)
+    statusFn(monitorThreshold.air_temp_min, monitorThreshold.air_temp_max, environmentData.ambient_temperature)
+    statusFn(monitorThreshold.air_co2_content_min, monitorThreshold.air_co2_content_max, environmentData.carbon_dioxide)
+    statusFn(monitorThreshold.ambient_air_pressure_min, monitorThreshold.ambient_air_pressure_max, environmentData.ambient_air_pressure)
+    // statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.rainfall )
+    // statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_lighting )
 
 
 
@@ -65,19 +61,19 @@ statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_
 })
 const environmentData = reactive({
 
-    wind_speed:  {
+    wind_speed: {
         name: "风速",
         value: 10,
         unit: "m/s",
         flag: true
     },
-    wind_direction:  {
+    wind_direction: {
         name: "风向",
         value: 10,
         unit: "",
         flag: true
     },
-    ambient_humidity:    {
+    ambient_humidity: {
         name: "环境湿度",
         value: 10,
         unit: "%",
@@ -89,7 +85,7 @@ const environmentData = reactive({
         unit: "℃",
         flag: true
     },
-    carbon_dioxide:  {
+    carbon_dioxide: {
         name: "二氧化碳",
         value: 10,
         unit: "ppm",
@@ -107,45 +103,44 @@ const environmentData = reactive({
         unit: "mm/h",
         flag: true
     },
-    ambient_lighting:  {
+    ambient_lighting: {
         name: "环境光照",
         value: 10,
-        unit: "%",
+        unit: "Lux",
         flag: true
     },
 }
 )
-const monitorThreshold=reactive({})
+const monitorThreshold = reactive({})
 
 </script>
 <style lang="scss">
-
-
 .bottom-li {
-                // background-color: #fff;
-                width: 49%;
-                height: 4vh;
-                display: flex;
-                box-sizing: border-box;
-                justify-content: space-between;
-                // border: 1px solid red;
-                background-image: url('/static/detail/ZC.png');
-                background-size: 100% 100%;
-                align-items: center;
-                font-size: 16px;
-                color: #E5EFFF;
-                font-family: FZCYJ;
-                padding: 0 1VW;
+    // background-color: #fff;
+    width: 49%;
+    height: 4vh;
+    display: flex;
+    box-sizing: border-box;
+    // justify-content: space-between;
+    // border: 1px solid red;
+    background-image: url('/static/detail/ZC.png');
+    background-size: 100% 100%;
+    align-items: center;
+    font-size: 16px;
+    color: #E5EFFF;
+    font-family: FZCYJ;
+    padding: 0 1VW;
 
-            }
+}
 
-            .act {
-                color: #C65956;
+.act {
+    color: #C65956;
 
 
-            }
-            .dbg{
-                background-image: url('/static/detail/YC.png');
+}
 
-            }
+.dbg {
+    background-image: url('/static/detail/YC.png');
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/detail/leftTop.vue b/src/components/detail/leftTop.vue
index a39b989..b053ca3 100644
--- a/src/components/detail/leftTop.vue
+++ b/src/components/detail/leftTop.vue
@@ -2,7 +2,7 @@
     <div style="display: flex;justify-content: space-between;align-items: center;">
         <span style="font-size: 15px;">种植总面积： </span>
         <div>
-            <span class="area-num "  v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
+            <span class="area-num "  v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span> <span style="font-size: 18px;">㎡</span> 
         </div>
     </div>
     <div  style="font-size: 15px;">种植种类 ：</div>
diff --git a/src/components/index/centerBottom.vue b/src/components/index/centerBottom.vue
index 1e54f2d..088751d 100644
--- a/src/components/index/centerBottom.vue
+++ b/src/components/index/centerBottom.vue
@@ -34,7 +34,7 @@ const alignFn = (num) => {
 const config = reactive({
     header: ['地块名称', '土壤温度(℃)', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速（m/s）', '环境温度(℃)', '环境湿度', '二氧化碳（ppm）', '历史预警数据'],
     headerBGC: "#092757",
-    font:'10px',
+    font:'12px',
     headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
     oddRowBGC: "#0C2045",
     align: alignFn(10),
diff --git a/src/components/index/leftBottom.vue b/src/components/index/leftBottom.vue
index 95fa7f4..e1522cb 100644
--- a/src/components/index/leftBottom.vue
+++ b/src/components/index/leftBottom.vue
@@ -50,11 +50,17 @@ plantProductCountApi(
 
     }
 ).then(res => {
+
     correctionListFn(res.data.list).forEach(item => {
+
+console.log(item)
+
         config2.data.push(
-            [item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`, item[1].kind, `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`]
+            [item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`,item[1]? item[1].kind:'', item[1]? `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`:""]
         )
     })
+
+
 })
 
 
diff --git a/src/components/index/leftTop.vue b/src/components/index/leftTop.vue
index b3e1806..f83c914 100644
--- a/src/components/index/leftTop.vue
+++ b/src/components/index/leftTop.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail>
     <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable>
 </template>
diff --git a/src/components/index/rightTop.vue b/src/components/index/rightTop.vue
index 06952d1..b7f8583 100644
--- a/src/components/index/rightTop.vue
+++ b/src/components/index/rightTop.vue
@@ -1,92 +1,58 @@
 <template>
-    <div class="content" id="eq">
-
-
-
-        <div class="eq" v-for="item in productList" :key="item">
-
-
-
-
-
-
-
-
-
-            <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 }}
-                </div>
-            </div> -->
+    <div class="waterfall" id="eq">
+        <div class="column">
+            <div class="item" v-for="item in productList" :key="item">
+                <div class="eq-name"> {{ item.name }}</div>
+                <img :src="item.image" style="width: 100%; border-radius: 1vh;" alt="">
+            </div>
         </div>
-
     </div>
 </template>
 <style lang="scss">
-.content {
-    width: 100%;
-    height: 100%;
-    transition: 1s;
+.waterfall {
+    display: flex;
     overflow-y: auto;
+    height: 100%;
+    /* 添加纵向滚动条 */
+}
+
+.column {
+    flex: 1;
+    column-width: 190px;
+    column-gap: 20px;
+}
+
+.item {
+    break-inside: avoid;
+    margin-bottom: 20px;
+    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;
-    // flex-wrap: wrap;
-    // display: flex;
-    // justify-content: space-between;
-    // background-color: red;
 
-    .eq {
-        float: left;
-        margin-right: 1vw;
-        margin-bottom: 1vh;
-        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;
-
-    }
 
 }
 
-.content::-webkit-scrollbar {
+.waterfall::-webkit-scrollbar {
     width: 10px;
     background-color: #153041;
 }
 
-.content::-webkit-scrollbar-track {
+.waterfall::-webkit-scrollbar-track {
     background-color: #153041;
 }
 
diff --git a/src/components/scrollTable.vue b/src/components/scrollTable.vue
index 05196d7..e49e3e5 100644
--- a/src/components/scrollTable.vue
+++ b/src/components/scrollTable.vue
@@ -444,6 +444,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   transition: all 0.3s;
+  font-family: FZCYJ;
+
 }
 
 .dv-scroll-board .rows {
diff --git a/src/components/videoFlv.vue b/src/components/videoFlv.vue
index 07c7ba9..c571f13 100644
--- a/src/components/videoFlv.vue
+++ b/src/components/videoFlv.vue
@@ -28,7 +28,7 @@
         type="input"
         autocomplete="on"
         ref="playUrl"
-        value="http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_1.live.flv?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT"
+        :value="src"
       />
       <button v-if="!playing" @click="play">播放</button>
       <button v-else @click="pause">停止</button>
@@ -39,7 +39,9 @@
 
 export default {
   name: "DemoPlayer",
-  props: {},
+  props: {
+    src:String
+  },
   data () {
     return {
       jessibuca: null,
diff --git a/src/components/warnPop.vue b/src/components/warnPop.vue
index 94d4094..0f77174 100644
--- a/src/components/warnPop.vue
+++ b/src/components/warnPop.vue
@@ -170,17 +170,17 @@ const setoptionsFn = (X, Y, tits) => {
     let data = {
         color: ["#ffc20e", "#00ae9d"],
         grid: {
-            top: "5%",
+            top: "10%",
             left: "2%",
             right: "5%",
-            bottom: "5%",
+            bottom: "10%",
             containLabel: true
         },
         tooltip: {
             trigger: "axis",
             backgroundColor: "rgba(61, 85, 102, 0.2)",
             borderWidth: 1,
-            confine:true,
+            confine: true,
             borderColor: "#9DBAE1", // 边框颜色
             // 选中线颜色
             axisPointer: {
@@ -263,144 +263,11 @@ 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",
-    // color: ["#ffc20e", "#00ae9d",'red'],
+
+
     grid: {
-        top: "5%",
+        top: "10%",
         left: "2%",
         right: "5%",
         bottom: "5%",
@@ -424,16 +291,6 @@ const CKP = {
             fontSize: 10
         }
     },
-    legend: {
-        right: "3%",
-        icon: "circle",
-        itemWidth: 8,
-        itemGap: 20,
-        show: false,
-        textStyle: {
-            padding: [0, 0, 0, 5]
-        }
-    },
     xAxis: [
         {
             show: false,
@@ -454,27 +311,15 @@ const CKP = {
     yAxis: [
         {
             show: false,
-            type: "value",
-            name: "",
-            axisLabel: {
-                color: "#33a3dc",
-                fontSize: 14
-            },
-            splitLine: {
-                lineStyle: {
-                    type: "solid",
-                    color: "rgba(255,255,255,.1)",
-                    width: 1
-                }
-            }
+            type: 'value'
         }
     ],
     series: [
         {
-            name: "氮",
-            type: "line",
-            smooth: true, // 是否平滑曲线显示
-            symbolSize: 0,
+            name: '氮',
+            type: 'line',
+            smooth: true,
+            symbolSize:0,
             lineStyle: {
                 normal: {
                     color: "white" // 线条颜色
@@ -486,7 +331,8 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "#306CDC" },
+                            { offset: 0, color: "#91CC75" },
+
                         ],
                         false
                     )
@@ -494,14 +340,18 @@ const CKP = {
                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                 }
             },
+            emphasis: {
+                focus: 'series'
+            },
             data: []
         },
         {
-            name: "磷",
-            type: "line",
-            smooth: true, // 是否平滑曲线显示
-            // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-            symbolSize: 0,
+            name: '磷',
+            type: 'line',
+            smooth: true,
+            stack: 'Total',
+            symbolSize:0,
+
             lineStyle: {
                 normal: {
                     color: "white" // 线条颜色
@@ -513,7 +363,8 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "#1B4BB5" },
+                            { offset: 0, color: "#1C6AA9" },
+
                         ],
                         false
                     )
@@ -521,13 +372,17 @@ const CKP = {
                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                 }
             },
+            emphasis: {
+                focus: 'series'
+            },
             data: []
-        }, {
-            name: "钾",
-            type: "line",
-            smooth: true, // 是否平滑曲线显示
-            // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-            symbolSize: 0,
+        },
+        {
+            name: '钾',
+            type: 'line',
+            stack: 'Total',
+            symbolSize:0,
+            smooth: true,
             lineStyle: {
                 normal: {
                     color: "white" // 线条颜色
@@ -539,7 +394,8 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "#5EAAE2" },
+                            { offset: 0, color: "#38A3D9" },
+
                         ],
                         false
                     )
@@ -547,10 +403,164 @@ const CKP = {
                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                 }
             },
+            emphasis: {
+                focus: 'series'
+            },
             data: []
-        }
+        },
+
     ]
-}
+};
+
+
+// const CKP = {
+//     // backgroundColor: "#21263A",
+//     // color: ["#ffc20e", "#00ae9d",'red'],
+//     grid: {
+//         top: "5%",
+//         left: "2%",
+//         right: "5%",
+//         bottom: "5%",
+//         containLabel: true
+//     },
+    // tooltip: {
+    //     trigger: "axis",
+    //     backgroundColor: "rgba(61, 85, 102, 0.2)",
+    //     borderWidth: 1,
+    //     confine:true,
+    //     borderColor: "#9DBAE1", // 边框颜色
+    //     // 选中线颜色
+    //     axisPointer: {
+    //         lineStyle: {
+    //             color: "#9DBAE1"
+    //         }
+    //     },
+    //     // 字体颜色
+    //     textStyle: {
+    //         color: "#fff",
+    //         fontSize: 10
+    //     }
+    // },
+//     legend: {
+//         right: "3%",
+//         icon: "circle",
+//         itemWidth: 8,
+//         itemGap: 20,
+//         show: false,
+//         textStyle: {
+//             padding: [0, 0, 0, 5]
+//         }
+//     },
+//     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",
+//             name: "",
+//             axisLabel: {
+//                 color: "#33a3dc",
+//                 fontSize: 14
+//             },
+//             splitLine: {
+//                 lineStyle: {
+//                     type: "solid",
+//                     color: "rgba(255,255,255,.1)",
+//                     width: 1
+//                 }
+//             }
+//         }
+//     ],
+//     series: [
+//         {
+//             name: "氮",
+//             type: "line",
+//             smooth: true, // 是否平滑曲线显示
+//             symbolSize: 0,
+//             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: "#306CDC" },
+//                     //     ],
+//                     //     false
+//                     // )
+//                     color:"#2E69D7"
+//                     // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//                 }
+//             },
+//             data: []
+//         },
+//         {
+//             name: "磷",
+//             type: "line",
+//             smooth: true, // 是否平滑曲线显示
+//             // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+//             symbolSize: 0,
+//             lineStyle: {
+//                 normal: {
+//                     color: "white" // 线条颜色
+//                 }
+//             },
+//             areaStyle: {
+//                 // 区域填充样式
+//                 normal: {
+//                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+//                     color:"red"
+
+//                     // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//                 }
+//             },
+//             data: []
+//         }, {
+//             name: "钾",
+//             type: "line",
+//             smooth: true, // 是否平滑曲线显示
+//             // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+//             symbolSize: 0,
+//             lineStyle: {
+//                 normal: {
+//                     color: "white" // 线条颜色
+//                 }
+//             },
+//             areaStyle: {
+//                 // 区域填充样式
+//                 normal: {
+//                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+//                     color:"green"
+
+//                     // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                     // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//                 }
+//             },
+//             data: []
+//         }
+//     ]
+// }
 
 
 
@@ -565,8 +575,8 @@ landMonitorAlarmHistoryApi({
         data[key] = res.data.list[key]
     }
 
-    initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value),'土壤温度')
-    initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value),'土壤湿度')
+    initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value), '土壤温度')
+    initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value), '土壤湿度')
     initCharts('l_b', setoptionsFn(res.data.list.soil_PH.historyList[0].time, res.data.list.soil_PH.historyList[1].value))
     initCharts('c_b', setoptionsFn(res.data.list.wind_speed.historyList[0].time, res.data.list.wind_speed.historyList[1].value))
     initCharts('r_t', setoptionsFn(res.data.list.ambient_temperature.historyList[0].time, res.data.list.ambient_temperature.historyList[1].value))
diff --git a/src/view/detail.vue b/src/view/detail.vue
index 146836f..9f52965 100644
--- a/src/view/detail.vue
+++ b/src/view/detail.vue
@@ -9,7 +9,7 @@
             </div>
             <div class="top center">
 
-                <JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
+                <JessibucaDemo v-if="video_url&&showVideo" :src="video_url"></JessibucaDemo>
 
 
 
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue"
+import { ref, reactive, onMounted, onBeforeUnmount } from "vue"
 import farmerMap from "../components/farmerMap.vue";
 import leftTop from "../components/detail/leftTop.vue";
 import leftCenter from "../components/detail/leftCenter.vue";
@@ -52,6 +52,7 @@ import rightBottom from "../components/detail/rightBottom.vue";
 import { useRouter, useRoute } from "vue-router"
 import JessibucaDemo from "@/components/videoFlv.vue"
 import { landListApi } from "@/api.js"
+const showVideo = ref(false)
 const video_url = ref('')
 const router = useRouter()
 const route = useRoute()
@@ -62,29 +63,58 @@ let data = reactive(
         streetCode: JSON.parse(route.query.parmas).streetCode
     }
 )
+const landName = ref(route.query.landName)
 
-
-const landName=ref(route.query.landName) 
-
-landListApi({
-    ...data
-}).then(res => {
-    console.log(res.data)
-    res.data.list.forEach(item => {
-        if (item.id == data.land_id) {
-            video_url.value = item.video_url
-        }
-    })
-})
-
-const changeLandFn = (item) => {
-// console.log(item)
-// return
-    data.land_id = item.id
-    landName.value=item.name
-    // route.query.townName=item.name
-
+let socket = new WebSocket('wss://iot.lihaink.cn/test')
+const pullStream = () => {
+    const onSocketOpen = (event) => {
+        console.log("scoket打开")
+    }
+    const onSocketClose = (event) => {
+        console.log('WebSocket连接已关闭');
+    }
+    const onSocketError = (event) => {
+        console.error('WebSocket连接发生错误');
+    }
+    socket.addEventListener('open', onSocketOpen);
+    socket.addEventListener('close', onSocketClose);
+    socket.addEventListener('error', onSocketError);
 }
+pullStream()
+
+
+const getDetail = () => {
+    showVideo.value = false
+    landListApi({
+        ...data
+    }).then(res => {
+        res.data.list.forEach(item => {
+            if (item.id == data.land_id) {
+                video_url.value = item.video_url
+                showVideo.value = true
+
+                let data = {
+                    username: item.master_phone,
+                    // device: 'lihai_lot_walnutpi_dev_' + item.id,
+                    device: 'lihai_lot_walnutpi_dev_' + 5,
+                    scene: 'screen'
+                }
+                socket.send(JSON.stringify(data))
+            }
+        })
+    })
+}
+
+getDetail()
+onBeforeUnmount(() => {
+    socket.close()
+})
+const changeLandFn = (item) => {
+    data.land_id = item.id
+    landName.value = item.name
+    getDetail()
+}
+
 </script>
 <style lang="scss">
 .box {
diff --git a/src/view/home.vue b/src/view/home.vue
index 8c52900..736ad8d 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -2,7 +2,7 @@
     <div class="box">
         <div class="l">
             <div class="top">
-                <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop>
+                <!-- <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop> -->
             </div>
             <div class="center top">
                 <leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter>
@@ -14,19 +14,19 @@
         <div class="c">
             <div class="top">
                 <div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
-                    <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 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"
-                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
-                    <div class="c-top-li">种植种类 <span class="color-font"
-                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.plantCount }}</span> 种</div>
-                    <div class="c-top-li">地块数量 <span class="color-font"
-                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
+                    <div class="c-top-li">种植面积 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+                        centerData.totalArea }}</span> ㎡</div>
+                    <div class="c-top-li">种植种类 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+                        centerData.plantCount }}</span> 种</div>
+                    <div class="c-top-li">地块数量 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+                        centerData.landCount }}</span> 块</div>
                 </div>
-               
-              
+
+
                 <div class="map">
                     <areaMap @getTowmName="getTowmName"></areaMap>
                 </div>
@@ -42,17 +42,23 @@
             <div class="bottoms">
                 <div style="height: 35%;">
                     <div class="landa">
-                        <div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{ item.title }}</div>
+                        <div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
+                            item.title }}</div>
                     </div>
                 </div>
                 <div class="video" style="height: 65%;">
                     <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%);width: 50px;height: 50px;" alt="">
-                        
-                        </div>
+                    <JessibucaDemo v-if="video_url && showVideo" :src="video_url" style="height: 80%;width: 95%;">
+                    </JessibucaDemo>
+
+
+
+                    <div style="width: 95%;height: 28vh;background-color: #0C2856;position: relative;" v-else>
+                        <img src="/static/index/video.png"
+                            style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;"
+                            alt="">
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -60,7 +66,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue"
+import { ref, reactive, onMounted, watch,onBeforeUnmount } from "vue"
 import leftTop from "@/components/index/leftTop.vue"
 import leftCenter from "../components/index/leftCenter.vue"
 import leftBottom from "../components/index/leftBottom.vue"
@@ -72,17 +78,39 @@ import { landListApi } from "@/api.js"
 import rightTop from "../components/index/rightTop.vue"
 import { areaObj } from "@/store/index.js"
 import { useRouter } from "vue-router"
-const router=useRouter()
-const userInfoStore= areaObj()
+const router = useRouter()
+const userInfoStore = areaObj()
 // ...userInfoStore.userInfo
 
+const showVideo = ref(false)
+watch(
+    () => userInfoStore.userInfo.streetCode,
+    (value, oldValue) => {
+        showVideo.value = false
+        landListApi({
+            ...userInfoStore.userInfo
+        }).then(res => {
+            landlist.splice(0, 99999)
+
+            res.data.list.forEach(item => { landlist.push(item) })
+
+        })
+
+
+    }, {
+    deep: true,
+    // immediate: true
+}
+
+)
+
 centralCountApi({
-...userInfoStore.userInfo
+    ...userInfoStore.userInfo
 }).then(res => {
 
-for (let key in centerData){
-    centerData[key]=res.data[key]
-}
+    for (let key in centerData) {
+        centerData[key] = res.data[key]
+    }
 })
 
 const centerData = reactive({
@@ -97,28 +125,60 @@ const landlist = reactive([])
 landListApi({
     ...userInfoStore.userInfo
 }).then(res => {
+
     res.data.list.forEach(item => { landlist.push(item) })
 
 })
-const video_url=ref('')
 
-const choseUrl=(item)=>{
-    video_url.value=''
-    setTimeout( ()=>{
-        video_url.value=item.video_url
+// 新建scoket 通知開始推流
+const video_url = ref('')
+let socket = new WebSocket('wss://iot.lihaink.cn/test')
+const pullStream = () => {
+    const onSocketOpen = (event) => {
+        console.log("scoket打开")
+    }
+    const onSocketClose = (event) => {
+        console.log('WebSocket连接已关闭');
+    }
+    const onSocketError = (event) => {
+        console.error('WebSocket连接发生错误');
+    }
+    socket.addEventListener('open', onSocketOpen);
+    socket.addEventListener('close', onSocketClose);
+    socket.addEventListener('error', onSocketError);
+}
+pullStream()
 
-    },500)
+
+const choseUrl = (item) => {
+    video_url.value = ''
+    showVideo.value = false
+    setTimeout(() => {
+        let data = {
+            username: item.master_phone,
+            // device: 'lihai_lot_walnutpi_dev_' + item.id,
+            device: 'lihai_lot_walnutpi_dev_' + 5,
+            scene: 'screen'
+        }
+        socket.send(JSON.stringify(data))
+        video_url.value = item.video_url
+        showVideo.value = true
+    }, 500)
 
 }
-const back=()=>{
+const back = () => {
     console.log("back")
     router.go(0)
 }
-const townName=ref("")
-const getTowmName=(e)=>{
-    townName.value=e
+const townName = ref("")
+const getTowmName = (e) => {
+    townName.value = e
 }
 
+onBeforeUnmount(() => {
+    socket.close()
+})
+
 </script>
 <style lang="scss">
 .box {
@@ -140,7 +200,7 @@ const getTowmName=(e)=>{
             background-image: url('/static/index/SBGJTJ.png');
             margin-top: 1vh;
             box-sizing: border-box;
-            padding: 6vh 2vh 1vh 2vh;
+            padding: 6vh 2.8vh 1vh 2.5vh;
             color: white;
             font-size: 14px;
             position: relative;
@@ -220,10 +280,11 @@ const getTowmName=(e)=>{
         .bottoms {
             width: 25vw;
             box-sizing: border-box;
-            padding-top: 6vh;
-            padding: 6vh 1vh 0;
+            // padding-top: 6vh;
+            // padding: 6vh 1vh 0;
             height: 61vh;
             background-size: 100% 100%;
+            padding: 6vh 0 0 1.3vw;
 
             background-image: url('/static/index/MQ.png');
             margin-top: 1vh;
@@ -274,6 +335,7 @@ const getTowmName=(e)=>{
             background-image: url('/static/index/YJCP.png');
             margin-top: 1vh;
             padding-top: 6vh;
+            padding-left: 1.4vw;
 
 
 
@@ -284,12 +346,12 @@ const getTowmName=(e)=>{
 
 .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%;
+    padding: 1vh 1vw;
+    font-size: 20px;
+    // border: 1px solid red;
+    cursor: pointer;
+    background-image: url('/static/detail/FHSY.png');
+    background-size: 100% 100%;
 
 
 }
diff --git a/vite.config.js b/vite.config.js
index 8d003bd..7341b5a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,8 @@ import postCssPxToRem from 'postcss-pxtorem'
 export default defineConfig({
   plugins: [vue()],
   server: {				// ← ← ← ← ← ←
-    host: '0.0.0.0'	// ← 新增内容 ←
+    host: '0.0.0.0',	// ← 新增内容 ←
+    port:"8888"
   },
   resolve: {
     //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'