Merge branch 'tjj2' of http://61.161.152.110:10101/r/electronic-map into mw2

src/views/NewPages/alarm-center-1.vue

@@ -112,6 +112,35 @@
       custom-class="modal"
       :close-on-click-modal="false"
     >
+    <div class="searchForm">
+       <el-select
+        @change="searchTime(selectValue)"
+        class="inputs"
+        v-model="selectValue"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in timeoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <div class="choose">
+        <button class="btn"
+          @click="switchChange(60)"
+        >
+          等间隔
+        </button>
+        <button class="btn"
+          @click="switchChange(0)"
+        >
+          原始数据
+        </button>
+      </div>
+    </div>
+     
       <multiple-y-line-chart-normal
         height="500px"
         :list="Analysis"
@@ -125,15 +154,19 @@
 <script>
 import Panel3 from "../../components/coms/panel/panel3.vue";
 import Table3 from "../../components/coms/table/table3.vue";
-import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
+import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
 export default {
   components: { Panel3, Table3, MultipleYLineChartNormal },
   data() {
     return {
-      dialogTitle:"",
+      dialogTitle: "",
       dialogVisible: false,
+      switchFlag: false,
+      chooseTime: [],
       wpvalue: "",
       wpid: "",
+      wtId:"",
+      descName:"",
       AnalysisName: "",
       AnalysisUnit: "",
       Analysis: [
@@ -159,6 +192,33 @@ export default {
           position: "right",
         },
       ],
+      selectValue: "60",
+      timeoptions: [
+        {
+          value: "60",
+          label: "一分钟",
+        },
+        {
+          value: "300",
+          label: "五分钟",
+        },
+        {
+          value: "600",
+          label: "十分钟",
+        },
+        {
+          value: "1800",
+          label: "三十分钟",
+        },
+        {
+          value: "3600",
+          label: "一小时",
+        },
+        {
+          value: "86400",
+          label: "一天",
+        },
+      ],
       wpoptions: "",
       options: [],
       cascaderOptions: [],
@@ -263,23 +323,43 @@ export default {
     //对比
     showChart(column) {
       let that = this;
-      that.dialogTitle =  column.column.name
+      that.dialogTitle = column.column.name;
+      that.wtId = column.row.name;
+      that.descName = column.column.name;
       // console.log('column:',column)
       // console.log('name:',column.column.name)
       // console.log('wtid:',column.row.name)
       // console.log('starttime:',new Date(that.startdate).getTime())
       // console.log('endtime:',new Date(that.enddate).getTime())
       that.dialogVisible = true;
+      that.requestDetailData(
+        that.wpvalue,
+        that.startdate,
+        that.enddate,
+        0,
+        column.row.name,
+        column.column.name
+      );
+    },
+    requestDetailData(station, startTs, endTs, interval, wtId, name) {
+      let that = this;
       that.API.requestData({
         method: "GET",
         subUrl: "/analysis/detail",
         data: {
-          station: that.wpvalue,
-          startTs: new Date(that.startdate).getTime(),
-          endTs: new Date(that.enddate).getTime(),
-          interval: 360,
-          wtId: column.row.name,
-          name: column.column.name,
+          // station: that.wpvalue,
+          // startTs: new Date(that.startdate).getTime(),
+          // endTs: new Date(that.enddate).getTime(),
+          // // interval: 360,
+          // interval:1,
+          // wtId: column.row.name,
+          // name: column.column.name,
+          station: station,
+          startTs: new Date(startTs).getTime(),
+          endTs: new Date(endTs).getTime(),
+          interval: interval,
+          wtId: wtId,
+          name: name,
         },
         success(res) {
           console.log("resAnalysis:", res);
@@ -302,33 +382,47 @@ export default {
             let aList1 = [
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
             ];
-            aKey1.forEach((keyEle, keyIndex) => {
-              res.data.forEach((rEle) => {
-                rEle.data.forEach((tEle) => {
-                  aList1[keyIndex].title = res.data[0].name
-                  aList1[keyIndex].value.push({
-                    text: new Date(tEle.ts).formatDate("hh:mm"),
-                    value: tEle[keyEle],
-                  });
-                });
-              });
-            });
+                      aKey1.forEach((keyEle,keyIndex)=>{
+            // console.log('keyindex:',res.data[keyIndex]);
+            aList1[keyIndex].title = res.data[keyIndex].name;
+            res.data[keyIndex].data.forEach((rEle)=>{
+              aList1[keyIndex].value.push({
+                text:new Date(rEle.ts).formatDate("hh:mm"),
+                value:rEle.doubleValue
+              })
+            })
+          })
+            // aKey1.forEach((keyEle, keyIndex) => {
+            //   res.data.forEach((rEle) => {
+            //     rEle.data.forEach((tEle) => {
+            //       alist1[keyIndex].yAxisIndex = keyIndex;
+            //       aList1[keyIndex].title = res.data[0].name;
+            //       aList1[keyIndex].value.push({
+            //         text: new Date(tEle.ts).formatDate("hh:mm"),
+            //         value: tEle[keyEle],
+            //       });
+            //     });
+            //   });
+            // });
             that.Analysis = aList1;
             console.log("that.Analysis1:", that.Analysis);
           } else if (res.data.length == 2) {
             let aKey2 = ["doubleValue", "doubleValue"];
             let aList2 = [
               {
-                title: "",
+               title: "", 
+              //  yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
@@ -359,17 +453,34 @@ export default {
             });
             that.AnalysisYAxises = yaxises1;
             console.log("AnalysisYAxises:", that.AnalysisYAxises);
-            aKey2.forEach((keyEle, keyIndex) => {
-              res.data.forEach((rEle) => {
-                aList2[keyIndex].title=res.data[keyIndex].name
-                rEle.data.forEach((tEle) => {
-                  aList2[keyIndex].value.push({
-                    text: new Date(tEle.ts).formatDate("hh:mm"),
-                    value: tEle[keyEle],
-                  });
-                });
-              });
-            });
+                    aKey2.forEach((keyEle,keyIndex)=>{
+            // console.log('keyindex:',res.data[keyIndex]);
+            aList2[keyIndex].title = res.data[keyIndex].name;
+            res.data[keyIndex].data.forEach((rEle)=>{
+              aList2[keyIndex].value.push({
+                text:new Date(rEle.ts).formatDate("hh:mm"),
+                value:rEle.doubleValue
+              })
+            })
+          })
+            // res.data.forEach((rEle,rIndex)=>{
+            //   console.log('rele:',rEle)
+            // })
+            // aKey2.forEach((keyEle, keyIndex) => {
+            //   res.data.forEach((rEle) => {
+            //     // alist2[keyIndex].yAxisIndex = keyIndex;
+            //     aList2[keyIndex].title = res.data[keyIndex].name;
+            //     rEle.data.forEach((tEle,tIndex) => {
+            //         console.log('res.data[keyIndex].data[tIndex].doubleValue2:',res.data)
+            //       aList2[keyIndex].value.push({
+            //         text: new Date(tEle.ts).formatDate("hh:mm"),
+            //         // value: tEle[keyEle],
+            //         // value:res.data[keyIndex].data[tIndex].doubleValue
+                  
+            //       });
+            //     });
+            //   });
+            // });
 
             that.Analysis = aList2;
             console.log("that.Analysis2:", that.Analysis);
@@ -383,21 +494,25 @@ export default {
             let aList4 = [
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
               {
                 title: "",
+                // yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
@@ -428,23 +543,92 @@ export default {
             });
             that.AnalysisYAxises = yaxises2;
             console.log("AnalysisYAxises:", that.AnalysisYAxises);
-            aKey4.forEach((keyEle, keyIndex) => {
-              res.data.forEach((rEle) => {
-                aList4[keyIndex].title = res.data[keyIndex].name
-                rEle.data.forEach((tEle) => {
-                  aList4[keyIndex].value.push({
-                    text: new Date(tEle.ts).formatDate("hh:mm"),
-                    value: tEle[keyEle],
-                  });
-                });
-              });
-            });
+          aKey4.forEach((keyEle,keyIndex)=>{
+            // console.log('keyindex:',res.data[keyIndex]);
+            aList4[keyIndex].title = res.data[keyIndex].name;
+            res.data[keyIndex].data.forEach((rEle)=>{
+              aList4[keyIndex].value.push({
+                text:new Date(rEle.ts).formatDate("hh:mm"),
+                value:rEle.doubleValue
+              })
+            })
+          })
+            // aKey4.forEach((keyEle, keyIndex) => {
+            //   res.data.forEach((rEle) => {
+            //     // aList4[keyIndex].yAxisIndex = keyIndex;
+            //     aList4[keyIndex].title = res.data[keyIndex].name;
+            //     rEle.data.forEach((tEle,tIndex) => {
+            //         console.log('res.data[keyIndex].data[tIndex].doubleValue4:',res.data)
+            //       aList4[keyIndex].value.push({
+            //         text: new Date(tEle.ts).formatDate("hh:mm"),
+            //         // value: tEle[keyEle],
+            //         // value:res.data[keyIndex].data[tIndex].doubleValue
+            //       });
+            //     });
+            //   });
+            // });
             that.Analysis = aList4;
             console.log("that.Analysis4:", that.Analysis);
+          }else if (res.data.length == 0) {
+             that.dialogVisible = false;
+                that.BASE.showMsg({
+          type: "warning",
+          msg: "暂无数据",
+        });
           }
+
         },
       });
     },
+    //切换数据类型
+    switchChange(interval) {
+      if(interval == 0){
+        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,0,this.wtId,this.descName)
+      }
+      else if(interval == 60){
+        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,60,this.wtId,this.descName)
+      }
+      // this.switchFlag = !this.switchFlag;
+      // this.selectValue = "60";
+      // this.searchTime();
+      // const loading = this.$loading({
+      //   lock: true,
+      //   text: "数据加载中",
+      //   spinner: "el-icon-loading",
+      //   background: "rgba(0, 0, 0, 0.7)",
+      // });
+      // setTimeout(() => {
+      //   loading.close();
+      // }, 1000);
+    },
+    searchTime(values) {
+      console.log("values:", values);
+      this.requestDetailData(this.wpvalue,this.startdate,this.enddate,values,this.wtId,this.descName)
+      // let times = [];
+      // this.chooseTime.forEach((item) => {
+      //   times.push(dayjs(item).valueOf());
+      // });
+      // times.length > 0
+      //   ? this.switchFlag
+      //     ? this.$emit("original-data", times)
+      //     : this.$emit("search-data", times, Number(this.selectValue))
+      //   : this.$message({
+      //       showClose: true,
+      //       message: "请选择查询日期",
+      //       center: true,
+      //       type: "error",
+      //     });
+      // if (values) {
+      //     this.$message({
+      //         showClose: true,
+      //         center: true,
+      //         message: '下载中'
+      //     });
+      //     setTimeout(() => {
+      //         this.export()
+      //     }, 2000)
+      // }
+    },
     tabSelect(tab) {},
 
     async search() {
@@ -617,5 +801,13 @@ export default {
       }
     }
   }
+  .searchForm{
+    display: flex;
+    margin-left: 36px;
+    .inputs{
+      width: 15%;
+    margin-right: 18px;
+    }
+  }
 }
 </style>

src/views/NewPages/multiple-y-line-chart-normal.vue

@@ -0,0 +1,484 @@
+<template>
+    <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+    name: "multiple-y-line-chart-normal",
+    componentName: "multiple-y-line-chart-normal",
+    props: {
+        width: {
+            type: String,
+            default: "100%",
+        },
+        height: {
+            type: String,
+            default: "13.889vh",
+        },
+        // 数据
+        list: {
+            type: Array,
+            default: () => [
+                {
+                    title: "机舱震动x方向",
+                    yAxisIndex: 0,
+                    value: [
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
+                    ],
+                },
+                {
+                    title: "机舱震动y方向",
+                    yAxisIndex: 1,
+                    value: [
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
+                    ],
+                },
+                {
+                    title: "机舱震动最大偏移值",
+                    yAxisIndex: 2,
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
+                    ],
+                },
+                {
+                    title: "风速1",
+                    yAxisIndex: 3,
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                    ],
+                },
+                {
+                    title: "风速2",
+                    yAxisIndex: 4,
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+        showLegend: {
+            type: Boolean,
+            default: false,
+        },
+        // 轴
+        yAxises: {
+            type: Array,
+            default: () => [
+                {
+                    name: '机舱震动x方向',
+                    min: -0.01,
+                    max: 0,
+                    unit: "",
+                    position: "left",
+                },
+                {
+                    name: '机舱震动y方向',
+                    min: -0.01,
+                    max: 0,
+                    unit: "",
+                    position: "right",
+                },
+                {
+                    name: '机舱震动最大偏移值',
+                    min: 0,
+                    max: 1,
+                    unit: "",
+                    position: "left",
+                },
+                {
+                    name: '风速1',
+                    min: 0,
+                    max: 10,
+                    unit: "",
+                    position: "right",
+                },
+                {
+                    name: '风速2',
+                    min: 0,
+                    max: 10,
+                    unit: "",
+                    position: "left",
+                },
+            ],
+        },
+    },
+    data() {
+        return {
+            id: "",
+            chart: null,
+            color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
+        
+        };
+    },
+    computed: {
+        legend() {
+            return this.list.map((t) => {
+                return t.title;
+            });
+        },
+        xdata() {
+            console.log('this.list[0].value:',this.list)
+            if(this.list.length > 1){
+                this.list[1].value.forEach((lEle,lIndex)=>{
+                    console.log( this.list[1].value.indexOf(this.list[1].value[lIndex].text == "00:00") )
+                })
+                  return this.list[1]?.value.map((t) => {
+                return t.text;
+            });
+            }else if(this.list.length == 1){
+    return this.list[0]?.value.map((t) => {
+                return t.text;
+            });
+            }
+        
+        },
+        yAxis() {
+            let result = [];
+            let p = {left: 0, right: 0};
+            this.yAxises.forEach((item, index) => {
+                console.log('yitem:',item)
+                result.push({
+                    type: "value",
+                    name: `${item.name}${item.unit}`,
+                    nameLocation: p[item.position] % 2 == 0 ? "end" : "start",
+                    nameGap: 10,
+                    min: item.min,
+                    max: item.max,
+                    position: item.position,
+                    offset: p[item.position] * 50,
+                    axisLabel: {
+                        formatter: "{value}",
+                        fontSize: 12,
+                    },
+                    //分格线
+                    splitLine: {
+                        lineStyle: {
+                            color: partten.getColor("gray"),
+                            type: "dashed",
+                        },
+                    },
+                    axisLine: {
+                      show: true,
+                    },
+                    axisTick: {
+                      show: true
+                    }
+                });
+                p[item.position]++;
+            });
+console.log('yResult:',result)
+            return result;
+            
+        },
+        series() {
+            let result = [];
+           console.log('list:',this.list)
+            this.list.forEach((value, index) => {
+                console.log('seriesValue:',value)
+                console.log('seriesIndex:',index)
+                result.push({
+                    name: value.title,
+                    type: "line",
+                    smooth: true,
+                    zlevel: index,
+                    lineStyle: {
+                        normal: {
+                            color: this.color[index],
+                            width: 1,
+                        },
+                    },
+                    showSymbol: false,
+                    yAxisIndex: value.yAxisIndex,
+                    data: value.value.map((t) => {
+                        return t.value;
+                    }),
+                });
+            });
+
+            return result;
+        },
+    },
+    methods: {
+        resize() {},
+        initChart() {
+            const chart = echarts.init(this.$el);
+
+            let option = this.option();
+            chart.clear();
+          
+            chart.setOption(option);
+              console.log('111111111111111111111',option);
+
+            this.resize = function() {
+                chart.resize();
+            };
+
+            window.addEventListener("resize", this.resize);
+        },
+        option: function () {
+            return {
+                color: this.color,
+                tooltip: {
+                    trigger: "axis",
+                    backgroundColor: "rgba(0,0,0,0.4)",
+                    borderColor: partten.getColor("gray"),
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                },
+                legend: {
+                    show: this.showLegend,
+                    data: this.legend,
+                    top: 'top',
+                    icon: "circle",
+                    itemWidth: 6,
+                    inactiveColor: partten.getColor("gray"),
+                    textStyle: {
+                        color: partten.getColor("grayl"),
+                        fontSize: 12,
+                    },
+                },
+                grid: {
+                    top: 27,
+                    left: 16,
+                    right: 16,
+                    bottom: 0,
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        axisLabel: {
+                            interval: (Number((this.xdata.length / 8).toFixed(0)) > 2) ? Number((this.xdata.length / 8).toFixed(0)) : 0,
+                                showMinLabel: true,
+                                showMaxLabel: true,
+                            formatter: "{value}",
+                            fontSize: 12,
+                            textStyle: {
+                                color: partten.getColor("gray"),
+                            },
+                        },
+                        data: this.xdata,
+                    },
+                ],
+                yAxis: this.yAxis,
+                series: this.series,
+            };
+        },
+        reload: function () {
+            const chart = echarts.getInstanceByDom(this.$el);
+            chart.clear();
+            let option = this.option();
+            console.log('111111111111111111111',option);
+            chart.setOption(option);
+        },
+    },
+    created() {
+        this.id = "pie-chart-" + util.newGUID();
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.initChart();
+        });
+    },
+    updated() {
+        this.$nextTick(() => {
+            this.initChart();
+        });
+    },
+    unmounted() {
+        window.removeEventListener("resize", this.resize);
+    },
+};
+</script>
+
+<style lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+</style>