<template>
  <div class="Screen cm-layout">
    <div class="a_0">
      <!-- <cesium
				ref="CesiumMap" 
				:mapinfo="mapinfo"
				:onload="mapOnload" 
				@click="mapClick" 
			/> -->
    </div>
    <div class="b_0">
      <header>
        <div class="b1_a">
          <h2>{{ title }}</h2>
          <div class="b1_a1">
            <span class="font_digit" id="nowTime"></span>
          </div>
          <div class="b1_a2 logo"></div>
        </div>
      </header>
      <section class="b_2">
        <div class="b_2a">
          <div class="b2_a">
            <div class="b2_a1">
              <div v-for="(item, i) in area.b2_a1" class="view-item">
                <div class="view-flx">
                  <Carousel :ref="'view_' + item.id" />
                </div>
              </div>
            </div>
            <div class="b2_a2" id="b2_a2">
              <div class="b2a_2a view-item" v-for="(item, i) in area.b2a_2a">
                <div class="view-flx">
                  <Center-Views :ref="'view_' + item.id" />
                </div>
              </div>
              <div class="b2a_2b">
                <div v-for="(item, i) in area.b2a_2b" class="view-item">
                  <div class="view-flx">
                    <Carousel :ref="'view_' + item.id" />
                  </div>
                </div>
              </div>
            </div>
            <div class="b2_a3">
              <div v-for="(item, i) in area.b2_a3" class="view-item">
                <div class="view-flx">
                  <Carousel :ref="'view_' + item.id" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Highchart } from "@/assets/js/chartTemplates.js";
import cesium from '@/components/Cesium';
import Carousel from "@/components/Carousel";
import CenterViews from "@/components/CenterViews";

