折线图组件修改

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

@@ -649,6 +649,7 @@ export default {
           map[k] = resData[i][k];
         }
       }
+      console.log("map", map);
       // nmap为新的map 整理数据结构
       const nmap = {};
       for (let kv in map) {
@@ -661,6 +662,7 @@ export default {
         }
         nmap[kv] = nchildMap;
       }
+      console.log("nmap", nmap);
       windNum = Object.keys(nmap);
       var cascaderOptions = [];
       var root = {}; // 原始根节点
@@ -700,6 +702,7 @@ export default {
         }
       }
       this.cascaderOptions = cascaderOptions;
+      console.log(123123, cascaderOptions);
     },
     fx() {
       this.startdate = new Date(this.startdate).formatDate("yyyy-MM-dd");

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

@@ -284,12 +284,17 @@ export default {
         },
       ],
     },
+
+    markLineData: {
+      type: Array,
+      defaylt: () => [],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#1DA0D7","#05BB4C","#323E6F", "#EDB32F", "#DB5520"],
+      color: ["#1DA0D7", "#05BB4C", "#323E6F", "#EDB32F", "#DB5520"],
     };
   },
   computed: {
@@ -336,7 +341,10 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : partten.getColor("black"),
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : partten.getColor("black"),
               type: "dashed",
             },
           },
@@ -367,6 +375,26 @@ export default {
           },
           showSymbol: false,
           yAxisIndex: value.yAxisIndex,
