mbWaterService/src/views/zhpt/scada/scadaCraftMap/widget.vue

<template>
  <div style="width: 100%; height: 100%">
    <el-button-group class="buttonGroupClass" style="position: abs">
      <!-- <el-button type="primary" size="small" @click="craftShow=true">一厂</el-button> -->
      <!-- <el-button type="primary" size="small" @click="craftShow = false"
        >二厂</el-button
      > -->
      <el-button type="primary" size="small">二厂</el-button>
      <video
        ref="videoMsg"
        src="../../../../assets/alarm/14184.mp3"
        loop="loop"
        style="display: none"
      />
    </el-button-group>
    <div
      style="
        position: absolute;
        top: 15px;
        left: 195px;
        z-index: 10;
        background: #fffb;
        padding: 10px;
        border-radius: 5px;
      "
    >
      <el-switch v-model="isOpenFlow" inactive-text="开启动画" />
    </div>

    <div
      style="
        position: absolute;
        top: 15px;
        left: 330px;
        z-index: 10;
        background: #fffb;
        padding: 10px;
        border-radius: 5px;
      "
    >
      <el-switch v-model="isOpenAlarm" inactive-text="开启报警" />
    </div>
    <div
      v-show="craftShow"
      id="graphContainer"
      ref="graphContainer"
      v-loading="loading"
      class="graph"
      style="width: 100%; height: 100%; background: rgb(5, 37, 58)"
    />
    <div
      v-show="!craftShow"
      id="graphContainer2"
      ref="graphContainer2"
      v-loading="loading"
      class="graph"
      style="width: 100%; height: 100%; background: rgb(5, 37, 58)"
    />
    <el-dialog
      :title="siteTitle"
      :visible.sync="siteVisible"
      width="1400px"
      top="calc(50vh - 350px)"
    >
      <el-row style="margin-top: 8px">
        <span class="title2">时间</span>
        <!-- <el-time-select
          v-model="startTime"
          placeholder="起始时间"
          :picker-options="{
            start: '00:00:00',
            step: '01:00:00',
            end: '23:00:00'
          }"
        />~ -->
        <el-time-picker
          v-model="startTime"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          size="small"
          :picker-options="{
            selectableRange: `00:00:00 - 23:59:00`,
          }"
        />
        <el-time-picker
          v-model="endTime"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          size="small"
          :picker-options="{
            selectableRange: `${startTime ? startTime : '00:00:00'}-23:59:59`,
          }"
        />
        <!-- <el-time-select
          v-model="endTime"
          placeholder="结束时间"
          :picker-options="{
            start: '00:59:59',
            step: '01:00:00',
            end: '23:59:59',
            minTime: startTime
          }"
        /> -->
        <el-button size="small" type="primary" @click="showResult"
          >查询</el-button
        >
        <el-checkbox v-model="dontShow">去除特殊值(-9999)</el-checkbox>
      </el-row>
      <div
        v-loading="infoLoading"
        style="width: 100%; height: 500px; margin-top: 8px; display: flex"
      >
        <div style="width: 25%; height: 100%">
          <el-table
            :data="siteDatas"
            border
            height="calc(100% - 43px)"
            style="width: 100%"
          >
            <el-table-column prop="scadaTime" label="时间" />
            <el-table-column prop="value" label="测量值" />
          </el-table>
          <el-row style="margin-top: 8px">
            <el-col :span="20">
              <el-pagination
                ref="pagination2"
                small
                background
                layout="total, sizes, prev, next"
                :page-sizes="[10, 20, 50, 100, 1000]"
                :total="total2"
                @current-change="pagRefersh"
                @size-change="pagRefersh"
              />
            </el-col>
            <el-col :span="4">
              <span
                ref="pageLength2"
                style="font-size: 13px"
                class="el-pagination__total"
                >1/30 页</span
              >
            </el-col>
          </el-row>
        </div>
        <div ref="chart" style="width: 75%; height: 100%" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { allConfig2, allConfig } from "./craftConfig";
