<template>
  <div class="operationMaintenance">
    <div class="left">
      <div class="title">工单管理</div>
      <div class="workOrder">
        <div class="todayCount">
          <div
            style="width: 100%; display: flex; justify-content: space-evenly"
          >
            <span>今日报警:&nbsp;&nbsp;10</span>
            <span
              >同比昨日:<img
                src="../assets/images/gongDan/greenJian.png"
              />&nbsp;&nbsp;0.5</span
            >
          </div>
          <div
            style="width: 100%; display: flex; justify-content: space-evenly"
          >
            <span>今日工单:&nbsp;&nbsp;10</span>
            <span
              >同比昨日:<img
                src="../assets/images/gongDan/redJian.png"
              />&nbsp;&nbsp;0.5</span
            >
          </div>
        </div>
      </div>
      <div class="workCount">
        <div style="font-size: 0.9rem">本月工单数</div>
        <div id="workOrderEcharts"></div>
      </div>
      <div class="workList">
        <div class="workContent" v-for="(item, index) in workList" :key="index">
          <span>{{ item.name }}</span>
          <span style="color: rgb(9, 196, 217); font-size: 1rem">{{
            item.count
          }}</span>
          <span>今日总响应超时工单数：{{ item.toDayCount }}</span>
          <span>今日总响应超时时长：{{ item.toDayTime }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">工单管理</div>
      <div class="selectList">
        <div
          class="selectChange"
          v-for="(item, index) in selectList"
          :key="index"
        >
          <el-select
            v-model="item.name"
            :popper-append-to-body="false"
            clearable
            :placeholder="item.name"
            style="margin-left: 5%"
          >
            <el-option
              v-for="(item, index) in item.list"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="workOrderList">
        <div class="workContent">
          <div
            class="workContentList"
            v-for="(item, index) in distributeLeafletsList"
            :key="index"
          >
            <div class="distributeLeaflets">
              <span>{{ item.id }}&nbsp;&nbsp;派单时间:</span>
              <span class="distributeLeafletsValue">{{ item.time }}</span>
            </div>
            <div class="distributeLeaflets" style="margin-left: 4%">
              <span>派单人员:</span>
              <span class="distributeLeafletsValue">{{ item.user }}</span>
            </div>
            <div class="distributeLeaflets" style="margin-left: 4%">
              <span>工单类型:</span>
              <span class="distributeLeafletsValue">{{ item.type }}</span>
            </div>
            <div class="distributeLeaflets" style="margin-left: 4%">
              <span>接单时间:</span>
              <span class="distributeLeafletsValue">{{
                item.receiveTime
              }}</span>
            </div>
            <div class="distributeLeaflets" style="margin-left: 4%">
              <span>订单状态:</span>
              <span class="distributeLeafletsValue">{{ item.status }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "operationMaintenance",
  data() {
    return {
      workList: [
        {
          name: "超时响应工单数",
          count: "0",
          toDayCount: "2",
          toDayTime: "0",
        },
        {
          name: "未处理超时工单数",
          count: "0",
          toDayCount: "2",
          toDayTime: "0",
        },
        {
          name: "未完成工单数",
          count: "0",
          toDayCount: "2",
          toDayTime: "0",
        },
        {
          name: "未分配工单数",
          count: "0",
          toDayCount: "2",
          toDayTime: "0",
        },
      ],
      selectList: [
        {
          name: "日期",
          list: [
            {
              label: "日期",
              value: "1",
            },
            {
              label: "日期2",
              value: "2",
            },
          ],
        },
        {
          name: "派单人员",
          list: [
            {
              label: "派单人员",
              value: "1",
            },
            {
              label: "派单人员2",
              value: "2",
            },
          ],
        },
        {
          name: "工单状态",
          list: [
            {
              label: "工单状态",
              value: "1",
            },
            {
              label: "工单状态2",
              value: "2",
            },
          ],
        },
        {
          name: "工单类型",
          list: [
            {
              label: "工单类型",
              value: "1",
            },
            {
              label: "工单类型2",
              value: "2",
            },
          ],
        },
      ], //案件列表选择器
      distributeLeafletsList: [
        {
          id: "1",
          time: "2023.1.13",
          user: "方强",
          type: "设备维修",
          receiveTime: "2023.1.13",
          status: "已完成",
        },
        {
          id: "2",
          time: "2023.1.13",
          user: "方强",
          type: "设备维修",
          receiveTime: "2023.1.13",
          status: "已完成",
        },
        {
          id: "3",
          time: "2023.1.13",
          user: "方强",
          type: "设备维修",
          receiveTime: "2023.1.13",
          status: "已完成",
        },
        {
          id: "4",
          time: "2023.1.13",
          user: "方强",
          type: "设备维修",
          receiveTime: "2023.1.13",
          status: "已完成",
        },
      ],
    };
  },
  mounted() {
    this.workOrderEcharts();
  },
  methods: {
    workOrderEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("workOrderEcharts")
      );
      let option = {
        grid: {
          top: "18%",
          // // left: '15%',
          // // right: '5%',
          bottom: "10%",
        },
        tooltip: {
          trigger: "axis",
          showContent: false,
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "solid",
              color: "rgba(255, 255, 255, .5)",
            },
            label: {
              show: true,
              color: "#fff",
              fontSize: "0.9rem",
              fontWeight: 600,
              backgroundColor: "rgba(0, 0, 0, 0)",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            name: "天数",
            //x轴坐标点
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            //x轴坐标线样式
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.5rem",
            },
            //x轴线
            splitLine: {
              show: false,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#1282C8",
              },
            },
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6],
          },
        ],
        yAxis: [
          {
            name: "工单",
            //x轴坐标点
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            //x轴坐标线样式
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.5rem",
            },
            //x轴线
            splitLine: {
              show: true,
              lineStyle: {
                // type: [5, 10],
                dashOffset: 10,
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            symbol: "circle",
            showSymbol: false,
            yAxisIndex: 0,
            lineStyle: {
              width: 4,
              color: "rgb(0,170,194)",
            },
            label: {
              show: true,
              textStyle: {
                color: "#FFFFFF",
                fontSize: "0.9rem",
              },
              position: "top",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
            itemStyle: {
              color: "#FFFFFF",
              borderColor: "#FFFFFF",
              borderWidth: 6,
            },
            data: ["40", "60", "50", "50", "80", "20"],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
@fontsize: 0.6rem;
.operationMaintenance {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  .left {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 0.5% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .workOrder {
      width: 100%;
      height: 15%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
      .todayCount {
        background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
        background-size: 100% 100%;
        width: 75%;
        height: 82%;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: space-around;
      }
    }
    .workCount {
      width: 100%;
      height: 30%;
      color: #fff;
      #workOrderEcharts {
        width: 100%;
        height: 90%;
      }
    }
    .workList {
      width: 100%;
      height: 40%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      .workContent {
        width: 45%;
        height: 35%;
        border: 1px solid rgb(9, 196, 217);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.7rem;
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .right {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    // display: flex;
    // flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: rightAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .selectList {
      width: 100%;
      height: 15%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .selectChange {
        width: 23%;
        height: 20%;
        margin-left: 11%;
        /deep/ .el-select {
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
        /deep/ .el-input__inner {
          width: 100%;
          height: 100%;
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 15px;
          color: #fff;
        }
        /deep/ .el-select-dropdown {
          background: rgba(0, 23, 28, 0.3);
          border: 1px solid rgb(1, 176, 202);
          border-radius: 5px;
          // left: -3px !important;
        }
        /deep/ .el-select-dropdown__item {
          color: turquoise;
        }
        /deep/ .el-select .el-input .el-select__caret {
          color: rgb(1, 176, 202);
          font-size: 0.3rem;
          font-weight: 500;
        }
        /deep/ .el-input__suffix {
          display: flex;
          align-items: center;
        }
      }
    }
    .workOrderList {
      width: 100%;
      height: calc(100% - 20%);
      padding: 0 7% 0 3%;
      box-sizing: border-box;
      .workContent {
        width: 100%;
        height: 100%;
        background: url(../assets/images/warnDottedLine.png) no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        .workContentList {
          width: 100%;
          height: 35%;
          border: 1px dashed #fff;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 3%;
          box-sizing: border-box;
          .distributeLeaflets {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            .distributeLeafletsValue {
              width: 30%;
              height: 100%;
              background: url("../assets/images/gongDan/eqBtnAc.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
    }
  }
  @keyframes rightAnimation {
    0% {
      position: relative;
      right: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      right: 0%;
      transform: scale(1);
    }
  }
}
.title {
  width: 100%;
  height: 5%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
</style>