<template>
  <div id="my_index">
    <div class="viewBar">
      <div v-for="item in list">
        <div class="item">
          <div class="title"
            >{{ item.title }}<span>{{ item.unit }}</span></div
          >
          <div class="count">{{ item.count }}</div>
        </div>
        <div class="icon">
          <img :src="item.icon" />
        </div>
      </div>
    </div>
    <div class="echart_box">
      <div class="left">
        <div>
          <div class="title_box">库总量同比及趋势分析</div>
          <div class="erchats1"></div>
        </div>
        <div>
          <div class="title_box">库存周转趋势分析</div>
          <div class="erchats2"></div>
        </div>
      </div>
      <div class="right">
        <div>
          <div class="title_box">在库总量分析</div>
          <div class="erchats3"></div>
        </div>
        <div>
          <div class="title_box">呆滞品总量分析</div>
          <div class="erchats4"></div>
        </div>
        <div>
          <div class="title_box">在库总量分析</div>
          <div class="erchats5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        list: [
          {
            title: '库存总量',
            unit: '(单位)',
            count: 1557,
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '库存周转天数',
            unit: '(单位)',
            count: 789,
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '库存周转率',
            unit: '(单位)',
            count: 346,
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '呆滞品总量',
            unit: '(单位)',
            count: 678,
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '产成品总量',
            unit: '(单位)',
            count: 2451,
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '原材料总量',
            unit: '(单位)',
            count: 1689,
            icon: require('../../../assets/index/Vector@2x.png')
          }
        ]
      };
    },
    mounted() {
      this.initCharts1();
      this.initCharts2();
      this.initCharts3();
      this.initCircle1();
      this.initCircle2();
    },
    methods: {
      initCharts3() {
        var myChart = echarts.init(document.querySelector('.erchats4'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '轴承',
                '升降机',
                '冲压杆',
                '冷却水管',
                '液压机',
                '电机',
                '水泵机'
              ],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '个',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                color: '#20BE4B'
              },
              data: [200, 152, 200, 334, 390, 330, 220]
            }
          ]
        };
        myChart.setOption(option);
      },
      initCircle1() {
        var myChart = echarts.init(document.querySelector('.erchats3'));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          graphic: {
            //图形中间图片
            elements: [
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '14.5%',
                top: '44%',
                style: {
                  text: '在库总量(台)',
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 12,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              },
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '17.5%',
                top: '53%',
                style: {
                  text: '240',
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 18,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              }
            ]
          },
          legend: {
            top: 'center',
            right: '15%',
            type: 'scroll',
            orient: 'vertical',
            itemGap: 15,
            textStyle: {
              rich: {
                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                oneone: {
                  // 设置文字、数学、英语这一列的样式
                  width: 100,
                  color: '#000',
                  fontSize: 12,
                  fontWeight: 'bolder'
                },
                twotwo: {
                  // 设置10分、20分、30分这一列的样式
                  width: 35,
                  color: '#000',
                  fontSize: 12
                },
                threethree: {
                  // 设置百分比这一列的样式
                  width: 20,
                  color: '#000',
                  fontSize: 12
                }
              }
            },
            formatter: (name) => {
              return `{oneone|${name}}  {twotwo|40}   {threethree|(40%)}`;
            }
          },
          series: [
            {
              name: '工单',
              type: 'pie',
              radius: ['70%', '90%'],
              center: ['20%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              padAngle: 5,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 12, name: '进行中(正常)' },
                { value: 33, name: '进行中(延期)' },
                { value: 44, name: '未开始' },
                { value: 22, name: '已验收' },
                { value: 10, name: '已结束' },
                { value: 30, name: '已暂停' }
              ]
            }
          ]
        };
        myChart.setOption(option);
      },
      initCircle2() {
        var myChart = echarts.init(document.querySelector('.erchats5'));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          graphic: {
            //图形中间图片
            elements: [
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '14.5%',
                top: '44%',
                style: {
                  text: '在库总量(台)',
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 12,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              },
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '17.5%',
                top: '53%',
                style: {
                  text: '240',
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 18,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              }
            ]
          },
          legend: {
            top: 'center',
            right: '15%',
            type: 'scroll',
            orient: 'vertical',
            itemGap: 15,
            textStyle: {
              rich: {
                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                oneone: {
                  // 设置文字、数学、英语这一列的样式
                  width: 100,
                  color: '#000',
                  fontSize: 12,
                  fontWeight: 'bolder'
                },
                twotwo: {
                  // 设置10分、20分、30分这一列的样式
                  width: 35,
                  color: '#000',
                  fontSize: 12
                },
                threethree: {
                  // 设置百分比这一列的样式
                  width: 20,
                  color: '#000',
                  fontSize: 12
                }
              }
            },
            formatter: (name) => {
              return `{oneone|${name}}  {twotwo|40}   {threethree|(40%)}`;
            }
          },
          series: [
            {
              name: '工单',
              type: 'pie',
              radius: ['70%', '90%'],
              center: ['20%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              padAngle: 5,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 12, name: '进行中(正常)' },
                { value: 33, name: '进行中(延期)' },
                { value: 44, name: '未开始' },
                { value: 22, name: '已验收' },
                { value: 10, name: '已结束' },
                { value: 30, name: '已暂停' }
              ]
            }
          ]
        };
        myChart.setOption(option);
      },
      initCharts1() {
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        var myChart = echarts.init(document.querySelector('.erchats1'));
        myChart.setOption({
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '8%'
          },
          legend: {
            data: ['2023', '2024', '趋势']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
              ]
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            {
              type: 'value',
              name: '2024',
              show: false,
              position: 'right',
              alignTicks: true,
              offset: 80,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: '(单位:pcs)',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '2023',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {
                color: '#3976F1'
              },
              data: [
                212.0, 144.9, 127.0, 223.2, 225.6, 176.7, 135.6, 162.2, 232.6,
                220.0, 186.4, 213.3
              ]
            },
            {
              name: '2024',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '20%',
              itemStyle: {
                color: '#5DD07C'
              },
              data: [
                212.6, 215.9, 189.0, 126.4, 228.7, 170.7, 175.6, 182.2, 248.7,
                118.8, 226.0, 222.3
              ]
            },
            {
              name: '趋势',
              type: 'line',
              yAxisIndex: 2,
              itemStyle: {
                color: '#FF9669'
              },
              data: [
                2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
              ]
            }
          ]
        });
      },
      initCharts2() {
        var myChart = echarts.init(document.querySelector('.erchats2'));
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '8%'
          },
          legend: {
            data: ['当年存货周转率', '去年存货周转率', '当年趋势', '去年趋势']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
              ]
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            {
              type: 'value',
              name: '2024',
              show: false,
              position: 'right',
              alignTicks: true,
              offset: 80,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: '(单位:pcs)',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '当年存货周转率',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {
                color: '#FF9669'
              },
              data: [
                200.0, 112.9, 177.0, 223.2, 125.6, 176.7, 135.6, 162.2, 132.6,
                120.0, 186.4, 193.3
              ]
            },
            {
              name: '去年存货周转率',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '20%',
              itemStyle: {
                color: '#26ADAD'
              },
              data: [
                222.6, 115.9, 219.0, 226.4, 128.7, 270.7, 175.6, 182.2, 248.7,
                188.8, 216.0, 192.3
              ]
            },
            {
              name: '当年趋势',
              type: 'line',
              yAxisIndex: 2,
              itemStyle: {
                color: '#FF8855'
              },
              data: [
                22.0, 12.2, 23.3, 14.5, 26.3, 10.2, 20.3, 23.4, 23.0, 16.5,
                12.0, 16.2
              ]
            },
            {
              name: '去年趋势',
              type: 'line',
              yAxisIndex: 2,
              itemStyle: {
                color: '#095BFF'
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
                2.3
              ]
            }
          ]
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #my_index {
    height: calc(100vh - 96px);
    display: flex;
    width: 100%;
    padding: 10px;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #dbdbdb;
    .viewBar {
      height: 93px;
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      > div {
        flex: 1;
        margin-left: 10px;
        background: linear-gradient(to right, #2d80ee 100%, #e9f2ff 50%);
        border-radius: 8px;
        display: flex;
        padding: 0 20px;
        box-sizing: border-box;
        .item {
          flex: 1;
          display: flex;
          flex-direction: column;
          .title {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
            > span {
              font-size: 12px;
            }
          }
          .count {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 35px;
            color: rgba(255, 255, 255, 1);
          }
        }
        .icon {
          width: 50px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            height: 50px;
            width: 50px;
          }
        }
      }
      > div:first-child {
        margin-left: 0;
      }
    }
    .echart_box {
      display: flex;
      flex: 1;
      .left {
        flex: 5;
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        height: 100%;
        > div:first-child {
          margin-bottom: 10px;
        }
        > div {
          flex: 1;
          background-color: #fff;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          .title_box {
            font-size: 14px;
            padding-bottom: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e8e8;
          }
          > div:last-child {
            flex: 1;
          }
        }
      }
      .right {
        flex: 3;
        display: flex;
        flex-direction: column;
        height: 100%;
        > div {
          flex: 1;
          padding: 10px;
          box-sizing: border-box;
          background-color: #fff;
          margin-bottom: 10px;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          .title_box {
            font-size: 14px;
            padding-bottom: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e8e8;
          }
          > div:last-child {
            flex: 1;
          }
        }
        > div:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