// style
// import '@/../static/js/Cesium/Widgets/widgets.css';
export default {
  components: { Carousel, CenterViews },
  data() {
    return {
      area: {
        b2_a1: [],
        b2a_2b: [],
        b2_a3: [],
        views: []
      },
      title: ""
    };
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.pageApi = Config.getModuleInfo(this);

      // 时钟
      var nowTimeEl = this.$el.querySelector("#nowTime");
      var Loop1 = qf.Async.intervalLoop(
        1000,
        function () {
          var dateTime = Tools.Dates.format("yyyy年MM月dd日 HH:mm:ss");
          dateTime = dateTime.replace(/年|月|日/g, function (a) {
            return "<span>" + a + "</span>";
          });
          nowTimeEl.innerHTML = dateTime;
          //Loop1.clear();
        },
        function () {
          var dateTime = Tools.Dates.format("yyyy年MM月dd日 HH:mm:ss");
          dateTime = dateTime.replace(/年|月|日/g, function (a) {
            return "<span>" + a + "</span>";
          });
          nowTimeEl.innerHTML = dateTime;
        }
      );

      qf(
        function () {
          this.initData();
        }.bind(this)
      );

      //报警弹窗
      (function reqAlarmsPopup() {
        that.pageApi.alterAbnormal("get", {}).then(res => {
          var list = res.body || [];
          qf.Async.loopList.call(
            this,
            list,
            function (key, item, next) {
              var alarmDict = [
                "",
                { name: "红色报警", color: "red" },
                { name: "橙色报警", color: "orange" },
                { name: "黄色报警", color: "#FFC900" },
                { name: "蓝色报警", color: "blue" }
              ];
              var alarmItem = alarmDict[item.alarmlevel];
              var name = item.equipname;
              var Notify = new qf.UI.Notify({
                type: "warning",
                duration: 10000,
                autoOpen: true,
                message:
                  "<div><div>" +
                  name +
                  ' <span style="color:' +
                  alarmItem.color +
                  '">' +
                  alarmItem.name +
                  "</span> " +
                  item.evalue +
                  "(" +
                  item.unit +
                  ")</div><div>时间：" +
                  item.time +
                  '</div><div class="btn-groub" style="margin-top:5px;display:flex;justify-content:center;"><button data-id="0">解除报警</button><button data-id="1" style="margin-left:30px;">关闭报警</button><button data-id="2" style="margin-left:30px;">不再提示</button></div></div>',
                onClose: function (v) {
                  setTimeout(function () {
                    next();
                  }, ~~(1 + Math.random() * 3) * 1000);
                },
                onClick: function (tag) {
                  if (tag.nodeName === "BUTTON") {
                    var self = this,
                      id = tag.dataset.id;
                    if (id === "0") {
                      // 解除报警
                      Notify.pause();
                      that.openRelieveAlarm(
                        { equipno: item.equipno },
                        function () {
                          Notify.close(true);
                          reqAlarmsPopup();
                        },
                        function () {
                          Notify.recover();
                        }
                      );
                    } else if (id === "1") {
                      // 关闭报警
                      Notify.pause();
                      qf.UI.popupLayer({
                        title: "提示",
                        className: "confirm",
                        closeBtnColor: "#eee",
                        width: "350px",
                        html:
                          "点击确认后，该条数据仍会处于报警状态，但是不会再提示，您确认要这么做吗？",
                        confirm: function (el) {
                          var parm = { id: item.id };
                          that.pageApi.alterAbnormal("put", parm).then(res => {
                            if (res.code === 200) {
                              Notify.close();
                            }
                          });
                        },
                        close: function () {
                          Notify.recover();
                        }
                      });
                    } else if (id === "2") {
                      // 不再提示
                      delete this.onClose;
                      Notify.close();
                    }
                  }
                }
              });
            },
            function () {
              setTimeout(function () {
                reqAlarmsPopup();
              }, 15000);
            }
          );
        });
      }.bind(this)());
    });
  },
  methods: {
    // 创建区域列表
    initData(list) {
      var self = this;
      this.pageApi.getViewsConfig().then(res => {
        if (res.code === 200) {
          var areas = res.body || [];
          for (var area of areas) {
            this.area[area.areaid] = area.views;
            this.area.views = this.area.views.concat(area.views);
          }

          // onload
          this.$nextTick(() => {
            new qf.Async.intervalLoop(600000, function () {
              // 加载数据
              self.loadViewData(self.area.views);
            });
          });
        }
      });

      // 标题
      reqApi.system.moduleConfig.reqScreenTitle("get").then(res => {
        var body = res.body || {};
        this.title = body.title || "";
      });
    },

    // 加载模块数据
    loadViewData(list) {
      //list = list.splice(0, 1);
      // 模块数据加工
      var viewDatas = {};
      for (var item of list) {
        var viewCode = "view_" + item.id;
        viewDatas[viewCode] = item;
        var view = (this.$refs[viewCode] || [])[0];
        var slider =
          view &&
          view.createViews(item).then(panels => {
            this.moduleInfoDistribute(panels);
          });
      }
    },

    // 模块信息分发
    moduleInfoDistribute(panels) {
      Tools.asyncLoop.call(
        this,
        panels,
        function (key, panel, next) {
          var item = panel.item,
            param = {
              range: item.range,
              subitem: item.subitem,
              values: item.values,
              deviceid: item.deviceid
            },
            type = panel.type;
          if (type === "t_1") {
            // 干滩
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {}
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_2") {
            // 库水位
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  plotOptions: {
                    column: {
                      grouping: false,
                      shadow: false,
                      borderWidth: 0
                    }
                  }
                }
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_3") {
            // 表面位移
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  xAxis: {
                    labels: {
                      rotation: 0 // 设置轴标签旋转角度
                    }
                  }
                },
                warningLine: "double"
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_4") {
            // 内部位移
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var chartType = param.values === "水平" ? "bar" : "column";
              var opts = {
                chartConfig: {
                  chart: {
                    type: chartType,
                    borderWidth: 0,
                    marginLeft: 55
                  }
                },
                warningLine: "double"
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_5") {
            // 浸润线
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  chart: { type: "bar", marginLeft: 55 },
                  xAxis: {
                    labels: {
                      rotation: 0 // 设置轴标签旋转角度
                    }
                  },
                  /* 
                plotOptions: {
                  series: {
                    stacking: 'normal'
                  }
                }, */
                  tooltip: {
                    formatter: function () {
                      return (
                        this.series.name +
                        "：" +
                        this.key +
                        "<br/>" +
                        Math.abs(this.y) +
                        " 米"
                      );
                    }
                  }
                },
                callback: function (key, extend, give) {
                  if (
                    key === "series" &&
                    give[key].constructor.name === "Array"
                  ) {
                    var mobj = extend[key],
                      asobj = give[key];
                    var arr = mobj[1].data,
                      len = arr.length;
                    for (var i = 0; i < len; i++) {
                      var val = arr[i];
                      arr[i] = 0 - val;
                    }
                  }
                }
              };
              Highchart.template.high(panel.el, data, opts);

              // 新增：给图表外围容器添加点击事件
              panel.el.addEventListener("click", () => {
                const deviceId = panel.item.deviceid;
                if (deviceId) {
                  window.open(
                    `/dataMonitor/jrx/history?deviceId=${deviceId}`,
                    "width=800,height=600"
                  );
                } else {
                  console.warn("未获取到有效的deviceId");
                }
              });
            });
          } else if (type === "t_6") {
            // 降雨量
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  xAxis: [
                    {
                      labels: {
                        rotation: -25 // 设置轴标签旋转角度
                      }
                    }
                  ],
                  series: [
                    {
                      type: "column",
                      color: "#1DF7F9",
                      borderRadius: ".05rem"
                    },
                    { type: "column", color: "#FAE728", borderRadius: ".05rem" }
                  ]
                }
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_7") {
            // 排流量
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  chart: {
                    type: "cylinder",
                    marginLeft: 10,
                    marginRight: -5,
                    options3d: {
                      enabled: true,
                      alpha: 10,
                      beta: 5, // 左右
                      depth: 50,
                      viewDistance: 0
                    }
                  },
                  plotOptions: {
                    series: {
                      depth: 25
                      //colorByPoint: true
                    }
                  },
                  series: [
                    { type: "column", color: "#00B2FC", showInLegend: false }
                    //{type:'spline', color:'#FBC000', showInLegend:false, dashStyle:'Dash', lineWidth:1,}
                  ]
                }
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_8") {
            // 水质
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              res = {
                body: [
                  {
                    unit: "ug/m³",
                    svalue: "12.00",
                    time: 1723248388000,
                    sensroname: "气象站东PM25",
                    sensorid: "37068520080801"
                  },
                  {
                    unit: "ug/m³",
                    svalue: "12.00",
                    time: 1723248388000,
                    sensroname: "气象站东PM10",
                    sensorid: "37068520080802"
                  },
                  {
                    unit: "db",
                    svalue: "52.20",
                    time: 1723248389000,
                    sensroname: "气象站东噪音",
                    sensorid: "37068520080803"
                  },
                  {
                    unit: "℃",
                    svalue: "29.25",
                    time: 1723248390000,
                    sensroname: "气象站东温度",
                    sensorid: "37068520080804"
                  },
                  {
                    unit: "%RH",
                    svalue: "82.81",
                    time: 1723248391000,
                    sensroname: "气象站东湿度",
                    sensorid: "37068520080805"
                  },
                  {
                    unit: "m/s",
                    svalue: "2.80",
                    time: 1723248393000,
                    sensroname: "气象站东风速",
                    sensorid: "37068520080807"
                  },
                  {
                    unit: "",
                    svalue: "西南",
                    time: 1723248392000,
                    sensroname: "气象站东风向",
                    sensorid: "37068520080808"
                  }
                ],
                code: 200,
                msg: "操作成功"
              };

              var types = [
                "PM25",
                "PM10",
                "噪音",
                "温度",
                "湿度",
                "风速",
                "风向"
              ];
              var data = res.body || {};
              var info = document.createElement("ul");
              info.className = "info";
              //var len = data.length > 5 ? 5 : data.length, li;
              // 2024/1/9(周二) 去掉5个的限制
              var len = data.length,
                li;
              for (var i = 0; i < len; i++) {
                var item = data[i];
                if (!(i % 2)) {
                  li = document.createElement("li");
                }
                var div = document.createElement("div");

                // 2024/8/10(周六) 为了缩减设备名称, 类型名称过长超出边界，添加对类型过滤
                var name = types.find(function (val, i) {
                  if (item.sensroname.includes(val)) {
                    return 1;
                  }
                });

                if (i % 2) {
                  //div.innerHTML = '<font>'+item.sensroname+'</font><span>'+item.svalue+'</span>';
                  div.innerHTML =
                    "<font>" + name + "</font><span>" + item.svalue + "</span>";
                } else {
                  // 左
                  //div.innerHTML = '<span>'+item.svalue+'</span><font>'+item.sensroname+'</font>';
                  div.innerHTML =
                    "<span>" + item.svalue + "</span><font>" + name + "</font>";
                }
                li.appendChild(div);
                info.appendChild(li);
              }
              panel.el.innerHTML = "";
              panel.el.appendChild(info);
            });
          } else if (type === "t_9") {
            // 渗流量
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  series: [
                    { type: "column", color: "#00B2FC" }
                    //{type:'spline', color:'#FBC000', dashStyle:'ShortDot',}
                  ]
                }
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_10") {
            // 设备信息
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              panel.info.sum = data.all;
              panel.info.online = data.online;
              panel.info.offline = data.unline;
              var opts = {
                chartConfig: {
                  chart: {
                    backgroundColor: "transparent",
                    marginBottom: null,
                    marginLeft: null
                  },
                  title: {
                    floating: true,
                    text: "总数<br/>" + data.all,
                    verticalAlign: "middle",
                    y: 22,
                    floating: true,
                    style: {
                      color: "#00f6ff"
                    }
                  },
                  tooltip: {
                    formatter: function (e) {
                      return this.key + "：" + this.y;
                    }
                  },
                  plotOptions: {
                    pie: {
                      allowPointSelect: true,
                      borderWidth: 0,
                      minSize: 130,
                      //size:200,
                      cursor: "pointer",
                      dataLabels: {
                        enabled: true,
                        distance: 10,
                        format: "<b>{point.name}</b>: {point.y}",
                        style: {
                          color: "black"
                        }
                      }
                    }
                  },
                  series: [
                    {
                      type: "pie",
                      innerSize: "70%",
                      name: "设备数量",
                      data: [
                        { name: "在线", y: data.online, color: "#48abe1" },
                        { name: "离线", y: data.unline, color: "#064f94" }
                      ]
                    }
                  ]
                },
                isSeriesData: true,
                type: item.type
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_11") {
            // 实时数据
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var datas = res.body || {},
                target = panel.el;
              var scrolling = target.parentNode;
              var dataList = [];
              for (var item of datas) {
                var data = item.data,
                  time = item.time;
                if (data) {
                  for (var kitem of item.keys) {
                    dataList.push({
                      name: item.name + " " + kitem.name,
                      value: data[kitem.key],
                      unit: item.eqdanwei,
                      time: time
                    });
                  }
                }
              }

              // 创建列表
              var frag = document.createDocumentFragment();
              var ul = document.createElement("ul");
              ul.calssName = "list";
              for (var item of dataList) {
                var li = document.createElement("li");
                li.innerHTML =
                  "<h5>" +
                  item.name +
                  "</h5><div><span>" +
                  item.value +
                  "</span><font>(" +
                  item.unit +
                  ")</font></div><font>" +
                  item.time +
                  "</font>";
                ul.appendChild(li);
              }
              target.firstElementChild.innerHTML = "";
              target.firstElementChild.appendChild(ul);
              qf.UI.scrollingPreview(scrolling);
            });
          } else if (type === "t_12") {
            // 报警信息
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var dataList = res.body || {},
                target = panel.el;
              var scrolling = target.parentNode;

              // 创建列表
              var frag = document.createDocumentFragment();
              var ul = document.createElement("ul");
              ul.calssName = "list";
              for (var item of dataList) {
                var li = document.createElement("li");
                var value = item.evalue + "(" + item.eqdanwei + ")";
                li.innerHTML =
                  '<h5><i class="level' +
                  item.alarmlevel +
                  '"></i>' +
                  item.equipname +
                  "</h5><span> " +
                  value +
                  "</span><font>" +
                  item.time +
                  "</font>";
                ul.appendChild(li);
              }
              target.firstElementChild.innerHTML = "";
              target.firstElementChild.appendChild(ul);

              qf.UI.scrollingPreview(scrolling);
            });
          } else if (type === "t_13") {
            // 实时天气
            var city = panel.item.city_weather || "weihai";
            var param = { c: "code", a: "getcode", id: 48, icon: 1, py: city };
            reqApi.getWeather(param).then(res => {
              var body = document.createElement("div");
              setTimeout(function () {
                body.innerHTML = res;
                var styles = body.querySelectorAll("link");
                for (var style of styles) {
                  body.removeChild(style);
                }
                var scripts = body.querySelectorAll("script");
                for (var script of scripts) {
                  script.parentNode.removeChild(script);
                }

                // 查看图片
                var img = body.querySelector("#day_1 .img").firstElementChild;
                img.src =
                  "http://plugin.tianqistatic.com/static/" +
                  img.src.split("static/")[1];

                // 修剪dom
                var mobile05 = body.querySelector("#mobile05");
                var mleft = mobile05.firstElementChild;
                var cityCtn = mleft.firstElementChild;
                var cityEl = document.createElement("font");
                cityEl.innerText =
                  "(" + cityCtn.firstElementChild.innerText + ")";
                mleft.nextElementSibling.firstElementChild.appendChild(cityEl);
                mobile05.removeChild(mleft);
                mobile05.removeChild(mobile05.lastElementChild);
                var childs = mobile05.children;
                for (var child of childs) {
                  child.innerHTML = child.firstElementChild.innerHTML;
                }
                panel.el.innerHTML =
                  '<div class="weather" style="padding-top:0.2rem">' +
                  body.innerHTML +
                  "</div>";
              }, 300);
            });
          } else if (type === "t_14") {
            // 视频监控
            param.id = item.id;
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var vparam = {
                id: data.v_id,
                appKey: data.v_appkey,
                appSecret: data.v_appsecret,
                name: data.v_name,
                channel: data.v_channel,
                remark: data.v_remark
              };
              panel.setData(vparam);
            });
          } else if (type === "t_15") {
            // 监测点
            var initModule = () => {
              reqApi.common.requstEdge("get", item.requrl, param).then(res => {
                var data = res.body || {};
                panel.setData(data, Tools, this.pageApi, initModule);
              });
            };
            initModule();
            /* new qf.Async.intervalLoop(30000, function(){
            initModule();
          }, function(){
            initModule();
          }) */
          } else if (type === "t_16") {
            // 外坡比
            reqApi.common.requstEdge("get", item.requrl, param).then(res => {
              var data = res.body || {};
              var opts = {
                chartConfig: {
                  plotOptions: {
                    column: {
                      grouping: false,
                      shadow: false,
                      borderWidth: 0
                    }
                  }
                }
              };
              Highchart.template.high(panel.el, data, opts);
            });
          } else if (type === "t_17") {
            // 浸润线剖面
            // reqApi.common.requstEdge("get", item.requrl, param).then(res => {
            //   var data = res.body || {};
            //   this.cuCharts(panel.el, data, {
            //     axisLineWidth: 2,
            //     axisColor: "pink"
            //   });
            // });
            // 浸润线剖面 - 替换为图片展示
            const imgId = `profile-img-${Date.now()}-${Math.random()
              .toString(36)
              .substr(2, 9)}`;
            const img = document.createElement("img");
            img.src = "/static/jrx.png";
            img.style.cssText =
              "width:95%;height:95%;object-fit:contain;cursor:pointer;margin: 10px 10px";
            img.addEventListener("click", () => {
              this.openImagePopup(imgId, img.src);
            });
            panel.el.innerHTML = "";
            panel.el.appendChild(img);
          }
          next();
        },
        function () { }
      );
    },
    // 点击图片方法
    openImagePopup(imgId, imgPath) {
      //路由跳转至/dataMonitor/jrx/history页面，另起页签
      window.open("/dataMonitor/jrx/history", "width=800,height=600");
    },
    cuCharts(ctn, data, opts) {
      //
      var cuCharts = function (ctn, data, opts) {
        var ctn = (this.ctn =
          typeof element === "string" ? document.getElementById(ctn) : ctn);
        if (!ctn)
          return console.log(
            "%c cuCharts Error Element is a invalid param! ",
            "color:red"
          );
        var self = this,
          setDpr = 1;
        var dpr = window.devicePixelRatio || qf.envir.dpr;
        self.dpr = dpr * setDpr;
        self.Cache = {};
        !ctn.style.position && (ctn.style.position = "relative");
        var canvas = (this.canvas = document.createElement("canvas"));
        canvas.style.cssText = "position:absolute;height:100%;width:100%;";
        this.ctx = canvas.getContext("2d");
        ctn.appendChild(canvas);
        var defaults = (this.defaults = {
          altitude: 1000,
          damHeight: data.dissect.height || 100,
          damWidth: data.dissect.width || 100,
          axisLineWidth: 6,
          axisColor: "red",
          margin: { top: 14, right: 0, bottom: 0, left: 18 }
        });
        var left = defaults.margin.left * this.dpr,
          top = defaults.margin.top * this.dpr,
          right = defaults.margin.right * this.dpr,
          bottom = defaults.margin.bottom * this.dpr;
        this.ladders = data.steps || [];
        this.devices = this.formatDeviceParam(data.devices);
        var ladderInfo = this.discernDamHeight(this.ladders);
        this.options = {
          damWidth: defaults.damWidth,
          damHeight: ladderInfo.damHeight,
          axisLineWidth: defaults.axisLineWidth || 6,
          stepAverageHeight: ladderInfo.averageHeight,
          initX: defaults.margin.left * dpr + defaults.axisLineWidth / 2,
          initY: defaults.margin.top * dpr,
          bottomDist: defaults.margin.bottom * dpr,
          rightDist: defaults.margin.right * dpr,
          waterArea: {
            startAngle: data.dissect.sdeg,
            radius: data.dissect.diameter
          },
          alarm: data.alarm,
          axisLineWidth: opts.axisLineWidth || defaults.axisLineWidth,
          axisColor: opts.axisColor || defaults.axisColor
        };
        this.init();
      };
      cuCharts.prototype = {
        init: function () {
          this.setModule();
          this.onresize();
        },
        drawAxis: function (color, damHeight) {
          var lw = this.options.axisLineWidth;
          var wHalf = lw / 2;
          var initX = this.options.initX;
          var endX = this.options.endX;
          var endY = this.options.endY;
          var axisYSX = initX - wHalf;
          var axisXEY = endY + lw;
          var axisYEY = endY + wHalf;
          this.drawLiner({
            sx: axisYSX,
            sy: 0,
            ex: axisYSX,
            ey: axisXEY,
            width: lw,
            color: color
          });
          var fontY = ~~(this.options.damPxHeight / 2 + this.options.initY);
          var fontSize = 12;
          var axisXText = "剖面高度" + ~~damHeight + "米";
          this.drawText({
            x: this.options.initY / 2 + 2,
            y: fontY,
            size: fontSize,
            width: fontSize * this.dpr,
            text: axisXText,
            color: "#fff",
            align: "center",
            vertical: "center"
          });
          this.drawLiner({
            sx: initX,
            sy: axisYEY,
            ex: endX,
            ey: axisYEY,
            width: lw,
            color: color
          });
        },
        drawSteps: function (ladders) {
          ladders = ladders || [0];
          var initX = this.options.initX,
            initY = this.options.initY;
          var cumulationX = initX,
            cumulationY = initY;
          var damLength = this.options.endX;
          var damDepth = this.options.endY;
          var pxRetioY = this.options.pxRetioY;
          var averageHeight = this.options.stepAverageHeight * pxRetioY;
          var damPxWidth = this.options.damPxWidth;
          var damPxHeight = this.options.damPxHeight;
          var len = ladders.length;
          var stepWidth = damPxWidth / (len + 0);
          var stepHeight = damPxHeight / (len + 0);
          var slopeRatio = damPxHeight / damPxWidth;
          var maxStepDepth = { ratio: slopeRatio };
          this.Cache.ladders = [];
          for (var i = 0; i < len; i++) {
            var item = ladders[i];
            var setWidth = item.width * this.dpr * this.options.pxRetioX;
            var setHeight = item.height * pxRetioY || averageHeight;
            var slope = item.slope || 0;
            var aCoord = this.byAngleAndHeightToCoord(slope, setHeight);
            var fEndX, fEndY;
            if (setWidth) {
              fEndX = cumulationX + setWidth;
              stepWidth =
                (damLength - (cumulationX + setWidth + aCoord.x * this.dpr)) /
                (len - (i + 1));
            } else {
              fEndX = cumulationX + (stepWidth - aCoord.x * this.dpr);
            }
            if (setHeight) {
              fEndY = cumulationY + setHeight;
              stepHeight =
                (damDepth - (cumulationY + setHeight)) / (len - (i + 1));
            } else {
              fEndY = cumulationY + stepHeight;
            }
            var lEndX = fEndX + aCoord.x * this.dpr,
              lEndY = fEndY + aCoord.y * this.dpr;
            var stepDepthRatio = (damDepth - ~~lEndY) / (damLength - lEndX);
            if (
              stepDepthRatio &&
              stepDepthRatio < maxStepDepth.ratio &&
              i < len - 1
            ) {
              maxStepDepth = { ratio: stepDepthRatio, x: lEndX, y: lEndY };
            }
            this.drawLiner({
              sx: cumulationX,
              sy: cumulationY,
              ex: fEndX,
              ey: cumulationY,
              width: 2,
              color: "#8b8b8b"
            });
            this.drawLiner({
              sx: fEndX,
              sy: cumulationY,
              ex: lEndX,
              ey: lEndY,
              width: 2,
              color: "#8b8b8b"
            });
            this.Cache.ladders[i] = {
              sx: cumulationX,
              sy: cumulationY,
              ex: fEndX,
              ey: cumulationY,
              slope: slope,
              slopeX: lEndX,
              slopeY: lEndY,
              xy: aCoord.xy
            };
            cumulationX = lEndX;
            cumulationY = lEndY;
          }
          this.drawLiner({
            sx: cumulationX,
            sy: cumulationY,
            ex: damLength,
            ey: damDepth,
            width: 2,
            color: "#8b8b8b"
          });
          var damHeight = (cumulationY - this.options.initY) / pxRetioY;
          return (maxStepDepth.damHeight = damHeight), maxStepDepth;
        },
        drawDevice: function (list) {
          var lineW = 4 * this.dpr,
            deviceW = 6 * this.dpr,
            deviceH = 3 * this.dpr;
          var initX = this.options.initX;
          var endX = this.options.endX;
          var endY = this.options.endY;
          var ladders = this.Cache.ladders || [];
          var fontSize = 11;
          var fontTopDev = fontSize * this.dpr + 3;
          this.options.deviceCoords = [];
          for (var device of list) {
            var holeX = ~~(endX - device.x * this.options.pxRetioX);
            var depthText = "埋深" + device.depth + "米";
            var holeDistY = device.holeDepth * this.options.pxRetioY;
            var deviceY = device.value * this.options.pxRetioY;
            var ladderSY = this.xPixelToStepsYPixel(holeX);
            this.drawText({
              x: holeX,
              y: ladderSY - fontTopDev,
              size: fontSize,
              text: depthText,
              color: "red",
              align: "center"
            });
            var holeEndY = ladderSY + holeDistY;
            holeEndY = holeEndY > endY ? endY : holeEndY;
            this.drawLiner({
              sx: holeX,
              sy: ladderSY,
              ex: holeX,
              ey: holeEndY,
              width: lineW,
              color: "grey"
            });
            var deviceLY = ladderSY + deviceY;
            var deviceEY = deviceLY + deviceH / 2;
            var deviceSY = deviceEY - deviceH;
            this.drawLiner({
              sx: holeX,
              sy: deviceSY,
              ex: holeX,
              ey: deviceEY,
              width: deviceW,
              color: "#3403CB"
            });
            this.options.deviceCoords.push({
              x: holeX,
              y: deviceLY,
              stepY: ladderSY
            });
            var valFont = 11;
            var valueSY = ~~(deviceSY - valFont * this.dpr - 6);
            var text = "水位值" + device.waterValue + "米";
            this.drawText({
              x: holeX,
              y: valueSY,
              size: valFont,
              text: text,
              color: "white",
              align: "center"
            });
          }
        },
        drawAlarmLine: function (alarms, Steps) {
          var alarmValues = alarms.value;
          var alarmLevel = alarms.alarmLevel;
          var deviceCoords = this.options.deviceCoords || [];
          var deviceSX = deviceCoords[0].x;
          var deviceSY = deviceCoords[0].y;
          var initX = this.options.initX;
          var initY = this.options.initY;
          var endY = this.options.endY;
          var endX = this.options.endX;
          var alarmLevelNum =
            ["red", "orange", "yellow", "blue"] || Object.keys(alarmValues);
          var alarmLine = {};
          var level = (~~alarmLevel || alarmLevelNum.length + 1) - 1;
          var nearLevel = level ? level - 1 : level;
          var alarm = alarmLevelNum[level];
          var nearAlarm = alarmLevelNum[nearLevel];
          alarmLine[nearAlarm] = alarmValues[nearAlarm];
          if (alarm) {
            alarmLine[alarm] = alarmValues[alarm];
          }
          var alarmRealParam =
            this.getAlarmRealParam(Object.values(alarmLine)) || Steps.ratio;
          var deviceSlopeRatio = alarmRealParam.ratio;
          for (var key in alarmLine) {
            var value = alarmValues[key];
            if (key) {
              var ladderSY = this.xPixelToStepsYPixel(deviceSX) - initX + 6;
              var lineSY =
                value * this.options.pxRetioY +
                ladderSY -
                (deviceSX - initX) * deviceSlopeRatio;
              var lineEX = (endY - lineSY) / deviceSlopeRatio;
              this.drawLiner({
                sx: initX,
                sy: lineSY + initY,
                ex: lineEX,
                ey: endY,
                width: 2,
                color: key
              });
            }
          }
        },
        getCirHeightDev: function (r, x) {
          return r - Math.sqrt(Math.pow(r, 2) - Math.pow(x, 2));
        },
        drawWaterArea: function (depth) {
          depth = 100;
          var startAngle = this.options.waterArea.startAngle;
          var radiusMultiple = this.options.waterArea.radius;
          var angleRatio = 90 / 0.5;
          var initArc = startAngle / angleRatio;
          var ctx = this.ctx,
            initX = this.options.initX;
          var arcOrigin = 1.5,
            arcStart = arcOrigin + initArc;
          var sAngle = (arcStart - arcOrigin) * angleRatio;
          var r1 = this.options["damPxWidth"] * radiusMultiple;
          var waterApexToAxisXDist = Math.sin(sAngle * 0.017453293) * r1;
          var sAngleToTopSpotDist = r1 - Math.cos(sAngle * 0.017453293) * r1;
          var depth =
            (depth || 30) * this.options.pxRetioY + sAngleToTopSpotDist;
          var firstDeviceX = this.devices[0].x * this.options.pxRetioX;
          var ladderSY =
            this.xPixelToStepsYPixel(firstDeviceX + initX) - initX + 6;
          var deviceToAxisXDist = firstDeviceX + waterApexToAxisXDist;
          var deviceToAxisYDist = Math.sqrt(
            r1 * r1 - deviceToAxisXDist * deviceToAxisXDist
          );
          var deviceAreaToApexDev =
            r1 - deviceToAxisYDist - sAngleToTopSpotDist - ladderSY;
          var firstDeviceY =
            this.options.damPxHeight -
            this.devices[0].value * this.options.pxRetioY;
          firstDeviceY += deviceAreaToApexDev;
          var ry = r1 + this.options.endY - sAngleToTopSpotDist - firstDeviceY;
          var lineToY = r1 - sAngleToTopSpotDist - firstDeviceY;
          var eAngle = Math.acos(lineToY / r1) / 0.017453293;
          var arcEnd = eAngle / angleRatio + arcOrigin;
          ctx.beginPath();
          ctx.arc(
            initX - waterApexToAxisXDist,
            ry,
            r1,
            arcStart * Math.PI,
            arcEnd * Math.PI,
            false
          );
          ctx.lineTo(initX, ry - lineToY);
          ctx.fillStyle = "#00A2E8";
          ctx.fill();
        },
        byAngleAndHeightToCoord: function (angle, height) {
          var devX = Math.tan(angle * 0.017453293) * height;
          var xy = height / Math.cos(angle * 0.017453293);
          var devY = height - devX;
          var yRatio = height / devX;
          var x = 0,
            y = 0;
          if (angle > 50) {
            (x = height), (y = devY * yRatio);
          } else {
            (x = devX), (y = 0);
          }
          return { x: x, y: y, xy: xy };
        },
        discernDamHeight(list) {
          var not = 0,
            set = 0,
            sum = 0;
          for (var item of list) {
            var height = item.height;
            height ? (set++, (sum += height)) : not++;
          }
          var damHeight = not ? this.defaults.damHeight : sum;
          var averageHeight = (damHeight - sum) / not;
          return { averageHeight: averageHeight, damHeight: damHeight };
        },
        setModule: function () {
          this.ctx.clearRect(0, 0, this.SumWidth, this.SumHeight);
          var canvas = this.canvas;
          var SumWidth = (this.SumWidth =
            this.ctn.clientWidth * this.dpr - this.ctn.clientLeft - 0);
          var SumHeight = (this.SumHeight =
            this.ctn.clientHeight * this.dpr - this.ctn.clientTop - 0);
          canvas.width = SumWidth * this.dpr;
          canvas.height = SumHeight * this.dpr;
          canvas.style.cssText =
            "position:absolute;top:0;left:0;height:" +
            SumHeight +
            "px;width:" +
            SumWidth +
            "px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;";
          var top = this.options.initY,
            left = this.options.initX,
            bottom = this.options.bottomDist,
            right = this.options.rightDist;
          var damPxWidth = SumWidth - (right + left),
            damPxHeight =
              SumHeight - (bottom + top + this.options.axisLineWidth),
            endX = SumWidth - right,
            endY = SumHeight - bottom - this.options.axisLineWidth;
          this.options["endX"] = endX;
          this.options["endY"] = endY;
          this.options["damPxWidth"] = damPxWidth;
          this.options["damPxHeight"] = damPxHeight;
          this.options["pxRetioX"] = damPxWidth / this.defaults.damWidth;
          this.options["pxRetioY"] = damPxHeight / this.options.damHeight;
          this.options["HWRation"] = (endY - top) / (endX - left);
          this.drawChart();
        },
        formatDeviceParam: function (devices) {
          var devices = devices || [];
          var arr = [];
          for (var item of devices) {
            arr.push({
              x: item.jrx_coord_x,
              holeDepth: item.jrx_trepanning,
              value: item.depth,
              depth: item.jrx_burial,
              waterValue: item.stage
            });
          }
          return arr;
        },
        getAlarmRealParam: function (aValues) {
          var aval = aValues[0];
          var coords = this.options.deviceCoords || [];
          var valY = aval * this.options.pxRetioY;
          var sy = valY + coords[0].stepY,
            sx = coords[0].x,
            ey = 0,
            ex = 0;
          var len = coords.length;
          for (var i = 1; i < len; i++) {
            var item = coords[i];
            (ey = valY + item.stepY), (ex = item.x);
          }
          return { ratio: (ey - sy) / (ex - sx), sy: sy, ey: ey };
        },
        drawChart: function () {
          var Steps = this.drawSteps(this.ladders);
          this.drawAxis(this.options.axisColor, Steps.damHeight);
          var depth = 55;
          this.drawWaterArea(depth);
          this.drawDevice(this.devices);
          this.drawAlarmLine(this.options.alarm, Steps);
        },
        onresize: function () {
          qf.resize(() => {
            this.setModule();
          });
        },
        updateData: function (data) {
          data = data || {};
          this.stations = data.stations || this.stations;
          this.points = data.points || this.points;
          this.draw(this.cacheX + this.destX, true);
        },
        drawLiner: function (o) {
          var ctx = this.ctx;
          ctx.beginPath();
          ctx.moveTo(o.sx, o.sy);
          ctx.lineTo(o.ex, o.ey);
          ctx.lineWidth = o.width;
          ctx.strokeStyle = o.color;
          ctx.stroke();
        },
        drawText: function (o) {
          var ctx = this.ctx;
          var fontSize = (o.size || 14) * this.dpr;
          var text = o.text || "";
          var textWidth = this.getTextWidth(text, fontSize);
          var width = o.width || textWidth;
          var align = o.align || "normal";
          ctx.font =
            "normal " +
            fontSize +
            "px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";
          var rows = [];
          if (width && ~~width < textWidth) {
            var str = "",
              texts = text.split("");
            for (var word of texts) {
              var testStr = str + word;
              var testWidth = ctx.measureText(testStr).width;
              if (testWidth > width) {
                rows.push(str);
                str = word;
              } else {
                if (testWidth === width) {
                  rows.push(testStr);
                  str = "";
                } else {
                  str = testStr;
                }
              }
            }
            str && rows.push(str);
          } else {
            rows = text.split(/\r\n|\n/g);
          }
          var rlen = rows.length,
            sumHeight = (rlen + 1) * fontSize;
          var x = o.x;
          var y = o.vertical === "center" ? o.y - sumHeight / 2 : o.y;
          var color = o.randomColor ? this.getRandomColor() : o.color || "red";
          var lsx = x,
            lsy = y;
          for (var b = 0; b < rlen; b++) {
            if (align === "center") {
              var textW = this.getTextWidth(rows[b], fontSize);
              lsx = x - textW / 2;
            }
            lsy = (b + 1) * fontSize;
            ctx.lineHeight = 1;
            ctx.fillStyle = color;
            ctx.fillText(rows[b], ~~lsx + 0.5, y + ~~lsy + 0.5);
          }
        },
        getTextWidth: function (text, fontSize) {
          return (
            (this.ctx.measureText(text).width / parseInt(this.ctx.font)) *
            fontSize
          );
        },
        drawImg: function (img, x, y, w, h) {
          x = x - w / 2;
          y = y - h;
          ctx.drawImage(img, x, y, w, h);
        },
        getRandomColor: function () {
          return "#" + Math.floor(Math.random() * 16777215).toString(16);
        },
        getEventTarget: function (x, y) {
          if (y > bottomReferY - imgA.height - 1 && y < bottomReferY + 1) {
            var arr = this.points;
            var i = arr.length - 1,
              obj,
              halfW = imgA.width / 2 - 1;
            while ((obj = arr[i])) {
              var ix = this.getDrawDoord(obj.x * 1);
              if (Math.abs(ix - x) < halfW) {
                return obj;
              }
              i--;
            }
          }
          if (y > bottomReferY - imgB.height - 1 && y < bottomReferY + 1) {
            var arr = this.stations;
            var i = arr.length - 1,
              obj,
              halfW = imgA.width / 2 - 1;
            while ((obj = arr[i])) {
              var ix = this.getDrawDoord(obj.x * 1);
              if (Math.abs(ix - x) < halfW) {
                return obj;
              }
              i--;
            }
          }
        },
        xPixelToStepsYPixel: function (x) {
          var ladders = this.Cache.ladders || [],
            ladderSY = 0;
          for (var ladder of ladders) {
            if (x >= ladder.sx && x < ladder.slopeX) {
              if (x < ladder.ex) {
                ladderSY = ladder.sy;
              } else {
                var slopeWidth = ladder.slopeX - ladder.ex;
                var slopeHeight = ladder.slopeY - ladder.ey;
                ladderSY =
                  (x - ladder.ex) * (slopeHeight / slopeWidth) + ladder.ey;
              }
            }
          }
          return ladderSY;
        }
      };
      return new cuCharts(ctn, data, opts);
    },

    mapOnload() { },

    openRelieveAlarm(params, fn, close) {
      var self = this;
      qf.UI.popupLayer({
        title: "解除报警",
        className: "screenAlart",
        closeBtnColor: "#eee",
        html:
          '<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>',
        confirm: function (el) {
          var inputs = el.querySelectorAll("input");
          for (var el of inputs) {
            var key = el.dataset.name;
            var val = el.value;
            if (key === "jchours") {
              val = parseInt(val) || 12;
            } else {
              val = val || "默认原因！";
            }
            params[key] = val;
          }

          // 解除
          self.pageApi.relieveAlarm(params).then(res => {
            //if(res.code === 200){};
            fn && fn();
          });
        },
        close: function () {
          close && close();
        }
      });
    }
  }
};
</script>