+          markLine: this.markLineData
+            ? {
+                name: "",
+                silent: true,
+                label: {
+                  position: "end",
+                  formatter: "",
+                  color: "red",
+                  fontSize: 14,
+                },
+                data: this.markLineData,
+                lineStyle: {
+                  normal: {
+                    type: "dashed",
+                    color: "red",
+                    width: 2,
+                  },
+                },
+              }
+            : {},
           data: value.value.map((t) => {
             if (t.value || t.value === 0) {
               return t.value;
@@ -385,9 +413,8 @@ export default {
   methods: {
     resize() {},
     initChart() {
-		
       const chart = echarts.init(this.$el);
-	
+
       let option = this.option();
       chart.clear();
 
@@ -407,16 +434,20 @@ export default {
       window.addEventListener("resize", this.resize);
     },
     option: function () {
-		let themeName = '';
-		this.$store.state.themeName === "dark" ? themeName = true : themeName = false;
+      let themeName = "";
+      this.$store.state.themeName === "dark"
+        ? (themeName = true)
+        : (themeName = false);
       return {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          triggerOn:this.default?"click":"mousemove",
-          alwaysShowContent:true,
-          backgroundColor: themeName ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
-          borderColor: themeName ? partten.getColor("gray"): "#000",
+          triggerOn: this.default ? "click" : "mousemove",
+          alwaysShowContent: true,
+          backgroundColor: themeName
+            ? "rgba(0,0,0,0.4)"
+            : "rgba(255,255,255,0.5)",
+          borderColor: themeName ? partten.getColor("gray") : "#000",
           textStyle: {
             color: themeName ? "#fff" : "#000",
             fontSize: 12,
@@ -428,9 +459,9 @@ export default {
           top: "top",
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: themeName ? partten.getColor("gray"): "#000",
+          inactiveColor: themeName ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: themeName ? partten.getColor("grayl"): "#000",
+            color: themeName ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -455,7 +486,7 @@ export default {
               formatter: "{value}",
               fontSize: 12,
               textStyle: {
-                color: themeName ? partten.getColor("gray"): "#000",
+                color: themeName ? partten.getColor("gray") : "#000",
               },
             },
             data: this.xdata,

src/views/sampleDatabase/fault/index.vue

@@ -160,8 +160,13 @@
       :close-on-click-modal="false"
       :before-close="onClickDialogClose"
       class="isvisiable"
+      @closed="
+        () => {
+          markLineData = [];
+        }
+      "
     >
-      <Point :data="gzCgdData" :st="st" v-if="gzCgd" />
+      <Point :data="gzCgdData" :st="st" :markLineData="markLineData" v-if="gzCgd" />
     </el-dialog>
     <el-dialog
       :title="'故障样本库' + addDialogTitle"
@@ -330,6 +335,7 @@ export default {
   data() {
     const that = this;
     return {
+      markLineData: [],
       btnText: "导入",
       addDialogTitle: "",
       addDialogShow: false,
@@ -644,20 +650,25 @@ export default {
             widget: row.widget,
           },
           success(res) {
-            if (res.code == 200) {
-              if (res.data.length) {
-                that.gzCgdData = res.data;
-                if (that.category == "0") {
-                  that.st = Date.parse(new Date(row.tableTime.split(" - ")[0]));
-                } else {
-                  that.st = Date.parse(new Date(row.faultTime));
-                }
-                that.gzCgd = true;
+            if (res.data.length) {
+              that.markLineData = [
+                {
+                  xAxis: new Date(row.tableTime.split(" - ")[0]).formatDate(
+                    "yyyy-MM-dd hh:mm"
+                  ),
+                },
+              ];
+              that.gzCgdData = res.data;
+              if (that.category == "0") {
+                that.st = Date.parse(new Date(row.tableTime.split(" - ")[0]));
               } else {
-                that.BASE.showMsg({
-                  msg: "暂无数据",
-                });
+                that.st = Date.parse(new Date(row.faultTime));
               }
+              that.gzCgd = true;
+            } else {
+              that.BASE.showMsg({
+                msg: "暂无数据",
+              });
             }
           },
         });

src/views/sampleDatabase/fault/point.vue

@@ -1,317 +1,386 @@
 <template>
-	<el-row type="flex">
-		<div class="query mg-b-8">
-			<div class="query-items">
-				<div class="query-item">
-					<div class="lable">时间：</div>
-					<div class="search-input">
-						<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
-							end-placeholder="结束日期">
-						</el-date-picker>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">等间隔：</div>
-					<div class="search-input">
-						<el-select v-if="!chooseStatus" @change="switchChange(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>
-				</div>
-				<div class="query-actions">
-					<!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
-					<button class="btn" @click="dbfx">原数据对标</button>
-				</div>
-			</div>
-		</div>
-	</el-row>
-	<el-row :type="'flex'" class="content mg-b-8">
-		<ComTable :data="tableData" :height="'30vh'" v-loading="tableLoading" ref="curRef" element-loading-text="拼命加载中"
-			element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
-	</el-row>
-	<el-row :type="'flex'" class="content" :style="{height:'44vh'}">
-		 <el-col :span="24">
-		 	<multiple-y-line-chart-normal height="45vh" :list="Powertrend" :yAxises="PowertrendYAxises"
-		 		:showLegend="true" />	 
-		 </el-col>
-	</el-row>
+  <el-row type="flex">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">时间：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="time"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">等间隔：</div>
+          <div class="search-input">
+            <el-select
+              v-if="!chooseStatus"
+              @change="switchChange(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>
+        </div>
+        <div class="query-actions">
+          <!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
+          <button class="btn" @click="dbfx">原数据对标</button>
+        </div>
+      </div>
+    </div>
+  </el-row>
+  <el-row :type="'flex'" class="content mg-b-8">
+    <ComTable
+      :data="tableData"
+      :height="'30vh'"
+      v-loading="tableLoading"
+      ref="curRef"
+      element-loading-text="拼命加载中"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    ></ComTable>
+  </el-row>
+  <el-row :type="'flex'" class="content" :style="{ height: '44vh' }">
+    <el-col :span="24">
+      <multiple-y-line-chart-normal
+        height="45vh"
+        :list="Powertrend"
+        :yAxises="PowertrendYAxises"
+        :showLegend="true"
+        :markLineData="markLineData"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-	import ComTable from "@/components/coms/table/table.vue";
-	import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
-	export default {
-		components: {
-			ComTable,
-			MultipleYLineChartNormal
-		},
-		data() {
-			const that = this;
-			return {
-				Powertrend: [{
-					title: "",
-					yAxisIndex: 0, // 使用单位
-					value: [],
-				}, ],
-				PowertrendYAxises: [{
-						name: "",
-						min: 0,
-						max: null,
-						unit: "",
-						position: "left",
-					},
-					{
-						name: "",
-						min: 0,
-						max: 25,
-						unit: "",
-						position: "right",
-					},
-				],
-				selectValue: "60",
-				timeoptions: [
-					{
-						value: "60",
-						label: "一分钟",
-					},
-					{
-						value: "300",
-						label: "五分钟",
-					},
-					{
-						value: "600",
-						label: "十分钟",
-					},
-					{
-						value: "1800",
-						label: "三十分钟",
-					},
-					{
-						value: "3600",
-						label: "一小时",
-					},
-					{
-						value: "86400",
-						label: "一天",
-					},
-				],
-				time: [that.st - (3600 * 1000*24), that.st + (1000*10*60)],
-				point: [],
-				pointdes: [],
+import ComTable from "@/components/coms/table/table.vue";
+import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
+export default {
+  components: {
+    ComTable,
+    MultipleYLineChartNormal,
+  },
+  data() {
+    const that = this;
+    return {
+      Powertrend: [
+        {
+          title: "",
+          yAxisIndex: 0, // 使用单位
+          value: [],
+        },
+      ],
+      PowertrendYAxises: [
+        {
+          name: "",
+          min: 0,
+          max: null,
+          unit: "",
+          position: "left",
+        },
+        {
+          name: "",
+          min: 0,
+          max: 25,
+          unit: "",
+          position: "right",
+        },
+      ],
+      selectValue: "60",
+      timeoptions: [
+        {
+          value: "60",
+          label: "一分钟",
+        },
+        {
+          value: "300",
+          label: "五分钟",
+        },
+        {
+          value: "600",
+          label: "十分钟",
+        },
+        {
+          value: "1800",
+          label: "三十分钟",
+        },
+        {
+          value: "3600",
+          label: "一小时",
+        },
+        {
+          value: "86400",
+          label: "一天",
+        },
+      ],
+      time: [that.st - 3600 * 1000 * 24, that.st + 1000 * 10 * 60],
+      point: [],
+      pointdes: [],
 
-				pageSize: 20,
-				model: [],
-				station: '',
-				windturbinename: "",
-				isvisiable: false,
-				checkLength: 0, //对标分析只能选择5个
-				tableData: {
-					column: [
-						{
-							name: "",
-							field: "check",
-							is_light: false,
-							width: '50px',
-							template: function() {
-								return "<input class='check curCheckBox' type='CheckBox'/>";
-							},
-							click: function(event, data) {
-								let point = data.point,
-									pointdes = data.pointdes;
-								if (event.target.checked == false && that.checkLength <= 5) {
-									that.point.forEach((item, i) => {
-										if (item == point) {
-											that.point.splice(i, 1);
-											that.pointdes.splice(i, 1);
-										}
-									});
-									that.checkLength--;
-								} else if (event.target.checked && that.checkLength < 5) {
-									that.point.push(point);
-									that.pointdes.push(pointdes);
-									that.checkLength++;
-								} else if (that.checkLength == 5) {
-									event.target.checked = false;
-								}
-							},
-						},
-						{
-							name: "序号",
-							field: "index",
-							is_light: false,
-							width: '30px',
-						},
-						{
-							name: "测点名称",
-							field: "point",
-							is_light: false,
-							width: '400px',
-						},
-						{
-							name: "测点描述",
-							field: "pointdes",
-							is_light: false,
-							width: '350px',
-						},
-						{
-							name: "操作",
-							is_light: false,
-							width: '250px',
-							template: () => {
-								return (
-									"<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp"
-								);
-							},
-							click(e, row) {
-								that.onClickOption(e, row);
-							},
-						},
-					],
-					data: [],
-				}
-			};
-		},
-		props: {
-			data: {
-				type: Array
-			},
-			st: {
-				type: String
-			},
-		},
-		methods: {
-			onClickOption(e, row) { // 操作按钮
-				let that = this;
-				if ("config" == e.target.getAttribute("value")) { //原始数据
-					that.requestDetailData([row.point], [row.pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
-						new Date(that.time[1]))], that.selectValue);
-					that.clearDb();
-				}
-			},
-			list(data) {
-				var that = this;
-				that.tableData.data = [];
-				if (data.length) {
-					for (var i = 0; i < data.length; i++) {
-						let obj = {
-							index: i + 1,
-							windturbineid: data[i].windturbineid,
-							widget: data[i].widget,
-							point: data[i].point,
-							pointdes: data[i].pointdes,
-							model: data[i].model,
-							stationcn: data[i].stationcn,
-						};
-						that.tableData.data.push(obj);
-					}
-					that.requestDetailData([data[0].point], [data[0].pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
-						new Date(that.time[1]))], that.selectValue);
-				}
-			},
-			switchChange(interval, status) {
-				if (status === 'interval') {
-					this.chooseStatus = false
-					this.selectValue = '60'
-				} else if (status === 'original') {
-					this.chooseStatus = true
-				}
-			},
-			requestDetailData(point, pointdes, time, interval) {
-				let that = this;
-				let Powertrend = [];
-				let dataPoint = '';
-				pointdes.forEach((ele, index) => {
-					Powertrend.push({
-						title: ele,
-						smooth: true,
-						value: [],
-					})
-				})
-				point.forEach((ele, index) => {
-					dataPoint += ele + ','
-				})
-				dataPoint = dataPoint.slice(0, dataPoint.length - 1)
-				that.API.requestData({
-					showLoading: true,
-					method: "GET",
-					baseURL: "http://192.168.1.18:9002/",
-					subUrl: "point/item",
-					data: {
-						point: dataPoint,
-						startTs: time[0],
-						endTs: time[1],
-						interval: interval
-					},
-					success(res) {
-						if (res.data) {
-							res.data.forEach((ele, index) => {
-								ele.list.forEach(cEle => {
-									Powertrend[index].value.push({
-										text: new Date(cEle.ts).formatDate("hh:mm"),
-										value: cEle.doubleValue,
-									});
-								})
-							});
-							that.Powertrend = Powertrend;
-						}
-					},
-				});
-			},
-			dbfx() {
-				var that = this;
-				if (that.point.length <= 5 && that.point.length != 0) {
-					that.Powertrend = [];
-					that.requestDetailData(that.point, that.pointdes, [Date.parse(new Date(that.time[0])), Date.parse(
-						new Date(that.time[1]))], that.selectValue);
-				}else{
-					this.BASE.showMsg({
-						type: "warning",
-						msg: "请选择测点后再对标",
-					});
-					return
-				}
-			},
-			clearDb() { //清空对标状态
-				this.$refs.curRef.clearCheckBox();
-				this.point = [];
-				this.pointdes = [];
-				this.checkLength = 0;
-			},
-		},
-		created() {
-			this.list(this.data);
-		},
-		watch: {
-			selectValue() {
-				this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
-					this.time[1]))], this.selectValue);
-			},
-			time(e) {
-				let st = Date.parse(new Date(e[0])),
-					et = Date.parse(new Date(e[1]));
-				if((et - st) > (86400000 * 7)){//判断选择日期区间大于一周则重新选择
-					this.BASE.showMsg({
-						type: "warning",
-						msg: "请选择小于7天的日期区间",
-					});
-					return
-				}
-				this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
-					this.time[1]))], this.selectValue);
-			},
-		},
-	};
+      pageSize: 20,
+      model: [],
+      station: "",
+      windturbinename: "",
+      isvisiable: false,
+      checkLength: 0, //对标分析只能选择5个
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "check",
+            is_light: false,
+            width: "50px",
+            template: function () {
+              return "<input class='check curCheckBox' type='CheckBox'/>";
+            },
+            click: function (event, data) {
+              let point = data.point,
+                pointdes = data.pointdes;
+              if (event.target.checked == false && that.checkLength <= 5) {
+                that.point.forEach((item, i) => {
+                  if (item == point) {
+                    that.point.splice(i, 1);
+                    that.pointdes.splice(i, 1);
+                  }
+                });
+                that.checkLength--;
+              } else if (event.target.checked && that.checkLength < 5) {
+                that.point.push(point);
+                that.pointdes.push(pointdes);
+                that.checkLength++;
+              } else if (that.checkLength == 5) {
+                event.target.checked = false;
+              }
+            },
+          },
+          {
+            name: "序号",
+            field: "index",
+            is_light: false,
+            width: "30px",
+          },
+          {
+            name: "测点名称",
+            field: "point",
+            is_light: false,
+            width: "400px",
+          },
+          {
+            name: "测点描述",
+            field: "pointdes",
+            is_light: false,
+            width: "350px",
+          },
+          {
+            name: "操作",
+            is_light: false,
+            width: "250px",
+            template: () => {
+              return "<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp";
+            },
+            click(e, row) {
+              that.onClickOption(e, row);
+            },
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+    },
+    st: {
+      type: String,
+    },
+    markLineData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    onClickOption(e, row) {
+      // 操作按钮
+      let that = this;
+      if ("config" == e.target.getAttribute("value")) {
+        //原始数据
+        that.requestDetailData(
+          [row.point],
+          [row.pointdes],
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+        that.clearDb();
+      }
+    },
+    list(data) {
+      var that = this;
+      that.tableData.data = [];
+      if (data.length) {
+        for (var i = 0; i < data.length; i++) {
+          let obj = {
+            index: i + 1,
+            windturbineid: data[i].windturbineid,
+            widget: data[i].widget,
+            point: data[i].point,
+            pointdes: data[i].pointdes,
+            model: data[i].model,
+            stationcn: data[i].stationcn,
+          };
+          that.tableData.data.push(obj);
+        }
+        that.requestDetailData(
+          [data[0].point],
+          [data[0].pointdes],
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+      }
+    },
+    switchChange(interval, status) {
+      if (status === "interval") {
+        this.chooseStatus = false;
+        this.selectValue = "60";
+      } else if (status === "original") {
+        this.chooseStatus = true;
+      }
+    },
+    requestDetailData(point, pointdes, time, interval) {
+      let that = this;
+      let Powertrend = [];
+      let dataPoint = "";
+      pointdes.forEach((ele, index) => {
+        Powertrend.push({
+          title: ele,
+          smooth: true,
+          value: [],
+        });
+      });
+      point.forEach((ele, index) => {
+        dataPoint += ele + ",";
+      });
+      dataPoint = dataPoint.slice(0, dataPoint.length - 1);
+      that.API.requestData({
+        showLoading: true,
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "point/item",
+        data: {
+          point: dataPoint,
+          startTs: time[0],
+          endTs: time[1],
+          interval: interval,
+        },
+        success(res) {
+          if (res.data) {
+            res.data.forEach((ele, index) => {
+              ele.list.forEach((cEle) => {
+                Powertrend[index].value.push({
+                  text: new Date(cEle.ts).formatDate("yyyy-MM-dd hh:mm"),
+                  value: cEle.doubleValue,
+                });
+              });
+            });
+            that.Powertrend = Powertrend;
+          }
+        },
+      });
+    },
+    dbfx() {
+      var that = this;
+      if (that.point.length <= 5 && that.point.length != 0) {
+        that.Powertrend = [];
+        that.requestDetailData(
+          that.point,
+          that.pointdes,
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+      } else {
+        this.BASE.showMsg({
+          type: "warning",
+          msg: "请选择测点后再对标",
+        });
+        return;
+      }
+    },
+    clearDb() {
+      //清空对标状态
+      this.$refs.curRef.clearCheckBox();
+      this.point = [];
+      this.pointdes = [];
+      this.checkLength = 0;
+    },
+  },
+  created() {
+    this.list(this.data);
+  },
+  watch: {
+    selectValue() {
+      this.requestDetailData(
+        this.point,
+        this.pointdes,
+        [
+          Date.parse(new Date(this.time[0])),
+          Date.parse(new Date(this.time[1])),
+        ],
+        this.selectValue
+      );
+    },
+    time(e) {
+      let st = Date.parse(new Date(e[0])),
+        et = Date.parse(new Date(e[1]));
+      if (et - st > 86400000 * 7) {
+        //判断选择日期区间大于一周则重新选择
+        this.BASE.showMsg({
+          type: "warning",
+          msg: "请选择小于7天的日期区间",
+        });
+        return;
+      }
+      this.requestDetailData(
+        this.point,
+        this.pointdes,
+        [
+          Date.parse(new Date(this.time[0])),
+          Date.parse(new Date(this.time[1])),
+        ],
+        this.selectValue
+      );
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	.mb10 {
-		margin-bottom: 10px;
-	}
+.mb10 {
+  margin-bottom: 10px;
+}
 
-	.el-select.w {
-		width: 100%;
-	}
+.el-select.w {
+  width: 100%;
+}
 </style>