<template>
  <div class="view-container">
    <div class="titles">
      <div style="position: absolute;">
        <img src="@/assets/22title.png" alt="">
      </div>
      <div class="text">
        <div> 仓库管理系统数据大屏展示平台</div>
        <div style="font-size: 15px;color: #A7DBFF;">Warehouse management system data large screen display platform</div>
      </div>
    </div>
    <div class="top">
      <div class="top-left">
        <div class="top-left-top">
          <div class="title">年入库备件价值占比</div>
          <div style="display:flex; justify-content:space-between;padding-right: 40px; position:relative">
            <div id="chart1"></div>
            <div style="position:absolute;top:0;left:60px;color: #C3CAD9;">备件价值：<span style="color:white;font-size:24px;">432,452￥</span></div>
            <div style="width: 474px;height: 196px;">
              <table>
                <thead>
                  <tr style="display: flex;justify-content: space-between; background:RGBA(22, 38, 81, 1);">
                    <th class="list-header " style="width:232px">备件名称</th>
                    <th class="list-header">备件价值</th>
                    <th class="list-header">价值占比</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(list,i) in list1" :key="i" style="display: flex;justify-content: space-between;">
                    <td class="list-header" style="width:232px;">{{ list.year }}</td>
                    <td class="list-header" :style="color[i]">{{ list.sales }}</td>
                    <td class="list-header" style="">{{ list.date }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="top-left-bottom">
          <div class="title">出入库类型数量占比</div>
          <div style="display:flex; justify-content: space-between; padding: 0 30px; align-items: center; position: relative;">
            <div>
              <div id="chart2"></div>
              <div style="position: absolute;left:100px;bottom:0px;">入库类型占比</div>
            </div>
            <a-divider style="height: 200px;background-color: rgba(153, 204, 255, 0.1);" type="vertical" />
            <div>
              <div id="chart22"></div>
              <div style="position: absolute;right:200px;bottom:0px;">出库类型占比</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="top-right-top">
          <div class="title">年出入库备件价值统计</div>
          <div style="display:flex; justify-content: space-around; color:#8A92A2;padding-bottom:30px;">
            <div style="display:flex; align-items: center;  width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
              <my-icon style="font-size:42px;padding: 0 24px;" type="icon-rukuguanli" />
              <div style="text-align:center; ">
                <div style="font-size:14px;">入库备件价值</div>
                <div style="font-size:24px; color:#fff;">444444</div>
              </div>
            </div>
            <div style="display:flex; align-items: center;  width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
              <my-icon style="font-size:42px;padding: 0 24px;" type="icon-zhibiao" />
              <div style="text-align:center; ">
                <div style="font-size:14px;">仓库总备件价值</div>
                <div style="font-size:24px; color:#fff;">444444</div>
              </div>
            </div>
            <div style="display:flex; align-items: center;  width: 250px;height: 75px; background:#1C3058;border: 1px solid rgba(153, 204, 255, 0.2);">
              <my-icon style="font-size:42px;padding: 0 24px;" type="icon-chukuguanli" />
              <div style="text-align:center; ">
                <div style="font-size:14px;">出库备件价值</div>
                <div style="font-size:24px; color:#fff;">444444</div>
              </div>
            </div>
          </div>
          <div id="chart4"></div>
        </div>
        <div class="top-right-bottom">
          <div
            style="width: 24px;height: 52px;font-size: 24px;padding:24px">通知</div>
          <div style="width:730px;height:113px;padding: 25px  0">
            <a-list :split="false" size="small" :data-source="information">
              <a-list-item style="color:#B9BFD6;padding:0 30px; " slot="renderItem" slot-scope="item">
                <a-list-item-meta>
                  <div slot="title" style="color:red" :href="item.href">
                    <my-icon style="color: #fff; font-size: 16px;" type="icon-laba" />
                    {{ item.name }}
                  </div>
                </a-list-item-meta>
                <div style="color:red">
                  {{ item.time }}
                </div>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="title">出入库备件数量统计</div>
        <div style="display:flex;justify-content: space-between;">
          <div style="width: 33%;height:220px;">
            <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
              <div>入库备件数量统计</div>
              <div>入库总数：<span style="color:#228FFE; font-weight: bold;">33333</span></div>
            </div>
            <div id="chart3"></div>
          </div>
          <div style="width: 33%;height:220px;">
            <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
              <div>入库备件数量统计</div>
              <div>入库总数：<span style="color:#00D98B; font-weight: bold;">33333</span></div>
            </div>
            <div id="chart33"></div>
          </div>
          <div style="width: 33%;height:220px;">
            <div style="padding:0 50px 20px 50px;display: flex; justify-content: space-between;font-size: 16px;">
              <div>入库备件数量统计</div>
              <div>入库总数：<span style="color:#F45E23; font-weight: bold;">33333</span></div>
            </div>
            <div id="chart333"></div>
          </div>
        </div>
      </div>
      <div class="bottom-right">
        <div class="title">仓库核心数据</div>
        <div style="padding: 10px 30px;">
          <div style="padding:16px 0;">备件预警数据</div>
          <div>
            <table>
              <tbody>
                <tr v-for="(list,i) in list2" :key="i" style="display: flex;justify-content: space-between;">
                  <td class="list-header" style="width:145px;">{{ list.year }}</td>
                  <td class="list-header" style="width:145px;">{{ list.sales }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="padding:0 30px;">
          <div style="padding:16px 0;">备件关键数据</div>
          <div>
            <table>
              <tbody>
                <tr v-for="(list,i) in list3" :key="i" style="display: flex;justify-content: space-between;">
                  <td class="list-header" style="width:145px;">{{ list.year }}</td>
                  <td class="list-header" style="width:145px;">{{ list.sales }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart, registerShape, registerTheme } from '@antv/g2'
export default {
  data () {
    return {
      information: [
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        }

      ],
      list1: [
        { year: '人工费用', sales: 382, date: '16%' },
        { year: '备件费用', sales: 522, date: '16%' },
        { year: '材料费用', sales: 612, date: '16%' },
        { year: '备件费用', sales: 522, date: '16%' }
      ],
      list2: [
        { year: '备件预警类别', sales: 382 },
        { year: '备件预警数量', sales: 522 },
        { year: '备件预警价值', sales: 612 }
      ],
      list3: [
        { year: '备件领用总价值', sales: 382 },
        { year: '采购入库总价值', sales: 522 }
      ],
      color: [
        { color: '#E93C49' },
        { color: '#FF6123' },
        { color: '#E9AF00' },
        { color: '#02B47B' }
      ],
      chart1: [{ value: 77.5 }],
      chart2: [
        { day: '采购入库', percent: 30, value: 300 },
        { day: '闲置入库', percent: 20, value: 200 },
        { day: '调拨入库', percent: 20, value: 200 },
        { day: '其他入库', percent: 50, value: 500 }
      ],
      chart22: [
        { day: '领用出库', percent: 30, value: 300 },
        { day: '调拨出库', percent: 20, value: 200 },
        { day: '报废出库', percent: 20, value: 200 },
        { day: '其他出库', percent: 50, value: 500 }
      ],
      chart3: [
        { day: '1月', percent: 6000 },
        { day: '2月', percent: 4000 },
        { day: '3月', percent: 5000 },
        { day: '4月', percent: 6000 },
        { day: '5月', percent: 7000 },
        { day: '6月', percent: 6000 }
      ],
      chart4: [
        { month: 'Jan', city: '出库备件价值', temperature: 70500 },
        { month: 'Jan', city: '仓库总备件价值', temperature: 39050 },
        { month: 'Jan', city: '入库备件价值', temperature: 40509 },
        { month: 'Feb', city: '出库备件价值', temperature: 69500 },
        { month: 'Feb', city: '仓库总备件价值', temperature: 42500 },
        { month: 'Feb', city: '入库备件价值', temperature: 42500 },

        { month: 'Mar', city: '出库备件价值', temperature: 90550 },
        { month: 'Mar', city: '仓库总备件价值', temperature: 57500 },
        { month: 'Mar', city: '入库备件价值', temperature: 70507 },

        { month: 'Apr', city: '出库备件价值', temperature: 34550 },
        { month: 'Apr', city: '仓库总备件价值', temperature: 89550 },
        { month: 'Apr', city: '入库备件价值', temperature: 30550 },

        { month: 'May', city: '出库备件价值', temperature: 68054 },
        { month: 'May', city: '仓库总备件价值', temperature: 110590 },
        { month: 'May', city: '入库备件价值', temperature: 40509 },

        { month: 'Jun', city: '出库备件价值', temperature: 21505 },
        { month: 'Jun', city: '仓库总备件价值', temperature: 65502 },
        { month: 'Jun', city: '入库备件价值', temperature: 105002 },

        { month: 'Jul', city: '出库备件价值', temperature: 25052 },
        { month: 'Jul', city: '仓库总备件价值', temperature: 47050 },
        { month: 'Jul', city: '入库备件价值', temperature: 47005 },

        { month: 'Aug', city: '出库备件价值', temperature: 26055 },
        { month: 'Aug', city: '仓库总备件价值', temperature: 86065 },
        { month: 'Aug', city: '入库备件价值', temperature: 45656 },

        { month: 'Sep', city: '出库备件价值', temperature: 23453 },
        { month: 'Sep', city: '仓库总备件价值', temperature: 144542 },
        { month: 'Sep', city: '入库备件价值', temperature: 144532 },

        { month: 'Oct', city: '出库备件价值', temperature: 55183 },
        { month: 'Oct', city: '仓库总备件价值', temperature: 54103 },
        { month: 'Oct', city: '入库备件价值', temperature: 87103 },

        { month: 'Nov', city: '出库备件价值', temperature: 76619 },
        { month: 'Nov', city: '仓库总备件价值', temperature: 67676 },
        { month: 'Nov', city: '入库备件价值', temperature: 74126 },

        { month: 'Dec', city: '出库备件价值', temperature: 95666 },
        { month: 'Dec', city: '仓库总备件价值', temperature: 46668 },
        { month: 'Dec', city: '入库备件价值', temperature: 66788 }

      ]
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    getChart () {
      this.getChart1('chart1', this.chart1)
      this.getChart2('chart2', this.chart2)
      this.getChart2('chart22', this.chart22)
      this.getChart3('chart3', this.chart3, '#228FFE')
      this.getChart3('chart33', this.chart3, '#00D98B')
      this.getChart3('chart333', this.chart3, '#F45E23')
      this.getChart4('chart4', this.chart4)
    },
    getChart1 (id, data) {
      registerShape('point', 'pointer', {
        draw (cfg, container) {
          const group = container.addGroup()
          const center = this.parsePoint({ x: 0, y: 0 }) // 获取极坐标系下画布中心点
          // 绘制指针
          group.addShape('line', {
            attrs: {
              x1: center.x,
              y1: center.y,
              x2: cfg.x,
              y2: cfg.y,
              stroke: cfg.color,
              lineWidth: 5,
              lineCap: 'round'
            }
          })
          group.addShape('circle', {
            attrs: {
              x: center.x,
              y: center.y,
              r: 9.75,
              stroke: cfg.color,
              lineWidth: 4.5,
              fill: '#fff'
            }
          })

          return group
        }
      })

      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 300,
        width: 300,
        padding: [40, 0, 0, 0]
      })
      chart.data(data)
      chart.scale('value', {
        min: 0,
        max: 100,
        tickInterval: 100
      })
      chart.coordinate('polar', {
        startAngle: (-10 / 8) * Math.PI,
        endAngle: (2 / 8) * Math.PI,
        radius: 0.9
      })

      chart.axis('100', false)
      chart.axis('value', {
        line: null,
        label: {
          formatter: (val) => {
            return ''
          }
        },
        subTickLine: {
          count: 4,
          length: -15
        },
        tickLine: {
          length: -15
        },
        grid: null
      })
      chart.legend(false)
      chart
        .line()
        .position('value*1')
        .color('#0B1A48')

      // 绘制仪表盘背景
      chart.annotation().arc({
        top: false,
        start: [0, 1],
        end: [100, 1],
        style: {
          // 底灰色
          stroke: '#CBCBCB',
          lineWidth: 7,
          lineDash: null
        }
      })

      // 绘制指标
      chart.annotation().arc({
        start: [0, 1],
        end: [data[0].value, 1],
        style: {
          stroke: '#00D98B',
          lineWidth: 7,
          lineDash: null
        }
      })
      // 绘制指标数字
      chart.annotation().text({
        position: ['50%', '85%'],
        content: '价值占比',
        style: {
          fontSize: 14,
          fill: '#545454',
          textAlign: 'center'
        }
      })
      chart.annotation().text({
        position: ['50%', '50%'],
        content: `${data[0].value} %`,
        style: {
          fontSize: 36,
          fill: '#00D98B',
          textAlign: 'center'
        },
        offsetY: 15
      })

      chart.render()
    },
    getChart2 (id, data) {
      registerTheme('myTheme', {
        columnWidthRatio: 0.1,
        colors10: ['#0091F1', '#FDB628', '#00E4EC', '#EB6F49', '#9C24F0 ', '#00FF00', '#9661BC', '#F6903D', '#008685', '#F08BB4']
      })
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 240,
        width: 330
      })
      chart.data(data)
      chart.scale('percent', {
        formatter: (val) => {
          val = val * 100 + '%'
          return val
        }
      })
      chart.legend('day', {
        position: 'right',
        offsetY: -40,
        itemName: {
          style: {
            fill: '#C3CAD9',
            fontSize: 12
          }
        }
      })
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8
      })
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      // 辅助文本

      chart
        .interval()
        .adjust('stack')
        .position('percent')
        .color('day')
        .label('percent', (percent) => {
          return {
            style: {
              fill: '#fff'
            },
            content: (data) => {
              return percent + '%'
            }
          }
        })
        .tooltip('day*percent', (item, percent) => {
          percent = percent + '%'
          return {
            name: item,
            value: percent
          }
        })

      chart.interaction('element-active')
      chart.theme('myTheme')
      chart.render()
    },
    getChart3 (id, data, color) {
      const chart = new Chart({
        container: id,
        width: 450,
        height: 160,
        appendPadding: [0, 0, 0, 50]
      })
      chart.data(data)
      chart.scale({

        percent: {
          min: 0,
          max: 10000,
          range: [0, 1]
        }
      })

      chart.tooltip({
        showCrosshairs: true,
        shared: true
      })

      chart.line().position('day*percent').shape('smooth')
      chart.point().position('day*percent')
      chart.theme({ 'styleSheet': { 'brandColor': color } })
      chart.render()
    },
    getChart4 (id, data) {
      registerTheme('myTheme', {
        columnWidthRatio: 1,
        colors10: ['#228FFE', '#00D98B', '#F45E23', '#EB6F49', '#9C24F0 ', '#00FF00', '#9661BC', '#F6903D', '#008685', '#F08BB4']
      })
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 320
      })

      chart.data(data)
      chart.scale({
        month: {
          range: [0, 1]
        },
        temperature: {
          nice: true
        }
      })

      chart.tooltip({
        showCrosshairs: true,
        shared: true
      })

      chart.axis('temperature', {
        label: {
          formatter: (val) => {
            return val
          }
        }
      })

      chart
        .line()
        .position('month*temperature')
        .color('city')
        .shape('smooth')
      chart.theme('myTheme')

      chart.render()
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
color:white;
font-family: Microsoft YaHei;
background-color: RGBA(0, 7, 73, 0.8);
padding:15px;
.titles{
  height: 100px;
  position: relative;
  .text{
height: 26px;
font-size: 27px;
display:flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #BDE4FF;
line-height: 25px;
}
}
}
.view-container::after {
  content: "";
  width:1920px;
  height:1080px;
  background: url(../../assets/bgView.png);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.top{
  display: flex;
  width: 100%;
  justify-content:space-between;
  .top-left{
    .top-left-top{
      width: 810px;
height: 300px;
background: #0B1A48;
border-radius: 5px;
margin-bottom: 15px;
    }
    .top-left-bottom{
      width: 810px;
height: 330px;
background: #0B1A48;
border-radius: 5px;
    }
  }
  .top-right{
    .top-right-top{
      padding:0 50px;
      width: 1065px;
height: 517px;
background: #0B1A48;
border-radius: 5px;
margin-bottom: 15px;

    }
    .top-right-bottom{
      display: flex;
      justify-content: space-between;
      width: 699px;
height: 113px;
background: #0B1A48;
border-radius: 5px;
    }
  }
}
.bottom{
    position: relative;
  display: flex;
  width: 100%;
  margin-top: 15px;
  justify-content:space-between;
  .bottom-left{
    width: 1524px;
height: 290px;
background: #0B1A48;
border-radius: 5px;
  }
  .bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 351px;
height: 418px;
background: #0B1A48;
border-radius: 5px;
  }
}
.title{
  width: 100%;
  font-size: 24px;
  padding: 15px;
  text-align: center;
  color: #D9EFFF;
}
.list-header{
     margin:0;
     padding: 0 10px;
      width: 120px;
height: 41px;
font-size: 14px;
color: #C3CAD9;
font-weight: 400;
font-family: Microsoft YaHei;
display: flex;
justify-content: center;
align-items: center;
   }
   table,table tr th, table tr td { border:1px solid rgba(197, 196, 202, 0.1); }
 table { border-collapse: collapse;}
</style>
