hitch-sb-antd/src/views/statisticView/44.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;">Large screen display platform for device data</div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>
        <div style="display: flex;margin-bottom: 16px;">
          <div class="sbInfo">
            <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
            <div style="width: 335px;">
              <div class="sbinfo-title">
                设备信息
              </div>
              <br><br>
              <div style="width: 300px;">
                <img style="width: 100%;height: 100%;" src="@/assets/sb.png" alt="">
              </div>
            </div>
            <div style="width: 155px;display:flex;flex-direction:column;justify-content: space-between;">
              <div class="sbInfo-info">
                <div>设备状态</div>
                <div class="sb-info-bg">运行中</div>
              </div>
              <div class="sbInfo-info">
                <div>设备名称</div>
                <div class="sb-info-bg">压缩机</div>
              </div><div class="sbInfo-info">
                <div>设备编号</div>
                <div class="sb-info-bg">BLT-20A</div>
              </div><div class="sbInfo-info">
                <div>设备型号</div>
                <div class="sb-info-bg">BLD200</div>
              </div><div class="sbInfo-info">
                <div>设备位置</div>
                <div class="sb-info-bg">1号厂区</div>
              </div><div class="sbInfo-info">
                <div>管理员</div>
                <div class="sb-info-bg">张三</div>
              </div><div class="sbInfo-info">
                <div>投用时间</div>
                <div class="sb-info-bg">2022/1/29</div>
              </div><div class="sbInfo-info">
                <div>保养时间</div>
                <div class="sb-info-bg">2022/4/29</div>
              </div>
            </div>
          </div>
          <div class="sbStatus">
            <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
            <div style="padding:34px;">
              <div class="sbStatus-title">
                运行工况
              </div>
              <br>
              <div>
                <a-row :gutter="[16,7]">
                  <a-col :span="12" >
                    <div class="sbStatus-info-bg">
                      <span class="sbStatus-top"></span>
                      <span class="sbStatus-bottom"></span>
                      <div>运行时长</div>
                      <div style="font-size: 30px;font-weight: 400;color: #01D4F9;margin-top: 5px;">101h</div>
                    </div>
                  </a-col>
                  <a-col :span="12" >
                    <div class="sbStatus-info-bg">
                      <span class="sbStatus-top"></span>
                      <span class="sbStatus-bottom"></span>
                      <div>维修费用</div>
                      <div style="font-size: 30px;font-weight: 400;color: #01D4F9;margin-top: 5px;">38.231￥</div>
                    </div>
                  </a-col>
                  <a-col :span="12" >
                    <div class="sbStatus-info-bg">
                      <span class="sbStatus-top"></span>
                      <span class="sbStatus-bottom"></span>
                      <div>保养次数</div>
                      <div style="font-size: 30px;font-weight: 400;color: #01D4F9;margin-top: 5px;">368</div>
                    </div>
                  </a-col>
                  <a-col :span="12" >
                    <div class="sbStatus-info-bg">
                      <span class="sbStatus-top"></span>
                      <span class="sbStatus-bottom"></span>
                      <div>维修次数</div>
                      <div style="font-size: 30px;font-weight: 400;color: #01D4F9;margin-top: 5px;">20</div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div id="chart1"></div>
          </div>
        </div>
        <div style="display: flex;">
          <div class="sbHistory">
            <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
            <div>
              <div style="font-size: 30px;font-weight: 800; padding-bottom: 29px;color: #BDE4FF;">维修历史</div>
              <thead>
                <tr style="display: flex;justify-content: space-between;">
                  <th class="list-header">异常类别</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="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list.year }}</td>
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list.sales }}</td>
                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ list.date }}</td>
                </tr>
              </tbody>
            </div>
          </div>
          <div class="sb-online">
            <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
            <div style="position: relative;width: 477px;height: 182px;background: rgba(0, 186, 255, 0.1);">
              <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
              <div style="padding:20px">本月设备使用率%</div>
              <div id="chart2"></div>
            </div>
            <div style="display:flex;justify-content: space-between;width: 477px;height: 182px;padding-top: 15px;">
              <div class="sb-online-time">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 16px">本月运行时长</div>
                <div style="font-size: 48px;color: #01D4F9;">90h</div>
              </div>
              <div class="sb-online-time">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 16px">本月停机时长</div>
                <div style="font-size: 48px;color: #01D4F9;">9h</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sb-proportion">
        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
        <div style="font-size: 30px;font-weight: 800;color: #BDE4FF;">设备部位维修占比</div>
        <div id="chart3"></div>
        <div style="padding-top:70px">
          <a-row type="flex" justify="space-around" :gutter="[0,25]">
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">设备图片</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">验收文档</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">使用手册</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">保养手册</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">维修纪录</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">保养记录</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">调拨记录</div>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="sb-proportion-info">
                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                <div style="font-size: 46px;color: #035CFF;transform: perspective(.5em) rotateX(5deg);">
                  <my-icon type="icon-qichebaoyang" />
                </div>
                <div style="color: #01D4F9;">费用记录</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart, registerTheme } from '@antv/g2'
