<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="Top" ref="top">
          <el-tabs :tab-position="tabPosition" v-model="active">
            <el-tab-pane label="按单位统计" name="first">
              <el-col :span="24" class="mt10">
                <div
                  class="box"
                  ref="getHeight"
                  :style="'height:' + vh + ';'"
                  v-loading="isLoading3"
                >
                  <div
                    id="electr3"
                    style="width: 100%; height: 100%"

                  ></div>
                </div>
              </el-col>
              <el-col :span="24">
                <el-table
                  stripe
                  :data="unittableData"
                  :height="height"
                  border
                  style="width: 100%; height: 100%"
                  v-loading="isLoading"
                  header-cell-class-name="table_header"
                  :cell-style="cellStyle"
                >
                  <template v-for="(item, index) in tableHeaderTotal">
                    <el-table-column
                      :prop="item.prop"
                      :label="item.label"
                      :key="index"
                      :min-width="item.width"
                    >
                      <!-- <template slot-scope="scope"> 
                                                <span v-if="index==1 || index==0" >{{ scope.row[item.prop] }}</span>
                                                <span v-else class="prop">{{ scope.row[item.prop] }}</span>
                                            </template> -->
                    </el-table-column>
                  </template>
                </el-table>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="按月份统计" name="second">
              <el-col :span="24" class="mt10">
                <div
                  class="box"
                  ref="getHeight1"
                  :style="'height:' + vh + ';'"
                  v-loading="isLoading4"
                >
                  <div
                    id="electr4"
                    style="width: 100%; height: 100%"

                  ></div>
                </div>
              </el-col>
              <el-col :span="24">
                <el-table
                  stripe
                  :data="surfaceData"
                  :height="height"
                  border
                  style="width: 100%; height: 100%"
                  v-loading="isLoading"
                  header-cell-class-name="table_header"
                  :cell-style="cellStyle"
                >
                  <template v-for="(item, index) in tableHeaderTotal">
                    <el-table-column
                      :prop="item.prop"
                      :label="item.label"
                      :key="index"
                      :min-width="item.width"
                    >
                      <!-- <template slot-scope="scope"> 
                                                <span v-if="index==1 || index==0" >{{ scope.row[item.prop] }}</span>
                                                <span v-else class="prop">{{ scope.row[item.prop] }}</span>
                                            </template> -->
                    </el-table-column>
                  </template>
                </el-table>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  platform,
  unittable,
  rostrum,
  surface,
} from "@/api/accountstatistics.js";
import { viewheight } from "@/assets/commjs/common";
export default {
  data() {
    return {
      zoom: "", //图表焦点校验
      vh: "",
      height: 265,
      device: "",
      getHeight: "",
      tabPosition: "top",
      active: "first",
      isLoading: false,
      isLoading2: false,
      isLoading3: false,
      isLoading4: false,
      unittableData: [],
      tableHeaderTotal: [
        { prop: "number", label: "序号", width: 80 },
        { prop: "company", label: "单位名称", width: 150 },
        { prop: "class1", label: "Ⅰ类(个)" },
        { prop: "class2", label: "Ⅱ类(个)" },
        { prop: "class3", label: "Ⅲ类(个)" },
        { prop: "total", label: "合计" },
      ],
      surfaceData: [],
    };
  },
  created() {
    this.account();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = (viewheight() - 90) / 2 + "px";
    setTimeout(() => {
      this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45);
    }, 0);
    //echarts图表调用
    this.getCensus3();
    this.getCensus4();
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },
  computed: {},
  methods: {
    //监测点单位统计echarts图表
    async getCensus3() {
      this.isLoading3 = true;
      const { data } = await platform();
      // console.log("监测点单位11111111111:",data)
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr3");
      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth + "px"),
          (domID1.style.height = this.$refs.getHeight.offsetHeight - 45 + "px");
        $("#electr3").css("width", "1667px");
        $("#electr3").css("height", "352px");
        this.isLoading3 = false;
      }, 0);
      let myChart3 = echarts.init(domID1);

      let echartsData = data;
      let list = [
        echartsData[0].monitoring,
        echartsData[1].monitoring,
        echartsData[2].monitoring,
        echartsData[3].monitoring,
        echartsData[4].monitoring,
        echartsData[5].monitoring,
      ]; //城市
      let list1 = [
        echartsData[0].class1,
        echartsData[1].class1,
        echartsData[2].class1,
        echartsData[3].class1,
        echartsData[4].class1,
        echartsData[5].class1,
      ]; //电能质量检测终端
      let list2 = [
        echartsData[0].class2,
        echartsData[1].class2,
        echartsData[2].class2,
        echartsData[3].class2,
        echartsData[4].class2,
        echartsData[5].class2,
      ]; //智能融合终端
      let list3 = [
        echartsData[0].class3,
        echartsData[1].class3,
        echartsData[2].class3,
        echartsData[3].class3,
        echartsData[4].class3,
        echartsData[5].class3,
      ]; //智能电表
      let colors = ["#EECB5F", "#7ECF51", "#61A5E8"];
      let option = {
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            //restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["Ⅰ类", "Ⅱ类", "Ⅲ类"],
          left: 100,
          top: 0,
          itemWidth: 12,
          itemHeight: 12,
        },
        xAxis: {
          data: list,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#000",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#363F63",
            },
          },
          z: 10,
        },
        color: colors,
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        yAxis: {
          show: true,
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              show: false,
            },
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            formatter: "{value}", //右侧Y轴文字显示
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            lineStyle: {
              show: false,
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            name: "Ⅰ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "#61A5E8"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list1,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          {
            name: "Ⅱ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "red"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list2,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          {
            name: "Ⅲ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "#61A5E8"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list3,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart3.setOption(option, true)
window.echartsArr.push(myChart3);
      setTimeout(function () {
        myChart3.resize();
      }, 0);
    },
    //监测点月份统计echarts图表
    async getCensus4() {
      this.isLoading4 = true;
      const { data } = await rostrum();
      // console.log("监测点月份11111111111:",data)
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr4");
      setTimeout(() => {
        (domID1.style.width = this.$refs.getHeight.offsetWidth + "px"),
          (domID1.style.height = this.$refs.getHeight.offsetHeight - 45 + "px");
        $("#electr4").css("width", "1667px");
        $("#electr4").css("height", "352px");
        this.isLoading4 = false;
      }, 0);
      let myChart4 = echarts.init(domID1);
      let echartsData = data;
      let list = [
        echartsData[0].monitoring,
        echartsData[1].monitoring,
        echartsData[2].monitoring,
        echartsData[3].monitoring,
        echartsData[4].monitoring,
        echartsData[5].monitoring,
        echartsData[6].monitoring,
      ]; //城市
      let list1 = [
        echartsData[0].class1,
        echartsData[1].class1,
        echartsData[2].class1,
        echartsData[3].class1,
        echartsData[4].class1,
        echartsData[5].class1,
        echartsData[6].class1,
      ]; //电能质量检测终端
      let list2 = [
        echartsData[0].class2,
        echartsData[1].class2,
        echartsData[2].class2,
        echartsData[3].class2,
        echartsData[4].class2,
        echartsData[5].class2,
        echartsData[6].class2,
      ]; //智能融合终端
      let list3 = [
        echartsData[0].class3,
        echartsData[1].class3,
        echartsData[2].class3,
        echartsData[3].class3,
        echartsData[4].class3,
        echartsData[5].class3,
        echartsData[6].class3,
      ]; //智能电表
      let colors = ["#EECB5F", "#7ECF51", "#61A5E8"];
      let option = {
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            //restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["Ⅰ类", "Ⅱ类", "Ⅲ类"],
          left: 100,
          top: 0,
          itemWidth: 12,
          itemHeight: 12,
        },
        xAxis: {
          data: list,
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#000",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#363F63",
            },
          },
          z: 10,
        },
        color: colors,
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        yAxis: {
          show: true,
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              show: false,
            },
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            formatter: "{value}", //右侧Y轴文字显示
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            lineStyle: {
              show: false,
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            name: "Ⅰ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "#61A5E8"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list1,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          {
            name: "Ⅱ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "red"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list2,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          {
            name: "Ⅲ类",
            type: "bar",
            stack: "总数",
            itemStyle: {
              color: ["#EECB5F", "#7ECF51", "#61A5E8"],
            },
            barWidth: "60%",
            label: {
              show: true,
            },
            data: list3,
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart4.setOption(option, true)
window.echartsArr.push(myChart4);
      setTimeout(function () {
        myChart4.resize();
      }, 0);
    },
    //方法调用台账统计数据接口
    account() {
      this.isLoading = true;
      this.isLoading2 = true;
      //监测点统计单位表格数据
      unittable().then((res) => {
        this.isLoading = false;
        this.unittableData = res.data;
      });
      // 监测点统计月份表格数据
      surface().then((res) => {
        this.isLoading2 = false;
        this.surfaceData = res.data;
      });
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      // console.log(row);
      if (
        row.columnIndex == 2 ||
        row.columnIndex == 3 ||
        row.columnIndex == 4 ||
        row.columnIndex == 5
      ) {
        return "font-weight: 600;";
      }
    },
  },
};
</script>

<style  lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
.el-table__body-wrapper .is-scrolling-none {
  height: 228px !important;
}
.prop {
  font-weight: 600;
}
</style>
