<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <!-- <el-form-item label="所属单位:">
        <el-select
            clearable
            v-model.trim="form.company"
            placeholder="请选择单位"
          >
            <el-option
              v-for="item in CompanyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
        </el-select> -->
      <!-- </el-form-item> -->
      <Area @click="handleNodeClick"></Area>

      <el-form-item label="统计日期:">
        <el-date-picker
          v-model.trim="form.item"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-search"
          @click="onSubmit"
          >查询</el-button
        >
        <el-button
          type="primary"
          class="ml10"
          icon="el-icon-circle-plus-outline"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="WorkOrder">
          <div class="WorkOrderBox">
            <div class="WorkContent">
              <div>异常问题数量</div>
              <div>
                <i class="ITop">{{ list.WorkOrder.total }}</i> 个
              </div>
              <div>已关工单数量</div>
              <div>
                <i class="IBottom">{{ list.WorkOrder.Processed }}</i> 个
              </div>
            </div>
            <div
              ref="Workontent"
              class="Workontent"
              style="width: 200px; height: 200px"
            >
              <div
                style="width: 100%; height: 100%"
                id="electr2"

              ></div>
            </div>
          </div>
          <div class="WorkOrderBox">
            <div class="WorkContent">
              <div>异常问题数量</div>
              <div>
                <i class="ITop">{{ list.abnormal.abnormalNum }}</i> 个
              </div>
              <div>已处理工单数量</div>
              <div>
                <i class="IBottom">{{ list.abnormal.Processed }}</i> 个
              </div>
            </div>
            <div
              ref="Workontents"
              class="Workontent"
              style="width: 200px; height: 200px"
            >
              <div
                style="width: 100%; height: 100%"
                id="electr3"

              ></div>
            </div>
          </div></div
      ></el-col>
      <el-col :span="18">
        <el-table
          stripe
          :data="generateList.data"
          :height="vh"
          border
          style="width: 100%"
          v-loading="isLoading"
          header-cell-class-name="table_header"
        >
          <template v-for="(item, index) in tableHeaderNetwork">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :min-width="item.width"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item.prop]"
                placement="top"
              > -->
                <span v-if="item.prop == 'state'">{{
                  scope.row[item.prop] == 0 ? "未生成" : "已生成"
                }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          background
          class="mt10"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageNum"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="generateList.total"
        >
        </el-pagination
      ></el-col>
    </el-row>
  </div>
</template>
<script>
import { Statistics, StatisticsEcharts } from "@/api/Workorder.js";
// import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
export default {
  components: { Area },
  props: {},
  data() {
    return {
      vh: undefined,
      zoom: "", //图表焦点校验
      form: {
        company: "", //所属单位
        time: "", //时间
        pageNum: 1,
        pageSize: 20,
      },
      list: {
        WorkOrder: {
          total: 199, //工单总数量
          Processed: 30, //已处理工单数量
          data: [0.87], //比率
        },
        abnormal: {
          abnormalNum: 199, //异常问题数量
          Processed: 120, //已关闭数量
          data: [0.67], //比率
        },
      },
      //所属单位数据数据

      CompanyList: [],
      //存储数组
      isLoading: true,
      generateList: {}, //工单数组
      height: 650,
      tableHeaderNetwork: [
        { prop: "company", label: "单位" },
        { prop: "station", label: "变电站" },
        { prop: "monitor", label: "监测点" },
        { prop: "team", label: "运维班组" },
        { prop: "describe", label: "问题描述", width: "150" },
        { prop: "time", label: "生成时间" },
        { prop: "state", label: "工单状态" },
      ],
    };
  },
  created() {
    // this.dictionaries()
    this.onSubmit();
  },
  mounted() {
    this.vh = document.getElementById("app-main-in").offsetHeight - 165;

    this.StatisticsEcharts();
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },

  methods: {
    // 字典表
    // dictionaries() {
    //   dictypeData().then(res => {
    //     res.data.forEach(item => {
    //       if (item.name == "单位") {
    //         this.CompanyList = item.children;
    //       }
    //     });
    //   });
    // },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    // 查询
    onSubmit() {
      this.isLoading = true;
      Statistics(this.form).then((res) => {
        this.generateList = res.data;
        this.isLoading = false;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.onSubmit();
    },
    StatisticsEcharts() {
      StatisticsEcharts().then((res) => {
        this.list = res.data;
        setTimeout(() => {
          this.WorkOrderLeft(); // 工单转换率/处置率echarts
          this.WorkOrderRight(); // 工单转换率/处置率echarts
        }, 0);
      });
    },
    // 工单转换率/处置{率 echarts
    WorkOrderLeft() {
      let echarts = require("echarts");
      let domID2 = document.getElementById("electr2");

      (domID2.style.width = "200px"), (domID2.style.height = 200 + "px");

      let myChart2 = echarts.init(domID2);
      // console.log(this.list);
      let echartsData = this.list.WorkOrder;
      let option = {
        title: [
          {
            text: "工单转换率",
            textStyle: { fontSize: 14, fontWeight: 500 },
            textAlign: "center",
            left: "110px",
            bottom: "-5PX",
          },
        ],
        series: [
          {
            name: "",
            type: "liquidFill",
            color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
            data: echartsData.data,
            center: ["120px", "90px"],
            radius: "75%",
            outline: {
              borderDistance: 2, // 边框与球中间间距
              itemStyle: {
                borderWidth: 2,

                borderColor: "#5aaef6",
              },
            },
            backgroundStyle: {
              color: "#fff",
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)",
            },
            label: {
              formatter: function (p) {
                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;
              },
              rich: {
                a: {
                  fontSize: 14,
                },
              },

              position: ["50%", "50%"],
              fontSize: 16,
              fontWeight: 700,
              fontFamily: "SourceHanSansCN",
              color: "#5aaef6",
            },
          },
        ],
      };

      option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
      setInterval(function () {
        myChart2.resize();
      }, 600);
    },
    WorkOrderRight() {
      let echarts = require("echarts");
      let domID2 = document.getElementById("electr3");
      (domID2.style.width = "200px"), (domID2.style.height = 200 + "px");
      let myChart2 = echarts.init(domID2);
      let echartsData = this.list.abnormal;
      let option = {
        title: [
          {
            text: "工单处置率",
            textStyle: { fontSize: 14, fontWeight: 500 },
            textAlign: "center",
            left: "110px",
            bottom: "-5PX",
          },
        ],
        series: [
          {
            name: "",
            type: "liquidFill",
            color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
            data: echartsData.data,
            center: ["120px", "90px"],
            radius: "75%",
            outline: {
              borderDistance: 2, // 边框与球中间间距
              itemStyle: {
                borderWidth: 2,

                borderColor: "#5aaef6",
              },
            },
            backgroundStyle: {
              color: "#fff",
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)",
            },
            label: {
              formatter: function (p) {
                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`;
              },
              rich: {
                a: {
                  fontSize: 14,
                },
              },

              position: ["50%", "50%"],
              fontSize: 16,
              fontWeight: 700,
              fontFamily: "SourceHanSansCN",
              color: "#5aaef6",
            },
          },
        ],
      };

      option && myChart2.setOption(option)
window.echartsArr.push(myChart2);
      setInterval(function () {
        myChart2.resize();
      }, 600);
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
.WorkOrder {
  height: 85%;

  padding: 30px 10px;

  .WorkOrderBox {
    padding: 10px;
    width: 100%;
    display: flex;
    .WorkContent {
      font-size: 14px;

      width: 100px;
      height: 200px;
      display: flex;

      flex-direction: column;
      justify-content: center;
      div {
        display: inline-block;
        // flex: 1;
        text-align: center;
        line-height: 30px;
        .ITop {
          font-size: 18px;
          color: #54a092;
          font-weight: 600;
        }
        .IBottom {
          font-size: 18px;
          color: #63d763;
          font-weight: 600;
        }
      }
    }
  }
  .Workontent {
    flex: 1;
    width: 200px;
  }
}
</style>
