hitch-sb-antd/src/views/statisticView/22.vue

<template>
  <div class="view-container">
    <div class="title">
      <div style="position: absolute;">
        <img src="@/assets/22title.png" alt="">
      </div>
      <div class="text">
        <div> 设备管理系统数据大屏展示平台</div>
        <div style="font-size: 15px;color: #A7DBFF;">Equipment management system data large screen display platform</div>
      </div>
    </div>
    <div class="main">
      <a-row :gutter="16">
        <a-col :span="8">
          <div class="box">
            <div class="box-title">
              <div></div>
              <div class="box-title-text">
                <span style="padding: 0 40px;">
                  故障月统计
                </span>
              </div>
              <div></div>
            </div>
            <div class="box-chart" >
              <div id="chart1"></div>
            </div>
          </div>
          <div class="box" style="height:452px;">
            <div class="box-title">
              <div></div>
              <div class="box-title-text">
                <span style="padding: 0 40px;">
                  保养率月统计
                </span>
              </div>
              <div></div>
            </div>
            <div class="box-chart" >
              <div id="chart2"></div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="box" style="height:886px;">
            <div class="box-title">
              <div></div>
              <div class="box-title-text">
                <span style="padding: 0 40px;">
                  设备指标
                </span>
              </div>
              <div></div>
            </div>
            <div class="box-chart2" >
              <div style="display:flex;justify-content: space-between; position: relative;">
                <span class="card-num">1</span>
                <span class="card-num">2</span>
                <span class="card-num">3</span>
                <span class="card-num">4</span>
                <span class="card-num">5</span>
                <span class="card-num">6</span>
                <span style=" position: absolute; bottom:-15px;right:-30px;color: #CDFBFF;line-height: 73px;font-size: 23px;">个</span>
              </div>
              <div>
                <a-row type="flex" justify="space-between">
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">OEE</div>
                    <div style="font-size:22px;">55%</div>
                  </a-col>
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">故障率</div>
                    <div style="font-size:22px;">55%</div>
                  </a-col>
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">MTTR</div>
                    <div style="font-size:22px;">55min</div>
                  </a-col>
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">MTBF</div>
                    <div style="font-size:22px;">55h</div>
                  </a-col>
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">保养完成率</div>
                    <div style="font-size:22px;">55%</div>
                  </a-col>
                  <a-col :span="8" class="box-middle-sum">
                    <div style="font-size:14px;">严重事故</div>
                    <div style="font-size:22px;">5</div>
                  </a-col>
                </a-row>
              </div>
              <div id="chart3"></div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="box">
            <div class="box-title">
              <div></div>
              <div class="box-title-text">
                <span style="padding: 0 40px;">
                  三率指标
                </span>
              </div>
              <div></div>
            </div>
            <div class="box-chart" >
              <div id="chart4"></div>
              <div style="font-size:17px; color:rgba(0, 190, 189, 1); display:flex;justify-content: space-around;">
                <span>完成率</span>
                <span>待修率</span>
                <span>故障率</span>
              </div>
            </div>
          </div>
          <div class="box" style="height:452px;">
            <div class="box-title">
              <div></div>
              <div class="box-title-text">
                <span style="padding: 0 40px;">
                  设备费用排行
                </span>
              </div>
              <div></div>
            </div>
            <div class="box-chart" >
              <a-list item-layout="horizontal" :data-source="list1">
                <a-list-item slot="renderItem" slot-scope="item" class="list">
                  <a-list-item-metas>
                    <span slot="title"> <my-icon type="icon-lingxing" /> {{ item.title }}</span>
                  </a-list-item-metas>
                  <div>{{ item.time }}</div>
                </a-list-item>
              </a-list>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { Chart, registerTheme } from '@antv/g2'