import siteIndex from "./siteIndex";
import mxgraph from "mxgraph";
import request from "@/utils/request"; // 请求
import { parseTime } from "@/utils/index";
import Echarts from "echarts";
import { getScadaAlarmDataPage } from "@/api/mbsys/scada";
export default {
  name: "CraftMap2",
  components: { Echarts },
  data() {
    return {
      craftShow: true, // 默认显示一二期的工艺图
      activeName: "first",
      loading: false,
      infoLoading: false,
      elements: {},
      siteTitle: "",
      siteVisible: false,
      timss: ["", ""],
      startTime: "00:00:00",
      endTime: "23:59:59",
      total2: 0,
      siteDatas: [],
      isOpenFlow: true,
      isOpenFlow2: true,
      isOpenAlarm: true,
      isAlarm: false,
      dontShow: true,
      twinkle: null,
      indexCodes: [],
    };
  },
  watch: {
    isOpenFlow(e) {
      var flows = this.flowLines;
      var flows2 = this.flowLines2;
      var text = e ? "flow" : "flowN";
      for (let i = 0, ii = flows.length; i < ii; i++) {
        flows[i].classList.value = text;
      }
      for (let i = 0, ii = flows2.length; i < ii; i++) {
        flows2[i].classList.value = text;
      }
    },
    isOpenAlarm(e) {
      this.speckVideo(e);
    },
  },

  created() {
    this.indexCodes = []; //存储配置的指标编码
    for (var i = 0; i < siteIndex.deviceValue.length; i++) {
      const deviceValue = siteIndex.deviceValue[i];
      if (deviceValue) {
        deviceValue.value.map((item) => {
          if (item.itnm && item.itnm !== "") this.indexCodes.push(item.itnm);
        });
      }
    }
  },
  mounted() {
    this.ready = 0;
    this.loadCraft();
    this.loadCraft2();
    this.getSide();

    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    this.timss = [
      year + "-" + month + "-" + day,
      year + "-" + month + "-" + day,
    ];
  },
  destroyed() {
    if (this.nextDo) clearTimeout(this.nextDo);
    if (this.twinkle) this.twinkle = null;
  },
  methods: {
    init(div) {
      var mx = mxgraph();
      var mxGraphHandler = mx.mxGraphHandler;
      var mxConstants = mx.mxConstants;
      var mxEvent = mx.mxEvent;
      mxEvent.disableContextMenu(div);
      const graph = new mx.mxGraph(div);
      graph.setConnectable(true); // 是否允许Cells通过其中部的连接点新建连接,false则通过连接线连接
      graph.setTooltips(false); // 是否显示提示,默认显示Cell的名称
      graph.setEnabled(false); // 设置启用,就是允不允许你改变CELL的形状内容。
      graph.setCellsResizable(true); // 节点不可改变大小
      graph.connectionHandler.setCreateTarget(false); // 是否创建目标
      graph.foldingEnabled = false;
      mxGraphHandler.prototype.setMoveEnabled(false); // 是否可以移动
      mxGraphHandler.prototype.guidesEnabled = true; // 显示细胞位置标尺
      const p = graph.getDefaultParent();
      const styleE = graph.getStylesheet().getDefaultEdgeStyle();
      styleE[mxConstants.STYLE_EDGE] = "orthogonalEdgeStyle"; // 设置折线
      styleE[mxConstants.STYLE_ENDARROW] = "none"; // 设置箭头末尾
      styleE[mxConstants.STYLE_STROKECOLOR] = "#029ac9"; // 设置颜色
      if (!this.test) {
        styleE[mxConstants.STYLE_STROKEWIDTH] = 5; // 设置颜色
      }
      const styleV = graph.getStylesheet().getDefaultVertexStyle();
      if (!this.test) {
        styleV[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = "bottom"; // 设置文本底部
        styleV[mxConstants.STYLE_VERTICAL_ALIGN] = "top"; // 设置文本底部
        styleV[mxConstants.STYLE_FILLCOLOR] = "none"; // 设置背景颜色
        styleV[mxConstants.STYLE_TEXT_OPACITY] = 0; // 设置文本透明度
        styleV[mxConstants.STYLE_STROKECOLOR] = "none"; // 设置边框
      }
      return [graph, p];
    },

    /**
     * 二水厂工艺图
     */
    loadCraft() {
      this.test = false;
      var test = this.test;
      var div = this.$refs.graphContainer;
      var flowLines = (this.flowLines = []);
      const cache = {};
      const modulesFiles = require.context("./images", true, /\.(png|gif)$/);
      modulesFiles.keys().forEach((key) => (cache[key] = modulesFiles(key)));
      var mxPoint = mxgraph().mxPoint;
      var width = div.offsetWidth;
      var height = div.offsetHeight;
      div.innerHTML +=
        '<div class="underSvg"></div><div class="onSvg"><div class="text"></div><div></div></div>';
      var children = div.children;
      var backgroundDiv = children[children.length - 2];
      var backgroundstr = "";
      var showNodeDiv = children[children.length - 1];
      var textDiv = showNodeDiv.children[0];
      var textStr = "";
      var imageDiv = showNodeDiv.children[1];
      var imagestr = "";
      const [graph, p] = this.init(div);
      var nodeMx = [];
      var nodes = [];
      var nodesIndex = {};
      var imagesUrl = "./";
      var that = this;
      setTimeout(() => {
        thenDo().then(() => {
          //that.loading = false;
          div.parentElement.style.overflow = "auto";
        });
      }, 500);

      async function thenDo() {
        //allConfig.push(...siteIndex.deviceValue)
        let config = allConfig.filter((p) => 1 == 1);
        config.push(...siteIndex.deviceValue);
        for (var i = 0, ii = config.length; i < ii; i++) {
          var node = config[i];
          if (nodesIndex.hasOwnProperty(node.id)) alert("重复ID" + node.id);
          switch (node.type) {
            case "point":
              var x, y;
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var dx = margin.x[0] * width + margin.x[1];
                var dy = margin.y[0] * height + margin.y[1];
                x = fromNode.x + dx;
                y = fromNode.y + dy;
              } else if (node.locationFrom) {
                var fromInfo = node.locationFrom;
                var fromNodeX = nodesIndex[fromInfo.xFrom];
                var fromNodeY = nodesIndex[fromInfo.yFrom];
                var margin = node.margin;
                x = fromNodeX.x + width * margin.x[0] + margin.x[1];
                y = fromNodeY.y + height * margin.y[0] + margin.y[1];
              } else {
                x = width * node.x[0] - 1 + node.x[1];
                y = height * node.y[0] - 1 + node.y[1];
              }
              var nodeGraph = graph.insertVertex(
                p,
                node.id,
                node.id,
                x,
                y,
                2,
                2
              );
              nodeMx.push(nodeGraph);
              nodes.push(
                (nodesIndex[node.id] = {
                  type: "point",
                  x: x,
                  y: y,
                  width: 2,
                  height: 2,
                  graph: nodeGraph,
                })
              );
              break;
            case "image":
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var x = fromNode.x + margin.x[0] * width + margin.x[1];
                var y = fromNode.y + margin.y[0] * height + margin.y[1];
                var str =
                  '<div class="img" style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y.toFixed(2) +
                  "px; left: " +
                  x.toFixed(2) +
                  "px; width: " +
                  node.width +
                  "px; height: " +
                  node.height +
                  "px; " +
                  (test
                    ? "opacity: 0.5;border: 1px solid #0ff;"
                    : "background-image: url(" +
                      cache[imagesUrl + node.src] +
                      ");") +
                  '">'; //
                // str += '<img src=' + cache[imagesUrl + node.src] + '>'
                if (node.text) {
                  str +=
                    '<span class="' +
                    (node.class || "unText") +
                    '">' +
                    (test ? node.id : node.text) +
                    "</span>";
                } //
                str += "</div>";
                imagestr += str;
                nodes.push(
                  (nodesIndex[node.id] = {
                    type: "image",
                    x: x,
                    y: y,
                    width: node.width,
                    height: node.height,
                  })
                );
              }
              break;
            case "text":
              var x;
              var y;
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                x = (fromNode.x + margin.x[0] * width + margin.x[1]).toFixed(2);
                y = (fromNode.y + margin.y[0] * height + margin.y[1]).toFixed(
                  2
                );
              }
              var str;
              if (node.text) {
                str =
                  '<div class="inPic" style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y +
                  "px; left: " +
                  x +
                  'px"><span>' +
                  node.text +
                  "</span></div>";
              } else {
                str =
                  '<ul style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y +
                  "px; left: " +
                  x +
                  "px;" +
                  (node.style || "") +
                  '">';
                var textIndex = {};
                for (let j = 0, jl = node.value, jj = jl.length; j < jj; j++) {
                  var text = jl[j];
                  let value = text.value;
                  if (text.isType == "1") {
                    let types = text.type;
                    value = types[text.value] ? types[text.value] : text.value;
                  }
                  if (text.isType == "2" && text.hasOwnProperty("toFixed")) {
                    value = parseFloat(value).toFixed(parseInt(text.toFixed));
                  }
                  str +=
                    '<li class="tf-li" data="' +
                    (text.itnm || "") +
                    '"><div class="' +
                    (node.class || "title") +
                    " tfStyleTitle" +
                    '"><span>' +
                    text.name +
                    '</span></div><span class="value tfStyle">' +
                    value +
                    '</span><span class="unit tfStyle">' +
                    text.unit +
                    "</span></li>";
                }
                str += "</ul>";
              }
              textStr += str;
              break;
            case "arrow":
              var arrowGraph = graph.insertEdge(
                p,
                null,
                null,
                nodesIndex[node.from].graph,
                nodesIndex[node.to].graph,
                node.style
              );
              var jl = node.road;
              if (jl && jl.length > 0) {
                var arrowGeomentry = arrowGraph.geometry;
                arrowGeomentry.relative = true;
                var points = [];
                for (let j = 0, jj = jl.length; j < jj; j++) {
                  var arrowNode = jl[j];
                  var id = arrowNode.id;
                  if (id) {
                    var nodeF = nodesIndex[id];
                    var offer = [1, 1];
                    if (nodeF.type == "image") offer = [0, 0];
                    points.push(
                      new mxPoint(
                        nodeF.x +
                          offer[0] +
                          arrowNode.x[0] * width +
                          arrowNode.x[1],
                        nodeF.y +
                          offer[1] +
                          arrowNode.y[0] * height +
                          arrowNode.y[1]
                      )
                    );
                  } else {
                    points.push(
                      new mxPoint(
                        arrowNode.x[0] * width + arrowNode.x[1],
                        arrowNode.y[0] * height + arrowNode.y[1]
                      )
                    );
                  }
                }
                arrowGeomentry.points = points;
              }
              graph.refresh(arrowGraph);
              if (node.flow && !test) {
                var state = graph.view
                  .getState(arrowGraph)
                  .shape.node.getElementsByTagName("path");
                var [backGroundLine, flowLine] = state;
                backGroundLine.removeAttribute("visibility");
                backGroundLine.setAttribute("class", "flowBack");
                backGroundLine.setAttribute("stroke-width", "12");
                backGroundLine.setAttribute("stroke", "#72a8d4");
                flowLine.setAttribute("class", "flow");
                flowLines.push(flowLine);
              }
              break;
            case "background":
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var x = fromNode.x + margin.x[0] * width + margin.x[1];
                var y = fromNode.y + margin.y[0] * height + margin.y[1];
                var str =
                  '<div style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y.toFixed(2) +
                  "px; left: " +
                  x.toFixed(2) +
                  "px; width: " +
                  node.width +
                  "px; height: " +
                  node.height +
                  'px;">';
                if (node.text) {
                  str +=
                    '<span class="' +
                    (node.class || "onText") +
                    '">' +
                    (test ? node.id : node.text) +
                    "</span>";
                } //      node.id
                str += "</div>";
                backgroundstr += str;
                nodes.push(
                  (nodesIndex[node.id] = {
                    type: "background",
                    x: x,
                    y: y,
                    width: node.width,
                    height: node.height,
                  })
                );
              }
              break;
          }
        }
        textDiv.innerHTML = textStr;
        backgroundDiv.innerHTML = backgroundstr;
        imageDiv.innerHTML = imagestr;
        that.setSide();
      }
    },

    loadCraft2() {
      this.test = false;
      var test = this.test;
      var div = this.$refs.graphContainer;
      var div2 = this.$refs.graphContainer;
      var flowLines = (this.flowLines2 = []);
      const cache = {};
      const modulesFiles = require.context("./images", true, /\.(png|gif)$/);
      modulesFiles.keys().forEach((key) => (cache[key] = modulesFiles(key)));
      var mxPoint = mxgraph().mxPoint;
      var width = div.offsetWidth || div2.offsetWidth;
      var height = div.offsetHeight || div2.offsetHeight;
      div.innerHTML +=
        '<div class="underSvg"></div><div class="onSvg"><div class="text"></div><div></div></div>';
      var children = div.children;
      var backgroundDiv = children[children.length - 2];
      var backgroundstr = "";
      var showNodeDiv = children[children.length - 1];
      var textDiv = showNodeDiv.children[0];
      var textStr = "";
      var imageDiv = showNodeDiv.children[1];
      var imagestr = "";
      const [graph, p] = this.init(div);
      var nodeMx = [];
      var nodes = [];
      var nodesIndex = {};
      var imagesUrl = "./";
      var that = this;
      setTimeout(() => {
        thenDo().then(() => {
          //that.loading = false;
          div.parentElement.style.overflow = "auto";
        });
      }, 200);
      async function thenDo() {
        let config = allConfig.filter((p) => 1 == 1);
        config.push(...siteIndex.deviceValue);
        for (var i = 0, ii = config.length; i < ii; i++) {
          var node = config[i];
          if (nodesIndex.hasOwnProperty(node.id)) alert("重复ID" + node.id);
          switch (node.type) {
            case "point":
              var x, y;
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var dx = margin.x[0] * width + margin.x[1];
                var dy = margin.y[0] * height + margin.y[1];
                x = fromNode.x + dx;
                y = fromNode.y + dy;
              } else if (node.locationFrom) {
                var fromInfo = node.locationFrom;
                var fromNodeX = nodesIndex[fromInfo.xFrom];
                var fromNodeY = nodesIndex[fromInfo.yFrom];
                var margin = node.margin;
                x = fromNodeX.x + width * margin.x[0] + margin.x[1];
                y = fromNodeY.y + height * margin.y[0] + margin.y[1];
              } else {
                x = width * node.x[0] - 1 + node.x[1];
                y = height * node.y[0] - 1 + node.y[1];
              }
              var nodeGraph = graph.insertVertex(
                p,
                node.id,
                node.id,
                x,
                y,
                2,
                2
              );
              nodeMx.push(nodeGraph);
              nodes.push(
                (nodesIndex[node.id] = {
                  type: "point",
                  x: x,
                  y: y,
                  width: 2,
                  height: 2,
                  graph: nodeGraph,
                })
              );
              break;
            case "image":
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var x = fromNode.x + margin.x[0] * width + margin.x[1];
                var y = fromNode.y + margin.y[0] * height + margin.y[1];
                var str =
                  '<div class="img" style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y.toFixed(2) +
                  "px; left: " +
                  x.toFixed(2) +
                  "px; width: " +
                  node.width +
                  "px; height: " +
                  node.height +
                  "px; " +
                  (test
                    ? "opacity: 0.5;border: 1px solid #0ff;"
                    : "background-image: url(" +
                      cache[imagesUrl + node.src] +
                      ");") +
                  '">'; //
                // str += '<img src=' + cache[imagesUrl + node.src] + '>'
                if (node.text) {
                  str +=
                    '<span class="' +
                    (node.class || "unText") +
                    '">' +
                    (test ? node.id : node.text) +
                    "</span>";
                } //
                str += "</div>";
                imagestr += str;
                nodes.push(
                  (nodesIndex[node.id] = {
                    type: "image",
                    x: x,
                    y: y,
                    width: node.width,
                    height: node.height,
                  })
                );
              }
              break;
            case "text":
              var x;
              var y;
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                x = (fromNode.x + margin.x[0] * width + margin.x[1]).toFixed(2);
                y = (fromNode.y + margin.y[0] * height + margin.y[1]).toFixed(
                  2
                );
              }
              var str;
              if (node.text) {
                str =
                  '<div class="inPic" style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y +
                  "px; left: " +
                  x +
                  'px"><span>' +
                  node.text +
                  "</span></div>";
              } else {
                const className =
                  node.id == "m1t6" || node.id == "m1t7" ? true : false;
                str =
                  '<ul style="' +
                  (className ? "color:#fff;" : "") +
                  "transform: translate(-" +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y +
                  "px; left: " +
                  x +
                  "px;" +
                  (node.style || "") +
                  '">';
                var textIndex = {};
                for (let j = 0, jl = node.value, jj = jl.length; j < jj; j++) {
                  var text = jl[j];
                  let value = text.value;
                  if (text.isType == "1") {
                    let types = text.type;
                    value = types[text.value] ? types[text.value] : text.value;
                  }
                  if (text.isType == "2" && text.hasOwnProperty("toFixed")) {
                    value = parseFloat(value).toFixed(parseInt(text.toFixed));
                  }
                  str +=
                    '<li class="tf-li" data="' +
                    (text.itnm || "") +
                    '"><div class="' +
                    (node.class || "title") +
                    " tfStyleTitle" +
                    '"><span>' +
                    text.name +
                    '</span></div><span class="value tfStyle">' +
                    value +
                    '</span><span class="unit tfStyle">' +
                    text.unit +
                    "</span></li>";
                }
                str += "</ul>";
              }
              textStr += str;
              break;
            case "arrow":
              var arrowGraph = graph.insertEdge(
                p,
                null,
                null,
                nodesIndex[node.from].graph,
                nodesIndex[node.to].graph,
                node.style
              );
              var jl = node.road;
              if (jl && jl.length > 0) {
                var arrowGeomentry = arrowGraph.geometry;
                arrowGeomentry.relative = true;
                var points = [];
                for (let j = 0, jj = jl.length; j < jj; j++) {
                  var arrowNode = jl[j];
                  var id = arrowNode.id;
                  if (id) {
                    var nodeF = nodesIndex[id];
                    var offer = [1, 1];
                    if (nodeF.type == "image") offer = [0, 0];
                    points.push(
                      new mxPoint(
                        nodeF.x +
                          offer[0] +
                          arrowNode.x[0] * width +
                          arrowNode.x[1],
                        nodeF.y +
                          offer[1] +
                          arrowNode.y[0] * height +
                          arrowNode.y[1]
                      )
                    );
                  } else {
                    points.push(
                      new mxPoint(
                        arrowNode.x[0] * width + arrowNode.x[1],
                        arrowNode.y[0] * height + arrowNode.y[1]
                      )
                    );
                  }
                }
                arrowGeomentry.points = points;
              }
              graph.refresh(arrowGraph);
              if (node.flow && !test) {
                var state = graph.view
                  .getState(arrowGraph)
                  .shape.node.getElementsByTagName("path");
                var [backGroundLine, flowLine] = state;
                backGroundLine.removeAttribute("visibility");
                backGroundLine.setAttribute("class", "flowBack");
                backGroundLine.setAttribute("stroke-width", "12");
                backGroundLine.setAttribute("stroke", "#72a8d4");
                flowLine.setAttribute("class", "flow");
                flowLines.push(flowLine);
              }
              break;
            case "background":
              if (node.from) {
                var fromNode = nodesIndex[node.from];
                var margin = node.margin;
                var x = fromNode.x + margin.x[0] * width + margin.x[1];
                var y = fromNode.y + margin.y[0] * height + margin.y[1];
                var str =
                  '<div style="transform: translate(-' +
                  node.point[0] * 100 +
                  "%,-" +
                  node.point[1] * 100 +
                  "%); top: " +
                  y.toFixed(2) +
                  "px; left: " +
                  x.toFixed(2) +
                  "px; width: " +
                  node.width +
                  "px; height: " +
                  node.height +
                  'px;">';
                if (node.text) {
                  str +=
                    '<span class="' +
                    (node.class || "onText") +
                    '">' +
                    (test ? node.id : node.text) +
                    "</span>";
                } //      node.id
                str += "</div>";
                backgroundstr += str;
                nodes.push(
                  (nodesIndex[node.id] = {
                    type: "background",
                    x: x,
                    y: y,
                    width: node.width,
                    height: node.height,
                  })
                );
              }
              break;
          }
        }
        textDiv.innerHTML = textStr;
        backgroundDiv.innerHTML = backgroundstr;
        imageDiv.innerHTML = imagestr;
        that.setSide();
      }
    },
    getSide() {
      request({
        url: "/tofly-scada/scada/app/data",
        method: "post",
        data: {
          type: 1,
        },
      }).then((res) => {
        if (res && res.code == 1) {
          var scada = (this.scada = {});
          res.result.map((e) => {
            if (e.allocations) {
              for (const i in e.allocations) {
                scada[e.allocations[i].variableCode] = e.allocations[i];
              }
            }
          });
          this.setSide();
        } else {
          this.$message.error("获取指标失败：" + res.message);
          //this.loading = false;
        }
      });

      this.getAlarmData();
    },

    getAlarmData() {
      if (this.indexCodes.length < 1) return;
      const frontHelfTime = parseTime(
        new Date(new Date().getTime() - 24 * 60 * 30 * 1000),
        "{y}-{m}-{d} {h}:{i}:{s}"
      );
      const nowTime = parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}");
      const params = {
        codes: this.indexCodes.toString(), //指标编码
        status: 0, //处理状态未处理
        start: frontHelfTime,
        end: nowTime,
        current: 1,
        size: 20,
      };
      // getScadaAlarmDataPage(params)
      //   .then((res) => {})
      //   .catch((ex) => {});
    },

    setSide() {
      this.ready += 1;
      if (this.ready == 3) {
        var scada = this.scada;
        var allLis = [];
        var lis = this.$refs.graphContainer.querySelectorAll("li");
        //var lis2 = this.$refs.graphContainer2.querySelectorAll('li')
        allLis.push.apply(allLis, lis);
        //allLis.push.apply(allLis, lis2)
        // Object.assign(lis, lis2)
        var infos = {};
        var loadSite = () => {
          for (var i = 0, ii = allLis.length; i < ii; i++) {
            var dl = allLis[i];
            var att = dl.getAttribute("data");
            if (att && scada.hasOwnProperty(att)) {
              dl.onclick = this.showHistoty;
              dl = dl.children;
              var datt = scada[att];
              // dl[0].innerHTML = "<span>" + datt.itnm + "</span>"
              dl[1].innerHTML = "-"; // datt.description
              dl[2].innerHTML = datt.unit;
              infos[datt.variableCode] = dl[1]; // value值
            }
          }
          //this.loading = false;
          this.$nextTick(loadInfo);
        };
        var loadInfo = () => {
          try {
            //this.loading = true;
            request({
              url: "/tofly-scada/scada/app/data",
              method: "post",
              data: {
                type: 1,
              },
            })
              .then((res) => {
                if (res && res.code && res.code == 1) {
                  res = res.result;
                  for (var item in res) {
                    var di = res[item];
                    if (di.allocations) {
                      for (const i in di.allocations) {
                        var t = di.allocations[i].variableCode;
                        if (infos.hasOwnProperty(t)) {
                          let n = di.allocations[i]
                            ? di.allocations[i].scada.value
                            : "null";
                          if (n == "null") n = "-";
                          if (t == "S7.300.1#F_POWER_FAULT")
                            n = n == "1" ? "开" : "关";
                          if (t == "S7.300.1#F_OPEN")
                            n = n == "1" ? "开" : "关";
                          if (t == "S7.300.2#F_OPEN")
                            n = n == "1" ? "开" : "关";
                          if (t == "S7.300.2#F_POWER_FAULT")
                            n = n == "1" ? "开" : "关";
                          if (t == "S7.300.CHU_SS")
                            n = parseFloat(n).toFixed(3);
                          if (t == "S7.300.CHU_CL")
                            n = parseFloat(n).toFixed(3);
                          if (t == "S7.300.CHU_FT")
                            n = parseFloat(n).toFixed(3);
                          if (t == "S7.300.1#QSYW")
                            n = parseFloat(n).toFixed(3);
                          if (t == "S7.300.2#QSYW")
                            n = parseFloat(n).toFixed(3);
                          infos[t].innerHTML = n;
                        }
                      }
                    }
                  }
                  this.nextDo = setTimeout(loadInfo, 1000 * 10); //1分钟一次
                  this.setAlarm(res, infos);
                } else {
                  this.$message.error("获取指标失败：" + res.message);
                  this.nextDo = setTimeout(loadInfo, 1000 * 10); //1分钟一次
                }
                //this.loading = false;
              })
              .catch((ex) => {
                this.$message.error("连接异常:" + ex);
                this.nextDo = setTimeout(loadInfo, 1000 * 10); //1分钟一次
              });
          } catch (ex) {
            this.nextDo = setTimeout(loadInfo, 1000 * 10); //1分钟一次
          }
        };
        this.$nextTick(loadSite);
      }
    },

    showHistoty(e) {
      var att = e.currentTarget.getAttribute("data");
      var scada = this.scada;
      if (att && scada.hasOwnProperty(att)) {
        this.siteVisible = true;
        this.$nextTick(() => {
          var ec = this.$refs.chart;
          this.chart = Echarts.init(ec);
          var datt = scada[att];
          this.siteTitle = datt.displayName;
          this.selectSite = att;
          this.showResult();
        });
      }
    },
    showResult() {
      if (this.selectSite) {
        //this.infoLoading = true;
        var datt = this.scada[this.selectSite];
        this.getAllDate(datt.variableCode, datt.displayName);
        this.pagRefersh(false);
      }
    },
    getAllDate(stid, zbx) {
      var times = [
        this.timss[0] + " " + this.startTime,
        this.timss[1] + " " + this.endTime,
      ];
      // times[0] + ' ' + this.startTime
      // times[1] + ' ' + this.endTime
      var datt = this.scada[this.selectSite];
      request({
        url:
          "/tofly-scada/scada/page?code=" +
          stid +
          "&start=" +
          times[0] +
          "&end=" +
          times[1] +
          "&size=" +
          10000 +
          "&statisticsType=" +
          0,
        method: "get",
      }).then((res) => {
        var chart = this.chart;
        chart.clear();
        if (res.code == 1) {
          res = res.result.records;
          var dataX = [];
          var dataY = [];
          var dontShow = this.dontShow;
          var max = -Infinity;
          var min = Infinity;
          var Xmax = -Infinity;
          var Xmin = Infinity;
          var d;
          var symbol = "none";
          for (var i = 0, il = res, ii = il.length; i < ii; i++) {
            var v = parseFloat(il[i].value);
            if (dontShow && v == -9999) continue;
            var x = il[i].startTime
              ? il[i].startTime.split(" ")[1]
              : il[i].scadaTime
              ? il[i].scadaTime.split(" ")[1]
              : "";
            dataX.push(x);
            dataY.push(v);
          }
          var unit = datt.unit;
          var type = zbx;

          chart.setOption({
            title: {
              text: zbx,
              left: "center",
              subtext: times[0] + "至" + times[1],
            },
            color: "rgb(45, 116, 231)",
            grid: { left: "50px", right: "50px", bottom: "80px" },
            // dataZoom: [
            //   {
            //     minSpan: 1,
            //     type: 'slider',
            //     labelFormatter: (i) => {
            //       var date = new Date(i)
            //       var time = [date.getHours(), date.getMinutes()]
            //       if (time[0] < 10) time[0] = '0' + time[0]
            //       if (time[1] < 10) time[1] = '0' + time[1]
            //       return (
            //         [
            //           date.getFullYear(),
            //           date.getMonth() + 1,
            //           date.getDate()
            //         ].join('-') +
            //         '\n' +
            //         time.join(':')
            //       )
            //     }
            //   }
            // ],
            toolbox: { feature: { saveAsImage: {} } },
            tooltip: {
              trigger: "axis",
              formatter(a) {
                return (
                  "记录时间：" +
                  a[0].axisValue +
                  "<br>" +
                  type +
                  " " +
                  a[0].data +
                  " " +
                  unit
                );
              },
            },
            xAxis: [
              {
                name: "日期",
                type: "category",
                data: dataX,
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
              },
            ],
            yAxis: [{ name: unit, type: "value" }],
            series: [{ type: "line", smooth: false, data: dataY }],
          });
        } else this.$message(res.message);
        //this.infoLoading = false;
      });
    },

    /**
     * 判断报警情况
     */
    setAlarm(data, infos) {
      if (data.length > 0) {
        const alarmData = data[0].allocations.filter(
          (item) => item.scadaReports != null
        );
        let alarmArr = [];
        let openAlarm = false;
        this.isAlarm = false;
        alarmData.forEach((alarm) => {
          const value = parseFloat(alarm.scada.value);
          const scadaReports = alarm.scadaReports;
          const variableCode = alarm.variableCode;
          if (scadaReports) {
            scadaReports.forEach((p) => {
              const max = parseFloat(p.reportUpper);
              const min = parseFloat(p.reportLower);
              if (value > max || value < min) {
                openAlarm = true; //存在报警
                this.isAlarm = true;
                const obj = Object.assign(
                  { variableCode: variableCode },
                  parseFloat
                );
                alarmArr.push(obj);
              }
            });
          }
        });
        //报警
        if (this.isOpenAlarm) {
          this.speckVideo(openAlarm);
          this.twinkle = setInterval(() => {
            alarmArr.forEach((op) => {
              const color = infos[op.variableCode].style.color;
              let clr = "red";
              if (
                ["S7.300.1#QSYW", "S7.300.2#QSYW"].includes(op.variableCode)
              ) {
                clr = color == "red" ? "#fff" : "red";
              } else {
                clr = color == "red" ? "#fff" : "red";
              }
              infos[op.variableCode].style.color = clr;
            });
          }, 500);
        } else {
          for (key in infos) {
            if (["S7.300.1#QSYW", "S7.300.2#QSYW"].includes(key)) {
              infos[key].style.color = "#ffffff";
            } else {
              infos[key].style.color = "#ffffff";
            }
          }
          if (this.twinkle) this.twinkle = null;
        }
      }
    },

    /**
     * @description 消息播放
     * @isAlarm 是否报警
     */
    speckVideo(alarm) {
      this.$nextTick(() => {
        const _videoMsg = this.$refs.videoMsg;
        alarm && this.isAlarm ? _videoMsg.play() : _videoMsg.pause();
      });
    },

    pagRefersh(bool) {
      var datt = this.scada[this.selectSite];
      var pages = this.$refs.pagination2;
      var times = [
        this.timss[0] + " " + this.startTime,
        this.timss[1] + " " + this.endTime,
      ];
      //if (bool) this.infoLoading = true;
      request({
        url:
          "/tofly-scada/scada/page?code=" +
          datt.variableCode +
          "&start=" +
          times[0] +
          "&end=" +
          times[1] +
          "&statisticsType=" +
          0 +
          "&current=" +
          pages.internalCurrentPage +
          "&size=" +
          pages.internalPageSize,
        method: "get",
      }).then((res) => {
        if (res.code == 1) {
          res = res.result;
          this.siteDatas = res.records;
          this.$refs.pageLength2.innerHTML =
            pages.internalCurrentPage +
            "/" +
            Math.ceil((this.total2 = res.total) / pages.internalPageSize) +
            " 页";
        } else {
          this.$message.error(res.message);
          this.siteDatas = [];
          this.$refs.pageLength2.innerHTML = "1/1 页";
        }
        //if (bool) this.infoLoading = false;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.buttonGroupClass {
  border-radius: unset;
  border-right: none;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 999;
}
.onWhiteText {
  color: #8ac9fb !important;
}
.inPic {
  color: #8ac9fb !important;
  font-size: 17px;
}

>>> .tfStyleTitle {
  font-size: 24px !important;
  margin-bottom: 10px !important;
}
>>> .tfStyle {
  font-size: 24px !important;
  margin-bottom: 10px !important;
}
>>> .tf-li {
  margin-bottom: 16px !important;
}
</style>