<template>
  <div class="pd10">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="终端等级:" v-show="zdzs">
        <el-select v-model="teriminal" placeholder="请选择终端等级">
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="zdzs">
        <timepicker
          @querfromdata="querfromdata"
          :interval="interval"
          :falg="falg"
        ></timepicker>
      </el-form-item>
      <el-form-item v-show="zdxq" style="float: right">
        <el-button type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
    <!--内容区-->
    <el-row v-show="zdzs">
      <el-col :span="18">
        <div id="error" :style="'width:100%;height:' + vhh"></div>
      </el-col>
      <el-col :span="6">
        <el-table
          stripe
          :data="tableData"
          border
          style="width: 100%"
          header-cell-class-name="table_header"
          highlight-current-row
          :height="vh"
        >
          <el-table-column
            align="center"
            prop="time"
            label="时间"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="data"
            label="终端异常个数"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="deialData(scope.row)"
                >终端详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row v-show="zdxq">
      <el-table
        stripe
        :data="tableData2"
        header-cell-class-name="table_header"
        style="width: 100%"
        row-key="id"
        id="rebateSetTable"
        border
        highlight-current-row
        default-expand-all
        :height="vh"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="台账信息"></el-table-column>
        <el-table-column align="center" prop="sjwzx" label="数据完整性(%)">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.sjwzx >= 90 &&
                scope.row.sjwzx !== 3.14159 &&
                scope.row.sjwzx !== -1 &&
                scope.row.level == 5
              "
              style="color: #339966"
              >{{ scope.row.sjwzx }}</span
            >
            <span
              v-if="
                scope.row.sjwzx < 60 &&
                scope.row.sjwzx !== 3.14159 &&
                scope.row.sjwzx !== -1 &&
                scope.row.level == 5
              "
              style="color: #cc0000"
              >{{ scope.row.sjwzx }}</span
            >
            <span
              v-if="
                scope.row.sjwzx < 90 &&
                scope.row.sjwzx >= 60 &&
                scope.row.sjwzx !== 3.14159 &&
                scope.row.sjwzx !== -1 &&
                scope.row.level == 5
              "
              style="color: #ffcc33"
              >{{ scope.row.sjwzx }}</span
            >
            <span
              v-if="scope.row.sjwzx === 3.14159 && scope.row.level == 5"
              style="color: #ccc"
              >暂无数据</span
            >
            <span
              v-if="scope.row.sjwzx === -1 && scope.row.level == 5"
              style="background: #ccc; color: #fff"
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="txzd"
          label="通讯中断(次)"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="zdgj"
          label="终端告警(次)"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="zdll"
          label="终端流量(%)"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.level == 5"
              type="primary"
              size="mini"
              @click="xiangqing(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- <el-table :data="tableData3" border style="width: 100%"  
                            highlight-current-row
                             height="45vh"
                            :header-cell-style="{
                            height:'25px',
                            top:'0px',
                            padding:'0px'
                            }"
                            :row-style="{height:'25px'}" 
                            :cell-style="{padding:'2px'}"> 
                        <el-table-column align="center" prop="time" label="终端基础信息" ></el-table-column>
                        <el-table-column align="center" prop="data" label="数据完整性" ></el-table-column>
                        <el-table-column align="center" prop="data" label="终端通讯信息" ></el-table-column>
                        <el-table-column align="center" prop="data" label="终端告警信息" ></el-table-column>
                        <el-table-column align="center" prop="data" label="终端流量信息" ></el-table-column>
                   </el-table> -->
        <el-collapse v-model="activeName" accordion>
          <!-- <el-button type="primary" circle>1</el-button> -->
          <el-collapse-item title="终端基础信息" name="1">
            <div>
              包头 , 0.38kV华电内蒙古能源有限公司土默特发电分公司 , NPQS-581-3;
            </div>
          </el-collapse-item>
          <el-collapse-item title="数据完整性" name="2">
            <div>数据完整性 : [合格 ]</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="终端通讯信息" name="3">
            <div>[暂无通讯中断信息]</div>
            <div>
              清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
            </div>
            <div>
              帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
            </div>
          </el-collapse-item>
          <el-collapse-item title="终端告警信息" name="4">
            <div>NPQS-581-3告警1次,具体如下所示:</div>
            <div>
              2022-05-12 23:55:57 装置名称:NPQS-581-3
              Mac地址:00-B7-8D-00-FB-6D所属的装置型号：NPQS-580未在数据库中找到！
            </div>
          </el-collapse-item>
          <el-collapse-item title="终端流量信息" name="5">
            <div>NPQS-581-3终端流量已使用 5.38 %</div>
            <div>
              结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
            </div>
          </el-collapse-item>
        </el-collapse>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
  components: {
    timepicker,
  },
  data() {
    return {
      vh: "",
      formInline: {},
      interval: 3,
      height: "",
      eheight: "",
      activeName: "1",
      zdzs: true,
      zdxq: false,
      tableData: [
        {
          time: "1号",
          data: 268,
        },
        {
          time: "2号",
          data: 268,
        },
        {
          time: "3号",
          data: 268,
        },
        {
          time: "4号",
          data: 268,
        },
        {
          time: "5号",
          data: 268,
        },
        {
          time: "6号",
          data: 268,
        },
        {
          time: "7号",
          data: 268,
        },
        {
          time: "8号",
          data: 268,
        },
        {
          time: "9号",
          data: 268,
        },
        {
          time: "10号",
          data: 268,
        },
        {
          time: "11号",
          data: 268,
        },
        {
          time: "12号",
          data: 268,
        },
        {
          time: "13号",
          data: 268,
        },
        {
          time: "14号",
          data: 268,
        },
        {
          time: "15号",
          data: 268,
        },
        {
          time: "16号",
          data: 268,
        },
        {
          time: "17号",
          data: 268,
        },
        {
          time: "18号",
          data: 268,
        },
        {
          time: "19号",
          data: 268,
        },
        {
          time: "20号",
          data: 268,
        },
        {
          time: "21号",
          data: 268,
        },
        {
          time: "22号",
          data: 268,
        },
        {
          time: "23号",
          data: 268,
        },
        {
          time: "24号",
          data: 268,
        },
        {
          time: "25号",
          data: 268,
        },
        {
          time: "26号",
          data: 268,
        },
        {
          time: "27号",
          data: 268,
        },
        {
          time: "28号",
          data: 268,
        },
        {
          time: "29号",
          data: 268,
        },
        {
          time: "30号",
          data: 268,
        },
        {
          time: "31号",
          data: 268,
        },
      ],
      tableData2: [
        {
          id: 1,
          level: 1,
          name: "在线项目",
          sjwzx: "",
          txzd: "",
          zdgj: "",
          zdll: "",
          children: [
            {
              id: 2,
              level: 2,
              name: "南京数据中心",
              sjwzx: "",
              txzd: "",
              zdgj: "",
              zdll: "",
              children: [
                {
                  id: 3,
                  level: 3,
                  name: "南京灿能电力公司",
                  sjwzx: "",
                  txzd: "",
                  zdgj: "",
                  zdll: "",
                  children: [
                    {
                      id: 4,
                      level: 4,
                      name: "软件研发部",
                      sjwzx: "",
                      txzd: "",
                      zdgj: "",
                      zdll: "",
                      children: [
                        {
                          id: 41,
                          level: 5,
                          name: "终端1",
                          sjwzx: 76,
                          txzd: 23,
                          zdgj: 56,
                          zdll: 156,
                          children: [],
                        },
                        {
                          id: 42,
                          level: 5,
                          name: "终端2",
                          sjwzx: 58,
                          txzd: 35,
                          zdgj: 65,
                          zdll: 43,
                          children: [],
                        },
                      ],
                    },
                    {
                      id: 5,
                      level: 4,
                      name: "数据中心",
                      sjwzx: "",
                      txzd: "",
                      zdgj: "",
                      zdll: "",
                      children: [
                        {
                          id: 51,
                          level: 5,
                          name: "终端3",
                          sjwzx: 90,
                          txzd: 343,
                          zdgj: 22,
                          zdll: 322,
                          children: [],
                        },
                        {
                          id: 52,
                          level: 5,
                          name: "终端3",
                          sjwzx: 88,
                          txzd: 332,
                          zdgj: 233,
                          zdll: 146,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      tableData3: [],
      title: "",
      dialogVisible: false,
    };
  },
  created() {},
  mounted() {
    this.device = window.devicePixelRatio;

    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.$nextTick(() => {
      this.initData();
    });

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 55;
    this.vhh = window.sessionStorage.getItem("appheight") - 55 + "px";
          
        },
    initData() {
      const echarts = require("echarts");
      let myChartes = echarts.init(document.getElementById("error"));
      var option = {
        //backgroundColor: '#151F2A',
        title: {
          text: "异常终端个数统计",
          textStyle: {
            align: "center",
            color: "#000",
            fontSize: 20,
          },
          top: "0%",
          left: "40%",
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          data: [
            "1号",
            "2号",
            "3号",
            "4号",
            "5号",
            "6号",
            "7号",
            "8号",
            "9号",
            "10号",
            "11号",
            "12号",
            "13号",
            "14号",
            "15号",
            "16号",
            "17号",
            "18号",
            "19号",
            "20号",
            "21号",
            "22号",
            "23号",
            "24号",
            "25号",
            "26号",
            "27号",
            "28号",
            "29号",
            "30号",
            "31号",
          ],
          type: "category",
        },
        yAxis: {
          axisLabel: {
            color: "#000",
            fontSize: 14,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          name: "单位(个)",
        },
        dataZoom: [
          {
            type: "inside",
            height: "5%",
            start: 0,
            end: 100,
          },

          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            data: [
              353, 66, 112, 270, 315, 418, 500, 353, 66, 112, 270, 315, 418,
              500, 353, 66, 112, 270, 315, 418, 500, 353, 66, 112, 270, 315,
              418, 500, 353, 66, 112, 270, 315, 418, 500,
            ],
            type: "bar",
            barMaxWidth: "auto",
            //  barWidth: 25,
            itemStyle: {
              color: "#FFCC66",
            },
            label: {
              show: true,
              // position: 'top',
              // distance: 10,
              // color: '#fff'
            },
          },
        ],
      };
      myChartes.clear();
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setInterval(() => {
        myChartes.resize();
      }, 500);
      window.addEventListener("resize", function () {
        myChartes.resize();
      });
    },
    //终端详情触发事件
    deialData(row) {
      this.zdzs = false;
      this.zdxq = true;
      //this.dialogVisible = true
    },
    //关闭事件
    handleClose() {
      this.dialogVisible = false;
    },
    //返回
    back() {
      if (this.zdzs) {
        this.zdzs = false;
        this.zdxq = true;
      } else {
        this.zdzs = true;
        this.zdxq = false;
        this.$nextTick(() => {
          this.initData();
        });
      }
    },
    //详情
    xiangqing(row) {
      this.title = row.name + "----异常终端详情";
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>