export default {
  data () {
    return {
      chart1: [
        { year: '人工费用', sales: 382, date: '05-16' },
        { year: '备件费用', sales: 522, date: '05-16' },
        { year: '材料费用', sales: 612, date: '05-16' },
        { year: '委外费用', sales: 145, date: '05-16' }
      ],
      chart2: [
        { day: 1, percent: 60 },
        { day: 2, percent: 40 },
        { day: 3, percent: 50 },
        { day: 4, percent: 60 },
        { day: 5, percent: 70 },
        { day: 6, percent: 60 },
        { day: 7, percent: 80 },
        { day: 8, percent: 40 },
        { day: 9, percent: 40 },
        { day: 10, percent: 60 }

      ],
      chart3: [
        { item: '电力部位', count: 16 },
        { item: '传动部位 ', count: 20 },
        { item: '液压部位', count: 14 },
        { item: '压缩缸 ', count: 11 },
        { item: '发电机  ', count: 11 },
        { item: '风扇', count: 28 }
      ],
      list1: [
        { year: '人工费用', sales: 382, date: '05-16' },
        { year: '备件费用', sales: 522, date: '05-16' },
        { year: '材料费用', sales: 612, date: '05-16' },
        { year: '备件费用', sales: 522, date: '05-16' },
        { year: '材料费用', sales: 612, date: '05-16' },
        { year: '委外费用', sales: 145, date: '05-16' }
      ]
    }
  },
  mounted () {
    this.getChart()
  },
  methods: {
    getChart () {
      this.getChart1('chart1', this.chart1)
      this.getChart2('chart2', this.chart2)
      this.getChart3('chart3', this.chart3)
    },
    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,
        width: 400,
        height: 145,
        appendPadding: [20, 20, 0, 80]
      })

      chart.data(data)
      chart.scale('sales', {
        nice: true
      })
      chart.legend('year', {
        position: 'right',
        itemName: {
          style: {
            fill: '#01D4F9 ',
            fontSize: 14
          }
        }
      })
      chart.tooltip({
        showMarkers: false
      })
      chart.interaction('active-region')

      chart.interval().position('date*sales').color('year').adjust([
        {
          type: 'dodge',
          marginRatio: 0
        }
      ])

      chart.theme('myTheme')
      chart.render()
    },
    getChart2 (id, data) {
      const chart = new Chart({
        container: id,
        width: 400,
        height: 120,
        appendPadding: [0, 0, 0, 80]
      })
      chart.data(data)
      chart.scale({
        day: {
          min: 1,
          tickCount: 10,
          range: [0, 1]
        },
        percent: {
          min: 0,
          range: [0, 1]
        }
      })
      chart.tooltip({
        showCrosshairs: true,
        shared: true
      })

      chart.area().position('day*percent').shape('smooth')
      chart.line().position('day*percent').shape('smooth')

      chart.render()
    },
    getChart3 (id, data) {
      registerTheme('myTheme', {
        columnWidthRatio: 0.2,
        fontFamily: {
          color: '#01D4F9'
        },
        colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
      })
      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
      this.chartPie = new Chart({
        container: id,
        autoFit: true,
        height: 435
      })
      this.chartPie.data(data)
      this.chartPie.scale('count', {
        nice: true
      })
      this.chartPie.coordinate('theta', {
        radius: 0.6,
        innerRadius: 0.5
      })
      // 辅助文本
      this.chartPie.legend('item', {
        position: 'bottom',
        flipPage: false,
        maxRow: 2,
        itemWidth: 100,
        maxWidth: 400,
        itemName: {
          style: {
            fill: '#01D4F9',
            fontSize: 14
          }
        }
      })
      this.chartPie.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>`
      })
      this.chartPie
        .annotation()
      this.chartPie
        .interval()
        .adjust('stack')
        .position('count')
        .color('item')
        .label('count', (count) => {
          return {
            style: {
              fill: '#01D4F9',
              fontSize: 16
            },
            offset: 30,
            content: (data) => {
              return `${data.item}: ${count}%`
            }
          }
        })
        .tooltip('item*count', (item, count) => {
          return {
            name: item,
            value: `${count}%`,
            style: {
              fill: '#01D4F9',
              fontSize: 16
            }
          }
        })
      this.chartPie.interaction('active-region')
      this.chartPie.theme('myTheme')
      this.chartPie.render()
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
background-color: RGBA(0, 7, 73, 0.8);
padding:10px 21px 35px 21px;
.title{
  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;
}
  .sbInfo{
    position: relative;
padding:34px;
width: 597px;
height:505px;
border: 2px solid #045693;
margin-right:16px;
display:flex;
justify-content: space-between;
.sbinfo-title{
  width: 120px;
height: 29px;
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #BDE4FF;
line-height: 24px;
}
.sbInfo-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #01D4F9;
line-height: 13px;
.sb-info-bg{
  width: 91px;
  height: 35px;
  text-align: center;
  line-height:35px;
  background: url(../../assets/441.png) no-repeat;
}
}
}
.sbStatus{
  position: relative;
  border: 2px solid #045693;
width: 485px;
height:505px;
.sbStatus-title{
  width: 120px;
height: 29px;
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #BDE4FF;
line-height: 24px;
}
.sbStatus-info-bg{
  position: relative;
  width: 206px;
height: 110px;
color: #FFFFFF;
background:url("../../assets/442.png") no-repeat;
font-size: 14px;
line-height: 24px;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
}
.sbHistory{
  width: 504px;
   height:429px;
   color: #fff;
    border: 2px solid #045693;
   margin-right:16px;
   position: relative;
   padding:30px;
   .list-header{
     margin:0;
     padding: 0;
      width: 142px;
height: 35px;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
margin-right: 8px;

font-family: Microsoft YaHei;
background: rgba(2, 205, 255, 0);
box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
display: flex;
justify-content: center;
align-items: center;
   }
}
.sb-online{
  padding:46px;
  width: 578px;
  height:429px;
  color: #fff;
    border: 2px solid #045693;
position: relative;
.sb-online-time{
display: flex;
flex-direction:column;
align-items: center;
 justify-content:center;
 position: relative;
 width: 231px;
 height: 140px;
 background: rgba(0, 186, 255, 0.1);
}
}
.sb-proportion{
  color:#fff;
  width: 766px;
   height:950px;
   position: relative;
   border: 2px solid #045693;
   padding:30px;
   .sb-proportion-info{
   position: relative;
display: flex;
flex-direction:column;
align-items: center;
justify-content:center;
position: relative;
// width: 141px;
height: 150px;
background: rgba(0, 186, 255, 0.1);
   }
}
  .top-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    left: -6px;
  }
  .bottom-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    left: -6px;
  }
  .top-right{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    right: -6px;
  }
  .bottom-right {
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    right: -6px;
  }
    .top-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    top: -2px;
    left: -2px;
  }
  .bottom-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-bottom: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    left: -2px;;
  }
  .top-right-two{
     width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    top: -2px;;
    right: -2px;;
  }
  .bottom-right-two {
     width: 15px;
    height: 15px;
    display: block;
   border-bottom: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    right: -2px;;
  }
  .sbStatus-top {
    width: 37px;
    height: 21px;
    display: block;

background: rgba(14, 27, 75, 0);

border: 1px solid #019EFF;
border-bottom: none;
border-left: none;

    position: absolute;
    top: 6px;
    right: 6px;
  }
  .sbStatus-bottom {
    width: 37px;
    height: 21px;
    display: block;

background: rgba(14, 27, 75, 0);

border: 1px solid #019EFF;
border-top: none;
border-right: none;

    position: absolute;
    bottom: 6px;
    left: 6px;
  }
</style>