export default {
  data () {
    return {
      chart1: [
        { name: 'A', year: '2019', value: 3 },
        { name: 'B', year: '2019', value: 5 },
        { name: 'C', year: '2019', value: 21 },
        { name: 'D', year: '2019', value: 12 },

        { name: 'A', year: '2020', value: 15 },
        { name: 'B', year: '2020', value: 12 },
        { name: 'C', year: '2020', value: 13 },
        { name: 'D', year: '2020', value: 12 },

        { name: 'A', year: '2021', value: 12 },
        { name: 'B', year: '2021', value: 13 },
        { name: 'C', year: '2021', value: 11 },
        { name: 'D', year: '2021', value: 12 },

        { name: 'A', year: '2022', value: 17 },
        { name: 'B', year: '2022', value: 12 },
        { name: 'C', year: '2022', value: 11 },
        { name: 'D', year: '2022', value: 15 }
      ],
      chart2: [
        { name: 'A', year: '2019', value: 3 },
        { name: 'B', year: '2019', value: 5 },
        { name: 'C', year: '2019', value: 21 },
        { name: 'D', year: '2019', value: 12 },

        { name: 'A', year: '2020', value: 5 },
        { name: 'B', year: '2020', value: 1 },
        { name: 'C', year: '2020', value: 13 },
        { name: 'D', year: '2020', value: 12 },

        { name: 'A', year: '2021', value: 2 },
        { name: 'B', year: '2021', value: 13 },
        { name: 'C', year: '2021', value: 11 },
        { name: 'D', year: '2021', value: 12 },

        { name: 'A', year: '2022', value: 7 },
        { name: 'B', year: '2022', value: 12 },
        { name: 'C', year: '2022', value: 1 },
        { name: 'D', year: '2022', value: 15 }
      ],
      chart3: [
        { year: '2001', population: 54.8 },
        { year: '2002', population: 38 },
        { year: '2003', population: 5.7 },
        { year: '2004', population: 30.7 },
        { year: '2005', population: 25.8 },
        { year: '2006', population: 11.7 }
      ],
      chart4: [
        { type: '完好率', value: 90 },
        { type: '待修率', value: 5 },
        { type: '故障率', value: 5 }
      ],
      list1: [
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' },
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' },
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' },
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' },
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' },
        { title: '武汉市xxx餐饮集团有限公司',
          time: '2017-08-08' }
      ]
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    getChart () {
      this.getChart1('chart1', this.chart1)
      this.getChart2('chart2', this.chart2)
      this.getChart3('chart3', this.chart3)
      this.getChart4('chart4', this.chart4)
    },
    getChart1 (id, data) {
      registerTheme('myTheme', {
        columnWidthRatio: 0.2,
        colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
      })
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 300
      })

      chart.data(data)
      chart.scale('value', {
        nice: true,
        range: [0, 1]

      })

      chart.tooltip({
        shared: true,
        showMarkers: false
      })
      chart.legend('year', {
        itemName: {
          style: {
            fill: '#03D3D3 ',
            fontSize: 14
          }
        }
      })
      chart
        .interval()
        .position('year*value')
        .color('name')
        .adjust('stack')

      chart.interaction('active-region')
      chart.theme('myTheme')
      chart.render()
    },
    getChart2 (id, data) {
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 300
      })

      chart.data(data)
      chart.scale({
        year: {
          range: [0, 1]
        },
        value: {
          nice: true
        }
      })
      chart.legend('name', {
        position: 'bottom',
        offsetY: 10,
        itemName: {
          style: {
            fill: '#03D3D3 ',
            fontSize: 14
          }
        }
      })
      chart.tooltip({
        shared: true,
        showCrosshairs: true
      })

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

      chart
        .line()
        .position('year*value')
        .color('name')
        .shape('smooth')

      chart.theme({ 'styleSheet': { 'brandColor': '#  ', 'paletteQualitative10': ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4', '#F08BB4'], 'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16', '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7', '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'] } })
      chart.render()
    },
    getChart3 (id, data) {
      registerTheme('myTheme', {
        columnWidthRatio: 0.2,
        colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
      })
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 400,
        padding: [50, 0, 20, 0]
      })
      chart.data(data)
      chart.coordinate('polar', {
        innerRadius: 0.2
      })
      chart.legend('year', {
        position: 'bottom',
        offsetY: 10,
        itemName: {
          style: {
            fill: '#03D3D3 ',
            fontSize: 14
          }
        }
      })
      chart.axis(false)
      chart.tooltip({
        showMarkers: false
      })
      chart.interaction('element-highlight')
      chart
        .interval()
        .position('year*population')
        .color('year')
        .style({
          lineWidth: 1,
          stroke: '#fff'
        }).label('population', {
          style: {
            fill: '#03D3D3',
            fontSize: 16
          },
          layout: {
            type: 'fixed-overlap'
          },
          offset: 30,
          content: (data) => {
            return `${data.population}个`
          }
        })
      chart.theme('myTheme')
      chart.render()
    },
    getChart4 (id, data) {
      const chart = new Chart({
        container: id,
        autoFit: true,
        height: 250
      })
      chart.data(data)
      chart.legend(false)
      chart.tooltip({
        showMarkers: false
      })
      chart.facet('rect', {
        fields: ['type'],
        padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data
          let color
          if (data[0].type === '完好率') {
            color = 'RGBA(13, 212, 219, 1)'
          } else if (data[0].type === '待修率') {
            color = 'RGBA(40, 254, 8, 1)'
          } else {
            color = 'RGBA(255, 0, 0, 1)'
          }
          data.push({ type: '其他', value: 100 - data[0].value })
          view.data(data)
          view.coordinate('theta', {
            radius: 0.8,
            innerRadius: 0.9
          })
          view
            .interval()
            .adjust('stack')
            .position('value')
            .color('type', [color, 'RGBA(20, 60, 145, 1)'])
            .style({
              opacity: 1
            })

          view.annotation().text({
            position: ['50%', '50%'],
            content: data[0].value + '%',
            style: {
              fontSize: 25,
              fill: 'RGBA(13, 212, 219, 1)',
              fontWeight: 500,
              textAlign: 'center'
            }
          })

          view.interaction('element-active')
        }
      })
      chart.render()
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
background-color: RGBA(0, 7, 73, 0.8);
padding:35px 21px;
}
.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;
}
.title{
  height: 89px;
  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;
}
}

