Merge pull request '金山吕港草莓大数据修改' (#242) from pc-master into portal

Reviewed-on: #242

src/assets/js/charts.js

@@ -736,6 +736,350 @@ export function realTimeLine1(id, data,pageId) {
         myChart.resize();
     });
 }
+// 大数据页面金山吕港草莓显示
+export function realTimeLine2(id, data,pageId) {
+    var chartDom = document.getElementById(id);
+    var myChart = echarts.init(chartDom);
+    chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
+    var Xdata = []
+    var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
+        'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
+    var colorList = [new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(0, 187, 136, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(0, 187, 136, 0)",
+            },
+        ],
+        false
+    ),
+    new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(252, 125, 106, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(252, 125, 106, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(252, 223, 39, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(252, 223, 39, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(68, 214, 232, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(68, 214, 232, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(69, 224, 155, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(69, 224, 155, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(82, 188, 255, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(82, 188, 255, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(214, 162, 255, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(214, 162, 255, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(255, 192, 111, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(255, 192, 111, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(255, 156, 154, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(255, 156, 154, 0)",
+            },
+        ],
+        false
+    ), new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+            {
+                offset: 0,
+                color: "rgba(255, 156, 154, 0.50)",
+            },
+            {
+                offset: 0.8,
+                color: "rgba(255, 156, 154, 0)",
+            },
+        ],
+        false
+    ),
+
+    ]
+    // var equipmentList=store.state.equipmentSelList
+    var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList'))
+
+    var list = []
+    var selList={}
+    var selTure=false
+    var dataList = []
+    equipmentList.forEach(obj => {
+        if (obj.deviceId == pageId) {
+          // 在找到的对象中添加参数
+          if(obj.selList){
+            selList = obj.selList;
+            selTure=true
+          }else{
+            selList ={}
+            selTure=false
+          }
+          
+        }
+      });
+    data.forEach((el, index) => {
+        Xdata.push(el.time)
+
+        el.value.forEach((el1, index1) => {
+            var containsIndex = dataList.findIndex(function (item) {
+                return item.name === el1.name;
+            });
+            if (containsIndex == -1) {
+                dataList.push({ name: el1.name, value: [el1.value] })
+            } else {
+                dataList[containsIndex].value.push(el1.value)
+            }
+        })
+
+
+    })
+    if(!selTure){
+        dataList.forEach((el, index) => {
+            selList[el.name]=(index==0?true:false)
+        })
+    }
+   
+    dataList.forEach((el, index) => {
+        list.push({
+            name: el.name,
+            data: el.value,
+            type: "line",
+            symbol: "circle",
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+                normal: {
+                    width: 2,
+                },
+            },
+            areaStyle: {
+                normal: {
+                    color: colorList[index],
+                },
+            },
+            itemStyle: {
+                normal: {
+                    color: colorList1[index],
+                    borderColor: colorList1[index],
+                    borderWidth: 1,
+                },
+            },
+        })
+    })
+    var option = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#57617B",
+                },
+            },
+            extraCssText: 'z-index: 9999;', // 设置 z-index
+        },
+        legend: {
+            icon: "circle",
+            itemWidth: 10,
+            itemHeight: 10,
+            type: 'scroll', // 启用翻页
+            data: list,
+            selected: selList,
+            right: "center",
+            top:10,
+            itemGap: 10,
+            width:'90%',
+            height:20,
+            textStyle: {
+                fontSize: 12,
+                color: "#fff",
+                lineHeight: 30,
+            },
+            pageTextStyle: {
+                color: '#fff', // 设置翻页文字颜色
+              },
+              pageIconColor: '#fff', // 设置翻页按钮颜色
+        },
+        grid: {
+            left: "8%",
+            right: "10%",
+            bottom: "13%",
+            containLabel: true,
+        },
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+
+                    lineStyle: {
+                        color: "#fff",
+                        type: 'dashed'
+                    },
+                },
+                data: Xdata,
+            },
+
+        ],
+        yAxis: [
+            {
+                type: "value",
+                name: "",
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "#fff",
+                        type: 'dashed'
+                    },
+                },
+                axisLabel: {
+                    margin: 10,
+                    textStyle: {
+                        fontSize: 14,
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(104, 168, 205, 1)",
+                        type: 'dashed'
+                    },
+                },
+            },
+        ],
+        series: list,
+    };
+    option && myChart.setOption(option);
+    myChart.resize();
+
+    myChart.on('legendselectchanged', function (params) {
+        equipmentList.forEach((obj,index) => {
+            if (obj.deviceId== pageId) {
+              // 在找到的对象中添加参数
+              obj.selList=params.selected
+          
+            }
+          });
+          localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList))
+      });
+    window.addEventListener("resize", function () {
+        myChart.resize();
+    });
+}
 export function statusCharts(id, data) {
     var chartDom = document.getElementById(id);
    

src/components/setParams.vue

@@ -127,6 +127,7 @@ export default {
                         }
                     }
             })
