<template>
  <div style="padding: 10px; box-sizing: border-box">
    <div>
      <div class="mumber-box">
        <div
          class="mumber"
          style="display: flex"
          v-for="(it, index) in data.Statistics"
          :key="index"
        >
          <div class="mum-left">
            <!-- <img class="index-img" :src="'/src/assets/erp/index-icon' + (index + 1) + '.svg'" /> -->
            <!-- <a-image class="index-img" :src="it.icon" :width="70" :preview="false" /> -->
            <a-image src="/analisis/dev.png" :width="80" :preview="false" />
          </div>
          <div class="mum-right">
            <div class="mum-title">{{ it.title }}</div>
            <div class="mum" :style="{ color: it.color }">{{ it.value }}</div>
          </div>
          <div style="">
            <a-image src="/analisis/dev_end.png" :width="60" :preview="false" />
          </div>
        </div>
      </div>
      <div style="display: flex">
        <a-row :gutter="10">
          <a-col :span="24">
            <a-col :span="24">
              <div class="box-bg">
                <div class="box-bg-title">
                  <span class="title-text">机加设备分布情况</span>
                </div>
                <div class="item-f" ref="homePieChart"></div>
              </div>
            </a-col>

            <a-col :span="24">
              <div class="box-bg" style="position: relative">
                <div class="box-bg-title">
                  <span class="title-text">机加设备分布情况</span>
                </div>
                <!-- <div class="total">
              <div>{{ data.total }}万吨</div>
              <div class="text">总出库产品金额</div>
            </div> -->
                <div class="item-f" ref="homePieChart2"></div>
              </div>
            </a-col>

            <a-col :span="24">
              <div class="box-bg" style="position: relative">
                <div class="box-bg-title">
                  <span class="title-text">熔炼设备分布情况</span>
                </div>
                <!-- <div class="total">
              <div>{{ data.total }}万吨</div>
              <div class="text">总出库产品金额</div>
            </div> -->
                <div class="item-f" ref="homePieChart3"></div>
              </div>
            </a-col>
          </a-col>
        </a-row>
        <div :span="24">
          <a-row :gutter="10">
            <a-col :span="16">
              <div class="box-bg">
                <div class="box-bg-title">
                  <span class="title-text">设备综合效率</span>
                  <div class="title-chose">
                    <span
                      v-for="item in data.priceArray"
                      :key="item.key"
                      :class="item.key == data.cur ? 'cur' : ''"
                      @click="changePrice(item, 1)"
                      >{{ item.name }}</span
                    >
                  </div>
                </div>
                <div class="item" ref="homeLineChart"></div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="box-bg">
                <div class="box-bg-title">
                  <span class="title-text">设备类型占比</span>
                </div>
                <!-- <div class="item" ref="homeBarChart1"></div> -->
                <div class="item" style="padding-top: 10px">
                  <VisitRadar class="md:w-3/3 w-full" :loading="loading" />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="box-bg">
                <div class="box-bg-title">
                  <span class="title-text">设备巡检情况</span>
                </div>
                <div class="item">
                  <div class="unit">单位：台</div>
                  <div>
                    <div class="pucharse" v-for="it in data.barData" :key="it.name">
                      <span class="labels">{{ it.name }}</span>
                      <div class="values">
                        <div
                          class="actual"
                          :style="{ width: (it.actual / it.plan) * 100 + '%' }"
                        ></div>
                        <div style="position: absolute; right: 10px"
                          >{{ it.actual }}/{{ it.plan }}</div
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="16">
              <div class="box-bg">
                <div class="box-bg-title">
                  <span class="title-text">设备巡检故障率</span>
                  <!-- <div class="title-chose">
                    <span
                      v-for="item in data.priceArray2"
                      :key="item.key"
                      :class="item.key == data.cur2 ? 'cur' : ''"
                      @click="changePrice(item, 2)"
                      >{{ item.name }}</span
                    >
                  </div> -->
                </div>
                <div style="width: 800px" class="item" ref="homeBarChart"></div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, nextTick, reactive, ref, unref, markRaw } from 'vue';
  import VisitRadar from './components/VisitRadar.vue';
  // import Icon from '/@/components/Icon/index';
  import * as echarts from 'echarts';

  const formate = (name) => {
    let str = name + '：';
    data.pieOption?.series?.data?.forEach((o: any) => {
      if (name == o.name) {
        str += o.value + '%';
      }
    });
    return str;
  };

  const formate2 = (name) => {
    let str = name + '：';
    data.pie2Option?.series?.data?.forEach((o: any) => {
      if (name == o.name) {
        str += '' + o.value + '%';
      }
    });
    return str;
  };
  const formate3 = (name) => {
    let str = name + '：';
    data.pie3Option?.series?.data?.forEach((o: any) => {
      if (name == o.name) {
        str += '' + o.value + '%';
      }
    });
    return str;
  };
  const changePrice = (o, i) => {
    if (i == 1) {
      data.cur = o.key;
      // data.myChart4.setOption(unref(barOption), true);
      // data.myChart4.resize(); //显示区域大小发生改变更新图表
    } else {
      data.cur2 = o.key;
      // data.myChart4.setOption(unref(lineOption), true);
      // data.myChart4.resize(); //显示区域大小发生改变更新图表
    }
  };
  const data = reactive({
    priceArray: [
      { key: 0, name: '月度' },
      { key: 1, name: '季度' },
      { key: 2, name: '年度' },
    ],
    priceArray2: [
      { key: 0, name: '月度' },
      { key: 1, name: '季度' },
      { key: 2, name: '年度' },
    ],
    barData: [
      {
        name: '监控设备',
        plan: 111,
        actual: 22,
      },
      {
        name: '生产设备',
        plan: 211,
        actual: 22,
      },
      {
        name: '消防设备',
        plan: 11,
        actual: 22,
      },
      {
        name: '智能水电表',
        plan: 121,
        actual: 22,
      },
      {
        name: '其他',
        plan: 21,
        actual: 22,
      },
    ],
    cur: 0,
    cur2: 0,
    colors: ['#5E95FF', '#00CACF', '#FF9100', '#995EFF', '#5E6EFF'],
    Statistics: [
      {
        title: '设备总数量（台）',
        icon: '/analisis/a1.png',
        value: 1358,
        total: 120000,
        color: '#4460DE',
      },
      {
        title: '设备在线数量（台）',
        icon: '/analisis/a2.png',
        value: 1254,
        total: 500000,
        color: '#55CCD8',
      },
      {
        title: '今日设备预警数量（次）',
        icon: '/analisis/a3.png',
        value: 7425,
        total: 120000,
        color: '#FBA837',
      },
      {
        title: '今日设备告警数量（次）',
        icon: '/analisis/a4.png',
        value: '135',
        total: 50000,
        color: '#FC7690',
      },
      {
        title: '今日设备维修数量（次）',
        icon: '/analisis/a5.png',
        value: 21,
        total: 50000,
        color: '#7A93F7',
      },
    ],
    dataOne: [],
    // 玫瑰饼图
    pieOption: {
      color: ['#4460DE', '#55CCD8', '#FC7690', '#FE8F67', '#FFCF47', '#7A93F7'],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        textStyle: {
          color: '#fff',
        },
        formatter: '{b}<br/>{c}' + '<br/>' + '{d}%',
      },
      legend: {
        orient: 'horizontal',
        // x: 'center',
        // y: 'bottom',
        // bottom: '1%',
        right: 'right',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        padding: [5, 5, 5, 5],
        textStyle: {
          color: '#85878e',
        },
        formatter: formate,
      },
      series: {
        name: '',
        center: ['35%', '32%'],
        type: 'pie',
        // radius: [0, 75],
        radius: ['10%', '70%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 0,
        },

        labelLine: {
          show: false,
        },
        label: {
          color: '#6e7079',
          overflow: 'none',
          formatter: '',
        },
        data: [
          { value: 274, name: '机加一部' },
          { value: 400, name: '机加二部' },
          { value: 300, name: '机加三部' },
          { value: 200, name: '机加四部' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    },

    // 占比饼图
    pie2Option: {
      color: ['#55CCD8', '#FC7690', '#FFCF47', '#2ec7c9'],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        textStyle: {
          color: '#fff',
        },
        formatter: '{b}<br/>{c}' + '<br/>' + '{d}%',
      },
      legend: {
        // bottom: '10%',
        // left: 'center',
        right: 'right',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#85878e',
        },
        formatter: formate2,
      },
      series: {
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['35%', '32%'],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        label: {
          color: '#6e7079',
          overflow: 'none',
          formatter: '',
        },
        data: [
          { value: 30, name: '机加一部' },
          { value: 32, name: '机加二部' },
          { value: 18, name: '机加三部' },
          { value: 18, name: '机加四部' },
        ],
      },
    },
    pie3Option: {
      color: ['#55CCD8', '#FC7690', '#FFCF47', '#2ec7c9'],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        textStyle: {
          color: '#fff',
        },
        formatter: '{b}<br/>{c}' + '<br/>' + '{d}%',
      },
      legend: {
        // bottom: '10%',
        // left: 'center',
        right: 'right',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#85878e',
        },
        formatter: formate3,
      },
      series: {
        name: '',
        type: 'pie',
        radius: '60%',
        selectedMode: 'single',
        center: ['35%', '32%'],
        labelLine: {
          show: false,
        },
        label: {
          color: '#6e7079',
          overflow: 'none',
          formatter: '',
        },
        data: [
          { value: 30, name: '熔炼一部' },
          { value: 32, name: '熔炼二部' },
          { value: 18, name: '熔炼三部' },
          { value: 18, name: '熔炼四部' },
        ],
      },
    },
    lineOption: {
      color: ['#FF8080', '#5E95FF', '#8A2BE2', '#4460DE', '#E8D316', '#55CCD8'],
      title: {
        text: '单位：万吨',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
      },
      legend: {
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 20,
        right: 20,
        textStyle: {
          color: '#85878e',
        },
        data: ['机加产线1', '压铸产线1', '熔炼产线1'],
      },
      xAxis: [
        {
          type: 'category',
          // axisLabel: {
          //   interval: 0, // 坐标轴刻度标签的显示间隔
          //   rotate: 125, // 标签倾斜的角度
          // },
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          min: 0,
          max: 100,
          splitNumber: 4,
        },
      ],
      series: [
        {
          name: '机加产线1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            },
          },
          data: [40, 50, 50, 30, 20, 50, 32, 19, 20, 50, 32, 19],
        },
        {
          name: '压铸产线1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            },
          },
          data: [41, 40, 40, 20, 20, 30, 32, 29, 20, 30, 32, 29],
        },
        {
          name: '熔炼产线1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            },
          },
          data: [40, 40, 40, 20, 10, 40, 22, 9, 20, 30, 32, 29],
        },
      ],
    },
    barOption: {
      color: ['#00CACF', '#5E95FF', '#FF9100'],
      title: {
        text: '单位：次',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      grid: {
        left: 20,
        right: 30,
        bottom: 20,
        containLabel: true,
      },
      legend: {
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 20,
        right: 20,
        textStyle: {
          color: '#85878e',
        },
        data: ['巡检次数', '故障次数', '故障率'],
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          // minInterval: 1,
          min: 0,
          max: 8000,
          splitNumber: 4,
        },

        {
          type: 'value',
          name: '',
          min: 0,
          // max: 10000,
          // interval: 5,
          axisLabel: {
            formatter: '{value} %',
          },
        },
      ],
      series: [
        {
          name: '巡检次数',
          type: 'bar',
          barWidth: 10,
          data: [2000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
        },
        {
          name: '故障次数',
          type: 'bar',
          barWidth: 10,
          data: [3000, 2000, 3330, 5001, 3202, 4203, 3205, 2000, 3100, 5000, 6100, 3100, 4100],
        },
        {
          name: '故障率',
          type: 'line',
          yAxisIndex: 1,
          data: [1000, 2000, 3333, 5000, 3200, 4200, 2200, 2100, 3000, 5100, 2000, 3200, 1800],
        },
      ],
    },
    total: 0,

    bar2Option: {
      color: ['#55CCD8', '#FC7690', '#FFCF47', '#2ec7c9'],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        textStyle: {
          color: '#fff',
        },
        formatter: '{b}<br/>{c}' + '<br/>' + '{d}%',
      },
      legend: {
        bottom: '10%',
        left: 'center',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#85878e',
        },
        formatter: formate2,
      },
      series: {
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '38%'],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        data: [
          { value: 345, name: '压铸一部' },
          { value: 96, name: '压铸二部' },
        ],
      },
    },
  });

  const homePieChart = ref<HTMLDivElement>();
  const homePieChart2 = ref<HTMLDivElement>();
  const homePieChart3 = ref<HTMLDivElement>();
  const homeLineChart = ref<HTMLDivElement>();
  const homeBar2Chart = ref<HTMLDivElement>();
  const homeBarChart = ref<HTMLDivElement>();

  onMounted(async () => {
    // data.Statistics = ;
    // data.dataOne = [];
    // data.pieOption.series.data = data.dataOne;
    // data.lineOption.series = [];
    // data.lineOption.xAxis.data = [];

    nextTick(() => {
      let myChart = markRaw(echarts.init(unref(homePieChart) as HTMLDivElement));
      myChart.setOption(data.pieOption, true);
      myChart.resize(); //显示区域大小发生改变更新图表

      let myChart2 = markRaw(echarts.init(unref(homePieChart2) as HTMLDivElement));
      myChart2.setOption(data.pie2Option, true);
      myChart2.resize(); //显示区域大小发生改变更新图表

      let myChart3 = markRaw(echarts.init(unref(homePieChart3) as HTMLDivElement));
      myChart3.setOption(data.pie3Option, true);
      myChart3.resize(); //显示区域大小发生改变更新图表

      let myChart4 = markRaw(echarts.init(unref(homeLineChart) as HTMLDivElement));
      myChart4.setOption(data.lineOption, true);
      myChart4.resize(); //显示区域大小发生改变更新图表

      // let myChart5 = markRaw(echarts.init(unref(homeBar2Chart) as HTMLDivElement));
      // myChart5.setOption(data.bar2Option, true);
      // myChart5.resize(); //显示区域大小发生改变更新图表

      let myChart6 = markRaw(echarts.init(unref(homeBarChart) as HTMLDivElement));
      myChart6.setOption(data.barOption, true);
      myChart6.resize(); //显示区域大小发生改变更新图表
    });
  });
