1.预警分析二级功能；2.组件复制后图表左移；

src/api/axios.js

@@ -84,13 +84,13 @@ export function requestData(options) {
         // window.location.reload();
         // window.__STATICVUE__.$router.replace('/login');
 
-      } else if (response.data.code === 200) { // 请求成功 code
+      } else if (response.data.code === 200 ||response.data.length>0) { // 请求成功 code
 
         options.success && options.success(response.data);
         resolve(response);
 
       } else { // 其他code
-
+        BASE.closeLoading();
         BASE.showMsg({
           msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
         });

src/components/chart/radar/normal-radar-chart.vue

@@ -24,7 +24,7 @@ export default {
     // 标题
     title: {
       type: Array,
-      default: () => ["标题", "标题"],
+      default: () => ["-", "-"],
     },
     // 值
     value: {

src/components/chart/radar/radar-chart.vue

@@ -128,7 +128,7 @@ export default {
             obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
             return obj;
           },
-          extraCssText: "position: absolute; margin-top:50%;",
+          extraCssText: "position: absolute; margin-top:-20%;",
           // extraCssText: "max-width:140px;position:sticky;top:0;left:0"
         },
         radar: [

src/views/Decision/Decision2Xmdb.vue

@@ -152,7 +152,7 @@
 
 <script>
 import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
-import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import DualPieChart from "./dual-pie-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";

src/views/Decision/dayinfo.vue

@@ -1,271 +1,221 @@
 <template>
-  <div class="health-day-info">
-    <div class="body">
-      <div class="left">
-        <div class="header">
-          <span class="herder-info"> 对标排名分析 </span>
-        </div>
-        <div class="chart-body">
-          <normal-radar-chart
-            :title="['这是title1', '这是title2']"
-            :height="'500px'"
-            :value="chartData"
-          />
-        </div>
-      </div>
-      <div class="left">
-        <div class="header">
-          <span class="herder-info"> 基础指标 </span>
-        </div>
-        <table class="table-form">
-          <tr>
-            <td class="white">指标</td>
-            <td class="white">{{ windNum }}</td>
-            <td class="white">{{ windNum2 }}</td>
-          </tr>
-          <tr v-for="(item,index) in tabs" :key="index">
-            <td class="white">{{ item.name }}</td>
-            <td class="white">{{ item.windData1 }}</td>
-            <td class="white">{{ item.windData2 }}</td>
-          </tr>
-        </table>
-      </div>
-    </div>
-    <div class="body">
-      <div style="width: 100%">
-        <div class="header">
-          <span class="herder-info"> 损失电量分析 </span>
-        </div>
-        <div class="chart-body">
-          <multiple-bar-chart
-            height="240px"
-            :list="analyisDialog"
-            :customerTooltip="true"
-            @tooltip="tooltip"
-            :units="['(万KWh)']"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+	<div class="health-day-info">
+		<div class="body">
+			<div class="left">
+				<div class="header">
+					<span class="herder-info">
+						对标排名分析
+					</span>
+				</div>
+				<div class="chart-body">
+					<normal-radar-chart :height="'500px'" :value="radarValue" :tltle="['windNum','windNum2']"/>
+				</div>
+			</div>
+			<div class="left">
+				<div class="header">
+					<span class="herder-info">
+						基础指标
+					</span>
+				</div>
+				<table class="table-form">
+					<tr>
+						<td class="white">指标</td>
+						<td class="white">{{windNum}}</td>
+						<td class="white">{{windNum2}}</td>
+					</tr>
+					<tr v-for="item in tabs">
+						<td class="white">{{item.name}}</td>
+						<td class="white">{{item.windData1}}</td>
+						<td class="white">{{item.windData2}}</td>
+					</tr>
+				</table>
+			</div>
+
+		</div>
+		<div class="body">
+			<div style="width: 100%;">
+				<div class="header">
+					<span class="herder-info">
+						损失电量分析
+					</span>
+				</div>
+				<div class="chart-body">
+					<multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
+						:units='["(万KWh)"]' />
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
-import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
-export default {
-  components: {
-    NormalRadarChart,
-    MultipleBarChart,
-  },
-  props: {
-    windNum: {
-      type: String,
-      default: "麻黄山24号风机",
-    },
-    windNum2: {
-      type: String,
-      default: "麻黄山2号风机",
-    },
-    radarValue: {
-      type: Array,
-      default: () => [
-        {
-          indicator: [
-            "风能利用率",
-            "故障损失率",
-            "检修损失率",
-            "弃风率",
-            "性能损失率",
-            "受累损失率",
-            "复位及时率",
-            "消缺及时率",
-            "状态转换率",
-          ],
-          data: [
-            {
-              value: [
-                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    tabs: {
-      type: Array,
-      default: () => [
-        {
-          name: "发电量",
-          windData1: 1,
-          windData2: 14,
-        },
-        {
-          name: "故障损失电量",
-          windData1: 2,
-          windData2: 13,
-        },
-        {
-          name: "检修损失电量",
-          windData1: 3,
-          windData2: 12,
-        },
-        {
-          name: "性能未达标损失电量",
-          windData1: 4,
-          windData2: 11,
-        },
-        {
-          name: "受累损失电量",
-          windData1: 5,
-          windData2: 10,
-        },
-        {
-          name: "风能利用率",
-          windData1: 6,
-          windData2: 9,
-        },
-        {
-          name: "故障损失率",
-          windData1: 7,
-          windData2: 8,
-        },
-        {
-          name: "检修损失率",
-          windData1: 8,
-          windData2: 7,
-        },
-        {
-          name: "弃风率",
-          windData1: 9,
-          windData2: 6,
-        },
-        {
-          name: "性能损失率",
-          windData1: 10,
-          windData2: 5,
-        },
-        {
-          name: "受累损失率",
-          windData1: 11,
-          windData2: 4,
-        },
-        {
-          name: "复位及时率",
-          windData1: 12,
-          windData2: 3,
-        },
-        {
-          name: "消缺及时率",
-          windData1: 13,
-          windData2: 2,
-        },
-        {
-          name: "状态转换率",
-          windData1: 14,
-          windData2: 1,
-        },
-      ],
-    },
-    analyisDialog: {
-      type: Array,
-      default: () => [
-        {
-          title: "故障损失电量",
-          yAxisIndex: 0,
-          value: [11, 22],
-        },
-        {
-          title: "检修损失电量",
-          yAxisIndex: 0,
-          value: [11, 22],
-        },
-        {
-          title: "性能损失电量",
-          yAxisIndex: 0,
-          value: [11, 22],
-        },
-        {
-          title: "限电损失电量",
-          yAxisIndex: 0,
-          value: [11, 22],
-        },
-        {
-          title: "受累损失电量",
-          yAxisIndex: 0,
-          value: [11, 22],
-        },
-      ],
-    },
-  },
-  methods: {
-    tooltip(param, callback) {
-      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
+	import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+	export default {
+		components: {
+			NormalRadarChart,
+			MultipleBarChart
+		},
+		props: {
+			windNum: {
+				type: String,
+				default: '麻黄山24号风机',
+			},
+			windNum2: {
+				type: String,
+				default: '麻黄山2号风机',
+			},
+			radarValue: {
+				type: Array,
+				default: () => [{
+					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
+					data: [{
+						value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
+					}],
+				}],
+			},
+			tabs: {
+				type: Array,
+				default: () => [{
+					name: "发电量",
+					windData1: 1,
+					windData2: 14
+				}, {
+					name: "故障损失电量",
+					windData1: 2,
+					windData2: 13
+				}, {
+					name: "检修损失电量",
+					windData1: 3,
+					windData2: 12
+				}, {
+					name: "性能未达标损失电量",
+					windData1: 4,
+					windData2: 11
+				}, {
+					name: "受累损失电量",
+					windData1: 5,
+					windData2: 10
+				}, {
+					name: "风能利用率",
+					windData1: 6,
+					windData2: 9
+				}, {
+					name: "故障损失率",
+					windData1: 7,
+					windData2: 8
+				}, {
+					name: "检修损失率",
+					windData1: 8,
+					windData2: 7
+				}, {
+					name: "弃风率",
+					windData1: 9,
+					windData2: 6
+				}, {
+					name: "性能损失率",
+					windData1: 10,
+					windData2: 5
+				}, {
+					name: "受累损失率",
+					windData1: 11,
+					windData2: 4
+				}, {
+					name: "复位及时率",
+					windData1: 12,
+					windData2: 3
+				}, {
+					name: "消缺及时率",
+					windData1: 13,
+					windData2: 2
+				}, {
+					name: "状态转换率",
+					windData1: 14,
+					windData2: 1
+				}],
+			},
+			analyisDialog: {
+				type: Array,
+				default: () => [{
+					title: "故障损失电量",
+					yAxisIndex: 0,
+					value: [11, 22]
+				}, {
+					title: "检修损失电量",
+					yAxisIndex: 0,
+					value: [11, 22]
+				}, {
+					title: "性能损失电量",
+					yAxisIndex: 0,
+					value: [11, 22]
+				}, {
+					title: "限电损失电量",
+					yAxisIndex: 0,
+					value: [11, 22]
+				}, {
+					title: "受累损失电量",
+					yAxisIndex: 0,
+					value: [11, 22]
+				}]
+			},
+		},
+		methods: {
+			tooltip(param, callback) {
+				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
 
-      var result = param[0].axisValue;
-      param.forEach((value, index) => {
-        result +=
-          "<br />" +
-          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
-          value.seriesName +
-          "：" +
-          value.value;
-      });
-      callback(result);
-      return true;
-    },
-  },
-  mounted() {
-    this.chartData = this.radarValue;
-  },
-  watch: {
-    radarValue(res) {
-      this.chartData = res;
-    },
-  },
-};
+				var result = param[0].axisValue;
+				param.forEach((value, index) => {
+					result += "<br />" +
+						`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
+						value.seriesName + "：" + value.value;
+				});
+				callback(result);
+				return true;
+			},
+		}
+	};
 </script>
 
 <style lang="less">
-.health-day-info {
-  .header {
-    display: flex;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    background: fade(@gray, 60);
-    color: @white;
+	.health-day-info {
+		.header {
+			display: flex;
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background: fade(@gray, 60);
+			color: @white;
 
-    .herder-info {
-      flex: 1 0 25%;
-      text-align: center;
-      font-size: @fontsize-s;
+			.herder-info {
+				flex: 1 0 25%;
+				text-align: center;
+				font-size: @fontsize-s;
 
-      &:last-child {
-        flex: 1 0 50%;
-      }
-    }
-  }
+				&:last-child {
+					flex: 1 0 50%;
+				}
+			}
+		}
 
-  .body {
-    display: flex;
+		.body {
+			display: flex;
 
-    .left {
-      flex: 0 0 50%;
+			.left {
+				flex: 0 0 50%;
 
-      display: flex;
-      flex-direction: column;
+				display: flex;
+				flex-direction: column;
 
-      .chart-body {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-      }
-    }
+				.chart-body {
+					flex-grow: 1;
+					display: flex;
+					align-items: center;
+				}
+			}
 
-    .right {
-      flex: 0 0 50%;
-    }
-  }
-}
+			.right {
+				flex: 0 0 50%;
+			}
+		}
+	}
 </style>

src/views/Decision/dual-pie-chart.vue

@@ -0,0 +1,233 @@
+<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: "dsah-pie",
+  componentName: "dsah-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    // 内部饼图数据
+    innerData: {
+      type: Array,
+      default: () => [
+        {
+          value: 700,
+          unit: "个",
+          name: "行业大类1",
+        },
+        {
+          value: 679,
+          unit: "个",
+          name: "行业大类2",
+        },
+        {
+          value: 1548,
+          unit: "个",
+          name: "行业大类3",
+        },
+      ],
+    },
+    // 外部饼图数据
+    outerData: {
+      type: Array,
+      default: () => [
+        {
+          value: 310,
+          unit: "个",
+          name: "邮件营销",
+        },
+        {
+          value: 234,
+          unit: "个",
+          name: "联盟广告",
+        },
+        {
+          value: 335,
+          unit: "个",
+          name: "视频广告",
+        },
+        {
+          value: 548,
+          unit: "个",
+          name: "百度",
+        },
+        {
+          value: 351,
+          unit: "个",
+          name: "谷歌",
+        },
+      ],
+    },
+    // 颜色
+    color: {
+      type: String,
+      default: "green",
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let that = this;
+      let legend1 = this.innerData.map((v) => v.name);
+      let legend2 = this.outerData.map((v) => v.name);
+      let legendData = [...legend1, ...legend2];
+
+      let option = {
+        color: ["#1893ce", "#edbf00", "#039178", "#ae4802", "#ea8b00"],
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        grid: {
+          top: 32,
+          left: 60,
+          right: 40,
+          bottom: 24,
+        },
+        legend: {
+          show: this.showLegend,
+          orient: "vertical", //纵向图例
+          right: "16",
+          bottom: 32,
+          itemWidth: 15,
+          itemHeight: 15,
+          formatter: (name) => {
+            if (that.innerData.length) {
+              const item = that.innerData.filter((item) => item.name === name)[0];
+              return `{name|${name}：}{value| ${item.value}}`;
+            }
+          },
+          //icon: 'circle',
+          itemGap: 12, //图例item间距
+          textStyle: {
+            color: partten.getColor("gray"),
+            fontSize: util.vh(14),
+            rich: {
+              name: {
+                color: partten.getColor("gray"),
+                fontSize: 12,
+              },
+              value: {
+                color: partten.getColor("grayl"),
+                fontSize: 12,
+              },
+            },
+          },
+          data: legend1,
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["20%", "50%"],
+            radius: [0, "35%"],
+            itemStyle: {
+              normal: {},
+            },
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.innerData,
+          },
+          {
+            name: "",
+            type: "pie",
+            center: ["20%", "50%"],
+            radius: ["55%", "95%"],
+            data: this.outerData,
+            labelLine: {
+              normal: {
+                // length: 40,
+                // length2: 120,
+                lineStyle: {
+                  color: "#fff",
+                  fontSize: util.vh(14),
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: util.vh(14),
+                borderColor: "#071812",
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  return "{percent|" + params.percent.toFixed(2) + "%}";
+                },
+                padding: [0, 0, 0, 0],
+                rich: {
+                  color: "#ffffff" + "cc",
+                  percent: {
+                    fontSize: util.vh(14),
+                    color: "#ffffff" + "cc",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

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

@@ -54,9 +54,9 @@
               popper-class="search-select"
               :options="cascaderOptions"
               :props="cascaderProps"
-              @change="getCascaderChange"
+              v-model="cascaderSel"
               collapse-tags
-              clearable
+              :clearable="true"
             ></el-cascader>
           </div>
         </div>
@@ -69,10 +69,9 @@
     <panel-3 class="table-panel">
       <table-3 :data="tableData" :height="'85vh'">
         <template v-for="(item, i) in column" :key="i" #[item]="scope">
-          <div class="bar">
+          <div class="bar" @click="showChart(scope)">
             <div
               class="bar-percent"
-              @click="showChart(scope)"
               :style="{
                 width:
                   (scope.data.count &&
@@ -85,10 +84,9 @@
               >{{ scope.data.count && scope.data.count }} 次数</span
             >
           </div>
-          <div class="bar">
+          <div class="bar" @click="showChart(scope)">
             <div
               class="bar-percent"
-              @click="showChart(scope)"
               :style="{
                 width:
                   (scope.data.count &&
@@ -113,8 +111,13 @@
       :close-on-click-modal="false"
     >
       <div class="searchForm">
+        <div class="choose">
+          <button class="btn green">等间隔</button>
+          <!-- <button :class="chooseStatus?'btn green':'btn'" @click="switchChange(1,'original')">原始数据</button> -->
+        </div>
         <el-select
-          @change="searchTime(selectValue)"
+          v-if="!chooseStatus"
+          @change="switchChange(selectValue)"
           class="inputs"
           v-model="selectValue"
           placeholder="请选择"
@@ -127,12 +130,7 @@
           >
           </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"
@@ -147,13 +145,14 @@
 import Panel3 from "../../components/coms/panel/panel3.vue";
 import Table3 from "../../components/coms/table/table3.vue";
 import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
+import BASE from '@tools/basicTool.js';
 export default {
   components: { Panel3, Table3, MultipleYLineChartNormal },
   data() {
     return {
       dialogTitle: "",
+      chooseStatus: false,
       dialogVisible: false,
-      switchFlag: false,
       chooseTime: [],
       wpvalue: "",
       wpid: "",
@@ -302,23 +301,19 @@ export default {
       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,
+        60,
         column.row.name,
         column.column.name
       );
     },
     requestDetailData(station, startTs, endTs, interval, wtId, name) {
       let that = this;
+      BASE.showLoading();
       that.API.requestData({
         method: "GET",
         subUrl: "/analysis/detail",
@@ -331,16 +326,16 @@ export default {
           // wtId: column.row.name,
           // name: column.column.name,
           station: station,
-          startTs: new Date(startTs).getTime(),
-          endTs: new Date(endTs).getTime(),
+          startTs: new Date(new Date(startTs).formatDate("yyyy/MM/dd")).getTime(),
+          endTs: new Date(new Date(endTs).formatDate("yyyy/MM/dd")).getTime(),
           interval: interval,
           wtId: wtId,
           name: name,
         },
         success(res) {
-          console.log("resAnalysis:", res);
-          let anKey = ["doubleValue"];
           if (res.data.length == 1) {
+            that.dialogVisible = true;
+            BASE.closeLoading();
             let yaxises = [
               {
                 name: "",
@@ -353,7 +348,6 @@ export default {
             // yaxises.name = res.data[0].name;
             yaxises.unit = res.data[0].unit;
             that.AnalysisYAxises = yaxises;
-            console.log("AnalysisYAxises:", that.AnalysisYAxises);
             let aKey1 = ["doubleValue"];
             let aList1 = [
               {
@@ -364,7 +358,6 @@ export default {
               },
             ];
             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({
@@ -373,21 +366,10 @@ export default {
                 });
               });
             });
-            // 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) {
+            that.dialogVisible = true;
+            BASE.closeLoading();
             let aKey2 = ["doubleValue", "doubleValue"];
             let aList2 = [
               {
@@ -421,16 +403,12 @@ export default {
             ];
             yaxises1.forEach((aEle, aIndex) => {
               res.data.forEach((rEle) => {
-                //  console.log('rEleName:',rEle.name)
-                //   console.log('rEle.unit:',rEle.unit)
                 // aEle.name = rEle.name;
                 aEle.unit = rEle.unit;
               });
             });
             that.AnalysisYAxises = yaxises1;
-            console.log("AnalysisYAxises:", that.AnalysisYAxises);
             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({
@@ -440,14 +418,12 @@ export default {
               });
             });
             // 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],
@@ -459,8 +435,9 @@ export default {
             // });
 
             that.Analysis = aList2;
-            console.log("that.Analysis2:", that.Analysis);
           } else if (res.data.length == 4) {
+            that.dialogVisible = true;
+            BASE.closeLoading();
             let aKey4 = [
               "doubleValue",
               "doubleValue",
@@ -511,16 +488,12 @@ export default {
             ];
             yaxises2.forEach((aEle, aIndex) => {
               res.data.forEach((rEle) => {
-                //  console.log('rEleName:',rEle.name)
-                //   console.log('rEle.unit:',rEle.unit)
                 // aEle.name = rEle.name;
                 aEle.unit = rEle.unit;
               });
             });
             that.AnalysisYAxises = yaxises2;
-            console.log("AnalysisYAxises:", that.AnalysisYAxises);
             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({
@@ -529,24 +502,10 @@ export default {
                 });
               });
             });
-            // 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;
+            BASE.closeLoading();
             that.BASE.showMsg({
               type: "warning",
               msg: "暂无数据",
@@ -555,79 +514,23 @@ export default {
         },
       });
     },
-    getCascaderChange(res) {
-      this.cascaderSel=res || [];
-    },
     //切换数据类型
-    switchChange(interval) {
-      if (interval == 0) {
-        this.requestDetailData(
-          this.wpvalue,
-          this.startdate,
-          this.enddate,
-          0,
-          this.wtId,
-          this.descName
-        );
-      } else if (interval == 60) {
-        this.requestDetailData(
+    switchChange(interval,status) {
+      if(status === 'interval') {
+        this.chooseStatus = false
+        this.selectValue = '60'
+      }else if(status === 'original'){
+        this.chooseStatus = true
+      }
+      this.requestDetailData(
           this.wpvalue,
           this.startdate,
           this.enddate,
-          60,
+          interval,
           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() {
       const { data } = await this.API.requestData({
@@ -677,7 +580,6 @@ export default {
       });
       ////////
       const resData = data.data;
-      // console.log("resData:", resData);
       // const resData =this.resdata;
       const column = this.columnObj;
       let dataAll = []; // 总数据集合
@@ -701,11 +603,8 @@ export default {
         });
         dataAll.push(obj);
       });
-      //  console.log('wpid:',this.wpid)
       this.tableData.column = column;
-      // console.log('column:',column)
       this.tableData.data = dataAll;
-      // console.log('dataAll:',dataAll)
       ///////////////////// 获取规则list
       const map = {};
       var windNum = [];
@@ -764,7 +663,6 @@ export default {
           root[f].fobj = fobj;
         }
       }
-      // console.log("cascaderOptions:", cascaderOptions);
       this.cascaderOptions = cascaderOptions;
     },
   },
@@ -802,6 +700,7 @@ export default {
   .searchForm {
     display: flex;
     margin-left: 36px;
+    flex-direction: row-reverse;
     .inputs {
       width: 15%;
       margin-right: 18px;

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="chart" :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
@@ -8,477 +8,476 @@ 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%",
+  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,
+            },
+          ],
         },
-        height: {
-            type: String,
-            default: "13.889vh",
+        {
+          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,
+            },
+          ],
         },
-        // 数据
-        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,
-                        },
-                    ],
-                },
-            ],
+        {
+          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,
+            },
+          ],
         },
-        showLegend: {
-            type: Boolean,
-            default: false,
+        {
+          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,
+            },
+          ],
         },
-        // 轴
-        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",
-                },
-            ],
+        {
+          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,
+            },
+          ],
         },
+      ],
     },
-    data() {
-        return {
-            id: "",
-            chart: null,
-            color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
-        
-        };
+    showLegend: {
+      type: Boolean,
+      default: false,
     },
-    computed: {
-        legend() {
-            return this.list.map((t) => {
-                return t.title;
-            });
+    // 轴
+    yAxises: {
+      type: Array,
+      default: () => [
+        {
+          name: "机舱震动x方向",
+          min: -0.01,
+          max: 0,
+          unit: "",
+          position: "left",
         },
-        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;
-            });
-            }
-        
+        {
+          name: "机舱震动y方向",
+          min: -0.01,
+          max: 0,
+          unit: "",
+          position: "right",
         },
-        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;
-            
+        {
+          name: "机舱震动最大偏移值",
+          min: 0,
+          max: 1,
+          unit: "",
+          position: "left",
         },
-        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;
+        {
+          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;
     },
-    methods: {
-        resize() {},
-        initChart() {
-            const chart = echarts.init(this.$el);
+    series() {
+      let result = [];
+      console.log("list:", this.list);
+      this.list.forEach((value, 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);
+      let option = this.option();
+      chart.clear();
 
-            this.resize = function() {
-                chart.resize();
-            };
+      chart.setOption(option);
+      this.resize = function () {
+        chart.resize();
+      };
 
-            window.addEventListener("resize", this.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,
+          },
         },
-        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,
-            };
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          top: "top",
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
         },
-        reload: function () {
-            const chart = echarts.getInstanceByDom(this.$el);
-            chart.clear();
-            let option = this.option();
-            console.log('111111111111111111111',option);
-            chart.setOption(option);
+        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,
+      };
     },
-    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);
+    reload: function () {
+      const chart = echarts.getInstanceByDom(this.$el);
+      chart.clear();
+      let option = this.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;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
 }
 </style>

src/views/WindSite/components/generalappearance/mch.vue

@@ -1475,7 +1475,6 @@
 		methods: {
 			// 渲染每个机箱的表格参数
 			renderData(data = {}) {
-				
 				let fmtNumber=function(num){
 					return parseInt(num)
 				};
@@ -1499,7 +1498,6 @@
 						// 渲染电柜参数数据
 						const spKey = fmtNumber(key.replace(/[^0-9]/gi, ""));
 						const dgDom = $("#_x23_" + spKey).find("text");
-						
 						if (dgDom && key.indexOf("dl") !== -1) {
 							dgDom.eq(0).html(item);
 						} else if (dgDom && key.indexOf("dy") !== -1) {