+            this.$forceUpdate()
         },
         //去首页
         toHome(index) {

src/views/page/largeScreen.vue

@@ -39,9 +39,9 @@
       </div>
       <div class="content">
         <div class="left" v-show="limitUserId != 5">
-          <div class="weatherStation"></div>
+          <div class="weatherStation" v-show="limitUserId != 12"></div>
 
-          <div class="weather">
+          <div class="weather" v-show="limitUserId != 12">
             <div>
               <marquee behavior="" direction="" scrollamount="3">
                 <div class="item" v-for="(item, index) in weatherDataList" :key="index">
@@ -56,8 +56,9 @@
             </div>
           </div>
 
-          <div class="weather_echart" id="weather_echart" v-show="limitUserId != 11"></div>
+          <div class="weather_echart" id="weather_echart" v-show="limitUserId != 11&&limitUserId != 12"></div>
-
+              <div class="e_title" v-show="limitUserId == 12">实时数据</div>
+    <div class="realTime-line" id="realTime-line"  v-show="limitUserId == 12"></div>
           <div class="environmentData" :class="`environmentData-${limitUserId}`">
             <div class="e_title">温室环境数据</div>
             <div class="detail">
@@ -198,7 +199,7 @@
                 <img class="drag_img" src="../../assets/img/map7.png" alt="" />
                 <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
               </div>
-                 <!-- 镇海欣丰农场 -->
+                 <!-- 金山吕港草莓 -->
                  <div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
                 <img class="drag_img" src="../../assets/img/map8.png" alt="" />
                 <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
@@ -211,7 +212,7 @@
         <div class="right">
           <div class="liveVideo"></div>
 
-          <div class="liveVideo_content">
+          <div class="liveVideo_content" v-show="limitUserId != 12">
             <div class="swiper-container mySwiper_video">
               <div class="swiper-wrapper">
                 <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
@@ -229,6 +230,10 @@
               </div>
             </div>
           </div>
+          <!-- 金山吕港草莓单独显示控制器南图片 -->
+          <div class="liveVideo_content" style="padding:10px;" v-show="limitUserId == 12">
+ <img  style="width: 100%;height: 100%;" :src="imgUrl" alt="">
+          </div>
 
           <div class="deviceState"></div>
 
@@ -414,8 +419,9 @@ import Swiper from "@/assets/js/swiper.min.js";
 import "@/assets/js/swiper.min.css";
 import {
   weather_echart,
-  thisWeekTemperature_echart,
+  thisWeekTemperature_echart
 } from "@/assets/js/echarts";
+import { realTimeLine2 } from '@/assets/js/charts'
 
 import EZUIKit from "ezuikit-js";
 import videojs from "video.js";
@@ -549,6 +555,9 @@ export default {
           close_btn: false,
         },
       ],