</script>

<style lang="less" scoped>
  .title-chose {
    float: right;
    margin-right: 20px;

    span {
      text-align: center;
      padding: 0 12px;
      display: inline-block;
      color: #333;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      cursor: pointer;
      margin-left: 10px;

      &.cur,
      &:active {
        background-color: #5e95ff;
        color: #fff;
      }
    }
  }

  .box-bg {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);

    .box-bg-title {
      border-bottom: 1px solid #eee;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .title-text {
      padding: 0 15px;
    }
    .item-f {
      padding: 10px 10px 0;
      width: 400px;
      height: 200px;
      box-sizing: border-box;

      .unit {
        font-size: 12px;
        color: #707070;
        margin-bottom: 30px;
      }

      .pucharse {
        display: flex;
        margin-bottom: 24px;
        padding: 0 10px;

        .labels {
          width: 80px;
          font-size: 12px;
          color: #707070;
          line-height: 24px;
          text-align: right;
          padding-right: 10px;
        }

        .values {
          background: rgb(94 149 255 / 50%);
          height: 24px;
          line-height: 24px;
          flex: 1;
          font-size: 12px;
          color: #fff;
          text-align: right;
          display: flex;
          justify-content: space-between;
          position: relative;

          .actual {
            background: linear-gradient(270deg, #5e95ff 0%, #695eff 100%);
            height: 24px;
          }

          &:hover {
            background: rgb(255 196 96 / 50%);

            .actual {
              background: linear-gradient(270deg, #ffc45e 0%, #ff9100 100%);
            }
          }
        }
      }
    }
    .item {
      padding: 10px 10px 0;
      width: 100%;
      height: 330px;
      box-sizing: border-box;

      .unit {
        font-size: 12px;
        color: #707070;
        margin-bottom: 30px;
      }

      .pucharse {
        display: flex;
        margin-bottom: 24px;
        padding: 0 10px;

        .labels {
          width: 80px;
          font-size: 12px;
          color: #707070;
          line-height: 24px;
          text-align: right;
          padding-right: 10px;
        }

        .values {
          background: rgb(94 149 255 / 50%);
          height: 24px;
          line-height: 24px;
          flex: 1;
          font-size: 12px;
          color: #fff;
          text-align: right;
          display: flex;
          justify-content: space-between;
          position: relative;

          .actual {
            background: linear-gradient(270deg, #5e95ff 0%, #695eff 100%);
            height: 24px;
          }

          &:hover {
            background: rgb(255 196 96 / 50%);

            .actual {
              background: linear-gradient(270deg, #ffc45e 0%, #ff9100 100%);
            }
          }
        }
      }
    }
  }

  .mumber-box {
    margin: 2px -5px 10px;
    display: flex;
    justify-content: space-between;

    .mumber {
      padding: 20px;
      box-sizing: border-box;
      margin: 0 5px;
      flex: 1;
      height: 120px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);
      border-radius: 5px;

      .mum-left {
        float: left;
        width: 24%;
        margin-top: 6px;

        .index-img {
          display: inline-block;
          width: 100%;
        }
      }

      .mum-right {
        margin-left: 6%;
        float: left;
        width: 70%;

        .mum-title {
          font-size: 14px;
        }

        .mum {
          font-size: 24px;
          font-weight: bolder;
          line-height: 40px;
          color: #5e95ff;
        }

        .mum-than {
          font-size: 14px;

          .icon {
            padding-left: 8px;
          }
        }
      }
    }
  }

  .ant-col {
    margin-bottom: 10px;
  }
</style>