.main{
padding-top:35px;
.box{
  width: 609px;
  height: 404px;
  background: rgba(3, 129, 255, 0.05);
  border: 1px solid #0096FF;
  box-shadow: 0px 0px 30px 0px rgba(0, 128, 202, 0.8) inset;
  border-radius: 5px;
  margin-bottom: 30px;;
  .box-title{
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #A7DBFF;

  line-height: 25px;
  .box-title-text{
    position: relative;
    z-index: 999;
    padding-bottom: 7px;;
  }
  .box-title-text::before{
    content: '';
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  z-index: -1;
  background-color: rgb(46, 37, 77);
    border: 1px solid #0096FF;
    border-top: none;
   box-shadow: 0px 29px 30px 0px rgba(0, 128, 202, 0.3);
  transform: perspective(.5em) rotateX(-3deg);
  }
  }
  .box-chart{
   padding: 20px;
   .list{
     padding: 22px 16px;
     background:RGBA(12, 38, 70, 0.5);
     color:rgba(0, 190, 189, 1);
     border-bottom:1px solid RGBA(21, 72, 62, 1);
   }
  }
  .box-chart2{
   padding: 70px;
      .box-middle-sum{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     margin-top:30px;
     color: #00FFFF;
     width: 117px;
     height: 74px;
     background: rgba(28, 45, 104, 0.24);
     border: 2px solid #4574D6;
     border-radius: 20px;
     box-shadow: 0px 0px 30px 0px RGBA(28, 59, 138, 1) inset;
   }
   #chart3{
     padding-top:20px;
   }
  }
  .card-num{
  padding:15px;
  font-size: 55px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #CDFBFF;
  line-height: 73px;
  background:linear-gradient(#00EDFE,#006DC5);
  border-radius: 3px;
  }
}
}
</style>