<style lang="scss" scope>
@font-face {
  font-family: "diget year";
  src: url("~@/assets/fonts/DS-Digital.ttf");
}

.font_digit {
  font-family: diget year;
}

.Screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #00164e;

  .a_0,
  .b_0 {
    position: absolute;
  }

  >.actv {
    display: block;
  }

  .a_0 {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: no-repeat center center url("~@/assets/images/layout/s_bg_min.png");
    background-size: 100% 100%;
  }

  .b_0 {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 0.65rem;
    background-color: rgba(0, 0, 0, 0.15);

    header {
      position: absolute;
      top: 0;
      left: 0;
      height: 0.64rem;
      width: 100%;
      z-index: 5;
      display: flex;
      user-select: none;

      .b1_a {
        position: absolute;
        top: 0;
        left: 0;
        height: 0.64rem;
        width: 100%;
        background: no-repeat top left url("~@/assets/images/layout/s_hd_min.png");
        background-size: 100% auto;
        display: flex;
        justify-content: center;
        align-items: center;

        h2 {
          font-size: 0.32rem;
          line-height: 1;
          margin-top: -0.04rem;
          background-image: -webkit-linear-gradient(top,
              #fff,
              #d5f3fe,
              #7adbfe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: 0.02rem;
        }

        .b1_a1 {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 3.5rem;
          display: flex;
          align-items: center;
          justify-content: left;

          .font_digit {
            margin-right: 0.2rem;
            font-size: 0.28rem;
            color: #2ef4ee;

            span {
              font-family: serif;
              font-size: 0.24rem;
              margin: 0 0.05rem;
            }
          }
        }

        .b1_a2 {
          position: absolute;
          top: 0;
          left: 0.2rem;
          height: 100%;
          display: flex;
          align-items: center;

          &:before {
            content: "";
            display: block;
            height: 0.35rem;
            width: 1.58rem;
            background: no-repeat top left url("~@/assets/images/logo_ks.png");
            background-size: 100% auto;
          }
        }
      }
    }

    .b_2 {
      flex: 1;
      position: relative;
      margin: 0 0.08rem;

      .b_2a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        .b2_a {
          flex: 1;
          display: flex;

          .b2_a1,
          .b2_a3 {
            flex: 1;

            >div {
              //background-color:pink;
              flex: 1;
            }
          }

          .b2_a1,
          .b2_a2,
          .b2_a3 {
            display: flex;
            flex-direction: column;

            >div {
              margin-bottom: 0.08rem;
            }
          }

          .b2_a2 {
            width: 8.84rem;
            margin: 0 0.08rem;

            >div:first-child {
              height: 7.52rem;
              /* background-color:yellow; */
              box-shadow: inset 0rem 0rem 0.15rem 0.24rem rgba(2, 43, 80, 0.8);
            }

            >div:last-child {
              //height:2.46rem;
              flex: 1;
              display: flex;

              //height:22.777vh;
              >div {
                flex: 1;
                margin-right: 0.08rem;

                //background-color:pink;
                &:last-child {
                  margin-right: 0;
                }
              }
            }

            .b2a2_a {
              flex: 1;
              position: relative;

              /* background:no-repeat center center url('~@/assets/images/layout/map_min.png');background-size:100% auto; */
              >div {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
              }

              >div.show {
                display: block;
              }

              >div:first-child {}
            }
          }

          .b2_a3 {}

          .view-item {
            border: 1px solid #004a8b;
            position: relative;
            box-shadow: inset 0rem 0rem 0.15rem 0.04rem rgba(10, 106, 180, 0.8);

            &:before,
            &:after,
            .view-flx:before,
            .view-flx:after {
              content: "";
              position: absolute;
              height: 0.1rem;
              width: 0.1rem;
              z-index: 1;
              border-style: solid;
              border-color: #02f6ff;
            }

            &:before,
            &:after {
              top: -1px;
            }

            &:before {
              left: -1px;
              border-width: 0.02rem 0 0 0.02rem;
            }

            &:after {
              right: -1px;
              border-width: 0.02rem 0.02rem 0 0;
            }

            .view-flx {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              background-color: rgb(1, 19, 70, 0.3);

              &:before,
              &:after {
                bottom: -1px;
              }

              &:before {
                left: -1px;
                border-width: 0 0 0.02rem 0.02rem;
              }

              &:after {
                right: -1px;
                border-width: 0 0.02rem 0.02rem 0;
              }
            }
          }
        }

        .weather {
          font-size: 11px;

          .mleft {
            display: none;
          }

          .wtpath {
            display: none;
          }

          .mright {
            flex: 1;
            text-align: center;
          }

          img {
            display: block;
            width: 2vw !important;
            height: auto !important;
            margin: 0 auto;
          }

          ul {
            margin: 5px 0;
            color: #d0d2ff;
          }

          #mobile05 {
            display: flex;
            position: relative;
            padding-top: 5vh !important;
          }

          #mobile05>div:last-child {
            display: none;
          }

          #mright_1 {
            position: absolute;
            top: 0;
            left: 0;
            height: auto;
            width: 100%;
            display: flex;

            ul {
              margin: 0;
              color: #03d3fe;
            }

            .wt {
              display: flex;
              align-items: center;
              margin-left: 140px;
            }

            .day {
              display: none;
            }

            span:last-child {
              display: block;
              position: absolute;
              top: 4px;
              left: 0px;
              height: auto;
              font-size: 26px;
            }

            font {
              margin: 6px 0 0 10px;
              color: #35ecfa;
            }
          }
        }
      }
    }
  }
}
</style>
