From f23a10c0787525d001ce8e5722a2353ae052cb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=90=8C?= <525441437@qq.com>
Date: Tue, 5 Mar 2024 16:26:05 +0800
Subject: [PATCH] 1

---
 src/assets/js/charts.js             | 368 ++++++++++++++++++++++++++++
 src/components/setParamsControl.vue |   4 +-
 src/views/page/dataAnalysis.vue     |  48 ++--
 3 files changed, 404 insertions(+), 16 deletions(-)

diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js
index 2304cb3..e25eebd 100644
--- a/src/assets/js/charts.js
+++ b/src/assets/js/charts.js
@@ -369,6 +369,374 @@ export function realTimeLine(id, data,pageId) {
         myChart.resize();
     });
 }
+export function realTimeLine1(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: [] })
+            } 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', // 设置翻页按钮颜色
+        },
+        dataZoom: [
+            {
+                show: true,
+                realtime: true,
+                start:0,
+                end: 100,
+                xAxisIndex: [0, 1],
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            {
+                type: 'inside',
+                realtime: true,
+                start: 0,
+                height:20,
+                end:100,
+                xAxisIndex: [0, 1],
+                backgroundColor: 'rgba(11, 28, 42, 0.4)',
+                fillerColor: 'rgba(2, 148, 226, 1)',
+                textStyle: {
+                    color: '#fff'
+                }
+            }
+        ],
+        grid: {
+            left: "3%",
+            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);
    
diff --git a/src/components/setParamsControl.vue b/src/components/setParamsControl.vue
index 5a175fb..2e0f3c0 100644
--- a/src/components/setParamsControl.vue
+++ b/src/components/setParamsControl.vue
@@ -286,7 +286,7 @@ export default {
             this.routerList.push(
               {
                 id: el.id, sort: el.sort,
-                name: "日光温室特殊参数(丽水项目)",
+                name: "日光温室特殊参数(山地型温室)",
                 router: "skylight",
                 list: [
                   { name: "顶卷膜1", status: -1, router: "skylight", index: 1 },
@@ -297,7 +297,7 @@ export default {
               },
               {
                 id: el.id, sort: el.sort,
-                name: "风机(丽水项目)",
+                name: "风机(山地型温室)",
                 router: "fan",
                 list: [
                   { name: "风机1", status: -1, router: "fan", index: 1 },
diff --git a/src/views/page/dataAnalysis.vue b/src/views/page/dataAnalysis.vue
index 7918b42..026f545 100644
--- a/src/views/page/dataAnalysis.vue
+++ b/src/views/page/dataAnalysis.vue
@@ -6,18 +6,28 @@
                 <img src="../../assets/image/analysis.png" alt="" />
                 数据分析
             </div>
-            <div class="search-flex">
-
-                <div class="search-right">
+            <div class="flex-view">
+                <div class="input-btn">
+                    <span>快速查询</span>
+                    <div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
+                        今日
+                    </div>
+                    <div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
+                        昨日
+                    </div>
+                    <div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
+                        自定义
+                    </div>
+                </div>
+                <div class="input-sel-time">
                     <span>时间段</span>
-                    <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至"
-                        start-placeholder="开始时间" end-placeholder="结束时间">
+                    <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+                        end-placeholder="结束时间">
                     </el-date-picker>
-                    <div class="input-btn">
-                        <div class="btn blue" @click="search">
-                            查询
-                        </div>
-
+                </div>
+                <div class="input-btn ">
+                    <div class="btn blue" @click="search">
+                        查询
                     </div>
                 </div>
             </div>
@@ -30,16 +40,22 @@
 </template>
 
 <script>
-import { realTimeLine } from '@/assets/js/charts'
+import { realTimeLine1 } from '@/assets/js/charts'
 export default {
     data() {
         return {
+            active: 0,
             value1: '',
             indexs: 1,
             dateRange: [],
         }
     },
     watch:{
+        active(newVal, oldVal) {
+            if (newVal != 2) {
+                this.dataInit()
+            }
+        },
         $route(newVal, oldVal) {
             const that = this;
             const store = this.$store.state
@@ -65,7 +81,7 @@ export default {
             return formattedTime
         },
         search() {
-            this.getData()
+            this.dataInit()
         },
         timeInit() {
             const start = new Date()
@@ -74,7 +90,11 @@ export default {
             this.dateRange = [start, end]
         },
         dataInit() {
-            this.timeInit()
+            if (this.active == 0) {
+                this.timeInit()
+            } else if (this.active == 1) {
+                this.yesterdayTime()
+            }
             setTimeout(() => {
                 this.getData()
             }, 0);
@@ -105,7 +125,7 @@ export default {
                             })
                         };
                     });
-                    realTimeLine('realTime-line', chartsData)
+                    realTimeLine1('realTime-line', chartsData)
                 } else {
                     this.$message.error(res.data.msg);
                 }