+
+      // 金山吕港草莓数据
+        imgUrl: '',
     };
   },
   beforeMount() {
@@ -660,6 +669,24 @@ export default {
             this.get_environmentData(list[0].deviceId);
             this.get_readControl_getState(list[0].deviceId);
             this.getWeatherData(list[0].deviceId);
+            // 金山吕港草莓数据单独显示
+            if(limitUserId == 12){
+                    const store=this.$store.state
+                           var data1 ='2024111816300001'
+              var nowDevice =   store.equipmentList.find(item => item.deviceId == data1);
+                this.imgUrl =nowDevice? nowDevice.hls:null
+          
+                      this.api.getControlFsdata(data1).then(res => {
+                    if (res.data.code == 200) {
+                        var chartsData = res.data.data
+                        realTimeLine2('realTime-line', chartsData, data1)
+                    } else {
+                        // this.$message.error(res.data.msg);
+                    }
+                })
+            }
+        
+
           } else if (limitUserId == 9) {
 
             // 左侧上部气象站charts
@@ -1866,7 +1893,10 @@ export default {
         top: 0.56rem;
         left: 0.66rem;
         z-index: 999;
-
+        .realTime-line{
+          width: 100%;
+           height: calc((100% - 3.5rem) / 2);
+        }
         .weatherStation {
           width: 4rem;
           height: 0.43rem;
@@ -2281,7 +2311,7 @@ export default {
                 height: auto;
                 position: absolute;
                 top: 44%;
-                left: 24%;
+                left:31%;
                 z-index: 99;
                 cursor: pointer;
               }
@@ -2289,8 +2319,8 @@ export default {
                 width: 0.3rem;
                 height: auto;
                 position: absolute;
-                top: 34%;
+                top: 38%;
-                left: 48%;
+                left: 50%;
                 z-index: 99;
                 cursor: pointer;
               }
@@ -2298,8 +2328,8 @@ export default {
                 width: 0.3rem;
                 height: auto;
                 position: absolute;
-                top: 44%;
+                top: 42%;
-                left: 75%;
+                left: 72%;
                 z-index: 99;
                 cursor: pointer;
               }

src/views/page/largeScreen1.vue

@@ -608,15 +608,7 @@
           <div class="map1">
             <div class="drag_box11" ref="drag_box11">
               <img class="drag_img" src="../../assets/img/map7.png" alt="" />
-              <!-- <div class="popBox">
+          
-                <div class="pole_item" style="top:78.5%;left:40.5%;z-index:1;" @click="toHttp">
-                  <div class="p_title">
-                    <img src="../../assets/img/wenshi.png" alt="" />
-                    <span>泵房</span>
-                  </div>
-                  <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                </div>
-              </div> -->
 
               <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                 <template>
@@ -683,16 +675,7 @@
             <div class="drag_box12" ref="drag_box12">
               <img class="drag_img" src="../../assets/img/map8.png" alt="" />
                <div class="popBox">
-                <div class="pole_item" style="top:36.5%;left:22.5%;z-index:1;">
+                <div class="pole_item" style="top:33.5%;left:48.5%;z-index:1;">
-                  <div class="p_title">
-                    <img src="../../assets/img/wenshi.png" alt="" />
-                    <span>控制器南</span>
-                  </div>
-                  <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                </div>
-              </div>
-              <div class="popBox">
-                <div class="pole_item" style="top:26.5%;left:46.5%;z-index:1;">
                   <div class="p_title">
                     <img src="../../assets/img/wenshi.png" alt="" />
                     <span>控制中心</span>
@@ -700,15 +683,79 @@
                   <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                 </div>
               </div>
+                         <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :style="getTopOrLeft12(item.id)" @click="handlerPop(item.id)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>{{ item.greenhouseName }} </span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+                </template>
+
+                <!-- 弹框 -->
+                <template>
+                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
+                    :style="getTopOrLeft12_12(item.id)">
+                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
+                    <div class="p_video">
+                      <img :src="item.greenhouseImage" alt="" />
+                    </div>
+                    <div class="text">{{ item.greenhouseName }}</div>
+                    <div class="line"></div>
+                    <div class="detail">
+                      <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>品种：{{ item.greenhouseVariety }}</span>
+                      </div>
+                      <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>数量：{{ item.greenhouseNums }}株</span>
+                      </div>
+                    </div>
+                    <div class="grow">
+                      <img src="../../assets/img/grow_img.png" alt="" />
+                      <span>生长阶段：</span>
+                      <span>{{ item.growthStageName }}</span>
+                    </div>
+                    <div class="line" style="margin-top: 0.06rem"></div>
+                    <div class="icon_item scroll">
+                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
+                        <img :src="require('../../assets/image/real-time-' +
+                          item1.formula +
+                          '.png')
+                          " alt="" />
+                        <div>
+                          <span>{{ item1.environmentDataId }}</span>
+                          <span>{{
+                            item1.environmentData + getTypeList(item1.formula)
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+              <!-- <div class="popBox">
+                <div class="pole_item" style="top:37.5%;left:29.5%;z-index:1;">
+                  <div class="p_title">
+                    <img src="../../assets/img/wenshi.png" alt="" />
+                    <span>控制器南</span>
+                  </div>
+                  <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                </div>
+              </div>
+             
               <div class="popBox">
-                <div class="pole_item" style="top:32.5%;left:75%;z-index:1;">
+                <div class="pole_item" style="top:37.5%;left:70%;z-index:1;">
                   <div class="p_title">
                     <img src="../../assets/img/wenshi.png" alt="" />
                     <span>控制器北</span>
                   </div>
                   <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
@@ -1355,6 +1402,20 @@ export default {
       } else if (id == 10) {
         return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
       }
+    },
+     getTopOrLeft12(id) {
+      if (id == 1) {
+        return 'top:37.5%;left:29.5%;z-index:10;'
+      } else if (id == 2) {
+        return 'top:37.5%;left:70%;z-index:9;'
+      }
+    },
+    getTopOrLeft12_12(id) {
+      if (id == 1) {
+        return 'top:37.5%;left:26.5%;transform: translate(54%,0);'
+      } else if (id == 2) {
+        return 'top:37.5%;left:67%;transform: translate(54%,0);'
+      }
     },
     getTopOrLeft10(id) {
       if (id == 1) {
@@ -2856,9 +2917,7 @@ export default {
             //   blue 97%,
             //   transparent 99%
             //  );
-            &.drag_box12{
+           
-              top: 13%;
-            }
             .drag_img {
               width: 100%;
               height: auto;
@@ -2916,7 +2975,7 @@ export default {
 
             .pop_content1 {
               width: 3.5rem;
-              height: 4.55rem;
+              height: 4.8rem;
               background: url("../../assets/img/pop_bg.png") center no-repeat;
               background-size: 100% 100%;
               overflow: hidden;