<template>
  <div style="padding: 0.5% 0.5%">
    <!--查询条件-->
    <el-row>
      <el-col :span="4">
        <span style="font-weight: ; font-size: 14px">统计类型:</span>
        <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-col>
      <el-col :span="18">
        <timepicker
          @querfromdata="querfromdata"
          :interval="interval"
          :falg="falg"
        ></timepicker>
      </el-col>
    </el-row>
    <!--内容区-->
    <el-row style="margin-top: 0.5%">
      <!-- <el-col :span="24"> -->
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        row-key="id"
        id="rebateSetTable"
        border
        highlight-current-row
        default-expand-all
        :height="height"
        :header-cell-style="{
          height: '25px',
          top: '0px',
          padding: '0px',
        }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="统计方式"></el-table-column>
        <el-table-column align="center" prop="zdzt" label="终端状态">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.zdzt == 1 &&
                (scope.row.level == 4 || scope.row.level == 5)
              "
              style="color: green"
              >正常</span
            >
            <span
              v-if="
                scope.row.zdzt == 0 &&
                (scope.row.level == 4 || scope.row.level == 5)
              "
              style="color: red"
              >中断</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="txzt" label="通讯状态">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.txzt == 1 &&
                (scope.row.level == 4 || scope.row.level == 5)
              "
              style="color: green"
              >正常</span
            >
            <span
              v-if="
                scope.row.txzt == 0 &&
                (scope.row.level == 4 || scope.row.level == 5)
              "
              style="color: red"
              >中断</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zxsjsj"
          label="最新数据时间"
        ></el-table-column>
        <el-table-column align="center" prop="onlinerate" label="在线率">
          <template slot-scope="scope">
            <el-tag
              @click="chufazxl(scope.row)"
              v-if="
                scope.row.onlinerate >= 90 &&
                scope.row.onlinerate !== 3.14159 &&
                scope.row.onlinerate !== -1 &&
                (scope.row.level == 5 || scope.row.level == 4)
              "
              style="background: #339966; color: #fff"
              >{{ scope.row.onlinerate }}</el-tag
            >
            <el-tag
              @click="chufazxl(scope.row)"
              v-if="
                scope.row.onlinerate < 60 &&
                scope.row.onlinerate !== 3.14159 &&
                scope.row.onlinerate !== -1 &&
                (scope.row.level == 5 || scope.row.level == 4)
              "
              style="background: #cc0000; color: #fff"
              >{{ scope.row.onlinerate }}</el-tag
            >
            <el-tag
              @click="chufazxl(scope.row)"
              v-if="
                scope.row.onlinerate < 90 &&
                scope.row.onlinerate >= 60 &&
                scope.row.onlinerate !== 3.14159 &&
                scope.row.onlinerate !== -1 &&
                (scope.row.level == 5 || scope.row.level == 4)
              "
              style="background: #ffcc33; color: #fff"
              >{{ scope.row.onlinerate }}</el-tag
            >
            <el-tag
              @click="chufazxl(scope.row)"
              v-if="
                scope.row.onlinerate === 3.14159 &&
                (scope.row.level == 5 || scope.row.level == 4)
              "
              style="background: #ccc; color: #fff"
              >暂无数据</el-tag
            >
            <span
              v-if="scope.row.onlinerate === -1 && scope.row.level !== 5"
              style="background: #ccc; color: #fff"
            ></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="integrity" label="数据完整性">
          <template slot-scope="scope">
            <el-tag
              @click="chufasjx(scope.row)"
              v-if="
                scope.row.integrity >= 90 &&
                scope.row.integrity !== 3.14159 &&
                scope.row.integrity !== -1 &&
                scope.row.level == 5
              "
              style="background: #339966; color: #fff"
              >{{ scope.row.integrity }}</el-tag
            >
            <el-tag
              @click="chufasjx(scope.row)"
              v-if="
                scope.row.integrity < 60 &&
                scope.row.integrity !== 3.14159 &&
                scope.row.integrity !== -1 &&
                scope.row.level == 5
              "
              style="background: #cc0000; color: #fff"
              >{{ scope.row.integrity }}</el-tag
            >
            <el-tag
              @click="chufasjx(scope.row)"
              v-if="
                scope.row.integrity < 90 &&
                scope.row.integrity >= 60 &&
                scope.row.integrity !== 3.14159 &&
                scope.row.integrity !== -1 &&
                scope.row.level == 5
              "
              style="background: #ffcc33; color: #fff"
              >{{ scope.row.integrity }}</el-tag
            >
            <el-tag
              @click="chufasjx(scope.row)"
              v-if="scope.row.integrity === 3.14159 && scope.row.level == 5"
              style="background: #ccc; color: #fff"
              >暂无数据</el-tag
            >
            <span
              v-if="scope.row.integrity === -1 && scope.row.level == 5"
              style="background: #ccc; color: #fff"
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="lltc"
          label="套餐流量(MB)"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ysyll"
          label="已用流量(MB)"
        ></el-table-column>
        <el-table-column align="center" prop="llzb" label="流量占比(%)">
          <template slot-scope="scope">
            <el-button type="text" @click="chufallzb(scope.row)">{{
              scope.row.llzb
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-col> -->
      <el-row>
        <el-col :span="24">
          <div
            id="tubiao"
            :style="'width:100%;height:' + height + ';zoom:' + device"
          ></div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
  components: {
    timepicker,
  },
  data() {
    return {
      interval: 3,
      falg: "",
      height: "",
      option: {
        title: "(月)在线率/数据完整性/流量占比",
        danwei: "单位:(%)",
      },
      teriminal: "",
      teriminaloption: [],
      tableData: [
        {
          id: 1,
          level: 1,
          name: "江苏省",
          zdzt: "",
          txzt: "",
          zxsjsj: "",
          onlinerate: "",
          integrity: "",
          lltc: "",
          ysyll: "",
          llzb: "",
          children: [
            {
              id: 2,
              level: 2,
              name: "江苏省电力公司",
              zdzt: "",
              txzt: "",
              zxsjsj: "",
              onlinerate: "",
              integrity: "",
              lltc: "",
              ysyll: "",
              llzb: "",
              children: [
                {
                  id: 3,
                  level: 3,
                  name: "南京变电站",
                  zdzt: "",
                  txzt: "",
                  zxsjsj: "",
                  onlinerate: "",
                  integrity: "",
                  lltc: "",
                  ysyll: "",
                  llzb: "",
                  children: [
                    {
                      id: 4,
                      level: 4,
                      name: "pqs600-200",
                      zdzt: 0,
                      txzt: 0,
                      zxsjsj: "2022-03-12 11:23:14",
                      onlinerate: 20,
                      integrity: "",
                      lltc: 500,
                      ysyll: 500,
                      llzb: 45,
                      children: [
                        {
                          id: 41,
                          level: 5,
                          name: "测试监测点1",
                          zdzt: 0,
                          txzt: 1,
                          zxsjsj: "2022-03-12 11:23:14",
                          onlinerate: 20,
                          integrity: 96,
                          lltc: 400,
                          ysyll: 200,
                          llzb: 25,
                          children: [],
                        },
                        {
                          id: 42,
                          level: 5,
                          name: "测试监测点2",
                          zdzt: 1,
                          txzt: 0,
                          zxsjsj: "2022-03-12 11:23:14",
                          onlinerate: 80,
                          integrity: 96,
                          lltc: 100,
                          ysyll: 300,
                          llzb: 45,
                          children: [],
                        },
                      ],
                    },
                    {
                      id: 5,
                      level: 4,
                      name: "pqs600-400",
                      zdzt: 0,
                      txzt: 0,
                      zxsjsj: "2022-03-12 11:23:14",
                      onlinerate: 70,
                      integrity: "",
                      lltc: 500,
                      ysyll: 500,
                      llzb: 45,
                      children: [
                        {
                          id: 51,
                          level: 5,
                          name: "测试监测点3",
                          zdzt: 0,
                          txzt: 1,
                          zxsjsj: "2022-03-12 11:23:14",
                          onlinerate: 90,
                          integrity: 36,
                          lltc: 400,
                          ysyll: 200,
                          llzb: 25,
                          children: [],
                        },
                        {
                          id: 52,
                          level: 5,
                          name: "测试监测点4",
                          zdzt: 1,
                          txzt: 0,
                          zxsjsj: "2022-03-12 11:23:14",
                          onlinerate: 80,
                          integrity: 66,
                          lltc: 100,
                          ysyll: 300,
                          llzb: 45,
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      this.initData();
    });
  },
  mounted() {
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.height = tableheight() / 2 + "px";
    } else if (this.device == 1.25) {
      this.height = (tableheight() - 70) / 2 + "px";
    }
  },
  methods: {
    initData() {
      const echarts = require("echarts");
      let myChartes = echarts.init(document.getElementById("tubiao"));
      var white = "#000";
      var barOption = {
        color: [
          "#00FFFF",
          "#7CFC00",
          "#F08080",
          "#7CFC00",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        xAxis: "",
        seriesData: {
          population: [
            100, 120, 160, 180, 140, 170, 50, 90, 120, 150, 140, 140, 140, 140,
            140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140,
            140, 140, 140, 140,
          ],
          thisWeek: [
            30, 40, 40, 50, 90, 50, 20, 55, 60, 30, 40, 60, 60, 60, 60, 60, 60,
            60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60,
          ],
          notAccumulated: [
            36, 20, 45, 38, 90, 52, 30, 25, 10, 10, 20, 38, 38, 38, 38, 38, 38,
            38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38,
          ],
        },
      };
      var option = {
        title: {
          text: this.option.title,
          textStyle: {
            align: "center",
            color: "#000",
            fontSize: 20,
          },
          top: "0%",
          left: "40%",
        },
        grid: {
          // 显示数据的图表位于当前canvas的坐标轴
          top: "13%",
          bottom: "10%",
          left: "3%",
          right: "3%",
        },
        legend: {
          data: [
            {
              name: "在线率",
              itemStyle: {
                color: "#CC9900",
              },
            },
            {
              name: "数据完整性",
              itemStyle: {
                color: "#3399CC ",
              },
            },
            {
              name: "流量使用",
              itemStyle: {
                color: "#00CCCC ",
              },
            },
          ],
          textStyle: {
            color: "#5789c6",
            fontSize: 14,
          },
          itemWidth: 10,
          itemHeight: 10,
          left: "80%",
        },
        tooltip: {
          trigger: "axis",
        },
        // tooltip: {
        // trigger: 'item',
        // axisPointer: {
        //     type: 'none',
        //     crossStyle: {
        //     color: '#999'
        //     }
        // },
        // formatter: '{b}-{a}: {c}'
        // },
        xAxis: [
          {
            type: "category",
            data: [
              "1号",
              "2号",
              "3号",
              "4号",
              "5号",
              "6号",
              "7号",
              "8号",
              "9号",
              "10号",
              "12号",
              "13号",
              "14号",
              "15号",
              "16号",
              "17号",
              "18号",
              "19号",
              "20号",
              "21号",
              "22号",
              "23号",
              "24号",
              "25号",
              "26号",
              "27号",
              "28号",
              "29号",
              "30号",
              "31号",
            ],
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位(流量:MB)",
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              formatter: "{value}MB",
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              // show: false // 不显示网格线
              lineStyle: {
                type: "dashed",
                //  color: '#344a53'
              },
            },
          },
          {
            type: "value",
            name: "单位(%)",
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value}%",
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            height: "5%",
            start: 0,
            end: 100,
          },

          {
            start: 0,
            end: 100,
          },
        ],
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     xAxisIndex: [0],

        //     zoomLock: false ,
        //     minValueSpan:4,
        //     maxValueSpan:5,
        //     left: '50',
        //     bottom: 0,
        //     height: 6,
        //     backgroundColor: 'rgba(255,255,255,.2)',
        //     start: 0,
        //     borderColor: 'none',
        //     end: 100,
        //     dataBackground: {
        //       lineStyle: {
        //         color: 'none'
        //       },
        //       areaStyle: {
        //         color: 'none'
        //       }
        //     },
        //     selectedDataBackground: {
        //       lineStyle: {
        //         color: 'none'
        //       },
        //       areaStyle: {
        //         color: 'none'
        //       }
        //     },
        //     borderWidth: 0,
        //     handleSize: '0px',
        //     fillerColor: '#09E3EF',
        //     moveHandleSize: 0,
        //     showDetail: true
        //   }
        // ],
        series: [
          {
            name: "在线率",
            data: barOption.seriesData.population,
            type: "bar",
            //barWidth: 16,
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#CC9900", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#CC9900", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "none",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: "{b}-{a}: {c}",
            },
          },
          {
            name: "数据完整性",
            data: barOption.seriesData.thisWeek,
            type: "bar",
            // barWidth: 16,
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#3399CC ", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#3399CC", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "none",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: "{b}-{a}: {c}",
            },
          },
          {
            name: "流量使用",
            data: barOption.seriesData.notAccumulated,
            markLine: {
              silent: true,
              label: {
                position: "middle",
                formatter: "{b}",
                color: "red",
              },
              data: [
                {
                  name: "日均流量标准",
                  yAxis: 65.03,
                  lineStyle: {
                    color: "red",
                  },
                  itemStyle: {
                    color: "red",
                  },
                  label: {
                    position: "end",
                    formatter: "{b}\n {c}MB",
                  },
                },
              ],
            },
            type: "bar",
            // barWidth: 16,
            yAxisIndex: 1,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00CCCC", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#00CCCC", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "none",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: "{b}-{a}: {c}%",
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setInterval(() => {
        myChartes.resize();
      }, 1000);
      window.addEventListener("resize", function () {
        myChartes.resize();
      });
    },
    //查询
    querfromdata() {},
    //在线率触发
    chufazxl(row) {
      alert("在线率触发id:" + row.id);
    },
    //数据完整性触发
    chufasjx(row) {
      alert("数据完整性触发id:" + row.id);
    },
    //流量占比触发
    chufallzb(row) {
      alert("流量占比触发id:" + row.id);
    },
  },
};
</script>