完成22/44大图

src/router/generator-platform-routers.js

@@ -390,6 +390,11 @@ export const constantRouterMap = [
     path: '/22',
     component: () => import('@/views/statisticView/22')
 
+  },
+  {
+    path: '/100',
+    component: () => import('@/views/statisticView/100')
+
   },
   {
     path: '/toWorkplaceBacklog',
@@ -400,6 +405,11 @@ export const constantRouterMap = [
     path: '/44',
     component: () => import('@/views/statisticView/44')
 
+  },
+  {
+    path: '/9',
+    component: () => import('@/views/statisticView/9')
+
   },
   {
     path: '/single/login',

src/utils/install.js

@@ -18,7 +18,7 @@ import iconfont from '@/components/IconSelector/iconfont.js'
 import ImportForm from '@/components/custom/ImportForm'
 const MyIcon = Icon.createFromIconfontCN({
   // scriptUrl: iconfont // //at.alicdn.com/t/font_1314041_9qgpnn1vvko.js在 iconfont.cn 上生成
-  scriptUrl: '//at.alicdn.com/t/font_3266072_o1c09mppthi.js'
+  scriptUrl: '//at.alicdn.com/t/font_3266072_h6bz457pnli.js'
 })
 
 export default {

src/views/statisticView/100.vue

@@ -0,0 +1,638 @@
+<template>
+  <div class="view-container">
+    <div class="title">维保系统数据大屏展示平台</div>
+    <div class="content">
+      <div class="content-left">
+        <div class="content-left-top">
+          <div style="padding:20px;display: flex; justify-content: space-between; position: relative;">
+            <div>维修单数</div>
+            <div
+              style="text-align:center; width: 106px;height: 27px;background: #091E64;border-radius: 14px; font-size: 18px;color: #A2ABCD;">最近6个月</div>
+            <div
+              style="z-index: 999; text-align:center; width: 176px;height: 29px;background: #04154D;position: absolute;top:60px;left:50%;transform: translateX(-50%);font-size: 18px;color: #BBCFE8;">总数：1234</div>
+          </div>
+          <div id="chart1"></div>
+          <div style="padding:0 20px;font-size: 18px;font-weight: 400;">
+            <div style="padding-bottom:10px; font-size: 18px;font-weight: 400;color:#B9BFD6;">故障排行榜</div>
+            <thead>
+              <tr style="display: flex;justify-content: space-around;width: 483px;height: 26px;font-weight: 400">
+                <th class="list-header discolor" v-for="col in columns" :key="col.key">{{ col.title }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr :class="{discolor: i%2}" v-for="(list,i) in data1" :key="i" style="display: flex;justify-content: space-around;">
+                <td class="list-header" style=" color: #B9BFD6;box-shadow:none; font-size: 14px;font-weight: 400;">{{ list.type }}</td>
+                <td class="list-header" style="color: #B9BFD6;box-shadow:none; font-size: 16px;font-weight: 400;">{{ list.num }}</td>
+                <td class="list-header" style="color: #B9BFD6;box-shadow:none; font-size: 16px;font-weight: 400;">{{ list.sb }}</td>
+                <td class="list-header" style="color: #B9BFD6;box-shadow:none;font-size: 16px;font-weight: 400;">{{ list.fee }}</td>
+              </tr>
+            </tbody>
+          </div>
+        </div>
+        <div class="content-left-bottom">
+          <div style="padding-bottom: 20px; font-size: 24px;font-weight: 800;color: #24D1F0;">维修通知</div>
+          <div
+            class="demo-infinite-container"
+          >
+            <a-list :split="false" size="small" :data-source="information">
+              <a-list-item style="color:#B9BFD6 " slot="renderItem" slot-scope="item">
+                <a-list-item-meta>
+                  <div slot="title" style="color:#B9BFD6 " :href="item.href">
+                    <span style="display: inline-block; width: 10px;height: 10px;background: #AB1AE1;border-radius: 50%;"></span>
+                    {{ item.name }}
+                  </div>
+                </a-list-item-meta>
+                <div>
+                  {{ item.time }}
+                </div>
+              </a-list-item>
+            </a-list>
+          </div>
+        </div>
+      </div>
+      <div class="content-middle">
+        <div class="content-middle-top">
+          <div style="padding:20px;display: flex; justify-content: space-between; position: relative;">
+            <div style="display: flex">维修费用统计 &nbsp;
+              <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>
+              </div>
+            </div>
+            <div
+              style="text-align:center; width: 106px;height: 27px;background: #091E64;border-radius: 14px; font-size: 18px;color: #A2ABCD;">最近1年</div>
+
+          </div>
+          <div id="chart2"></div>
+        </div>
+        <div class="content-middle-bottom">
+          <div style="padding-bottom: 20px; font-size: 24px;font-weight: 800;color: #24D1F0;">维保核心数据</div>
+          <div class="middle-bottom-tag">
+            <a-row type="flex">
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#24D1F0" type="icon-youjiantou" />&nbsp;维修单数</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#9C24F0" type="icon-youjiantou" />&nbsp;维修费用</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#0E33BC" type="icon-youjiantou" />&nbsp;内部单数</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#F0DF24" type="icon-youjiantou" />&nbsp;内部费用</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#24D1F0" type="icon-youjiantou" />&nbsp;委外单数</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#9C24F0" type="icon-youjiantou" />&nbsp;委外费用</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#0E33BC" type="icon-youjiantou" />&nbsp;保养任务</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+              <a-col :span="6" class="border-bottom">
+                <div class="middle-bottom-tag-list border-right">
+                  <div style="font-size: 16px;color: #B9BFD6;"><my-icon style="color:#F0DF24" type="icon-youjiantou" />&nbsp;延迟任务</div>
+                  <div>2400</div>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+          <div style="padding-top:10px; font-size: 24px;font-weight: 800;color: #24D1F0;">维修费用类别</div>
+          <div id="chart3"></div>
+        </div>
+      </div>
+      <div class="content-right">
+        <div class="content-right-top">
+          <div style="padding-bottom: 20px; font-size: 24px;font-weight: 800;color: #24D1F0;">保养统计</div>
+          <div id="chart4"></div>
+        </div>
+        <div class="content-right-bottom">
+          <div style="padding-bottom: 20px; font-size: 24px;font-weight: 800;color: #24D1F0;">保养通知</div>
+          <div
+            class="demo-infinite-container"
+            style="height:80%"
+          >
+            <a-list :split="false" size="small" :data-source="information">
+              <a-list-item style="color:#B9BFD6 " slot="renderItem" slot-scope="item">
+                <a-list-item-meta>
+                  <div slot="title" style="color:#B9BFD6 " :href="item.href">
+                    <span style="display: inline-block; width: 10px;height: 10px;background: #AB1AE1;border-radius: 50%;"></span>
+                    {{ item.name }}
+                  </div>
+                </a-list-item-meta>
+                <div>
+                  {{ item.time }}
+                </div>
+              </a-list-item>
+            </a-list>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chart, registerTheme } from '@antv/g2'
+export default {
+  data () {
+    return {
+      information: [
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }, {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }, {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }
+      ],
+      columns: [
+        {
+          title: '故障类别',
+          key: 'type'
+        },
+        {
+          title: '维修单数',
+          key: 'num'
+        },
+        {
+          title: '设备',
+          key: 'sb'
+        },
+        {
+          title: '维修费用',
+          key: 'fee'
+        }
+
+      ],
+      data1: [
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        },
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        },
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        },
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        },
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        },
+        {
+          type: '发动机启动困难',
+          num: 19,
+          sb: 3,
+          fee: 2222
+        }
+      ],
+      chart1: [
+        { day: 1, percent: 60 },
+        { day: 2, percent: 40 },
+        { day: 3, percent: 50 },
+        { day: 4, percent: 60 },
+        { day: 5, percent: 70 },
+        { day: 6, percent: 60 }
+      ],
+      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: 60 },
+        { day: 8, percent: 40 },
+        { day: 9, percent: 50 },
+        { day: 10, percent: 60 },
+        { day: 11, percent: 70 },
+        { day: 12, percent: 60 }
+      ],
+      chart3: [
+        { day: '维修-配件', percent: 60 },
+        { day: '维修-人工', percent: 40 },
+        { day: '备件费用', percent: 50 },
+        { day: '维护保养费用', percent: 60 },
+        { day: '改造费用', percent: 70 },
+        { day: '委外费用', percent: 60 }
+      ],
+      chart4: [
+        { day: '一级', percent: 30, value: 300 },
+        { day: '二级', percent: 20, value: 200 },
+        { day: '三级', percent: 50, value: 500 }
+      ]
+    }
+  },
+  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) {
+      const chart = new Chart({
+        container: id,
+        width: 470,
+        height: 220,
+        appendPadding: [0, 0, 0, 20]
+      })
+      chart.data(data)
+      chart.scale({
+        day: {
+          min: 1
+        },
+        percent: {
+          min: 0,
+          range: [0, 1]
+        }
+      })
+      chart.axis('percent', {
+        tickLine: null,
+        title: {
+          style: {
+            fill: '#01D4F9',
+            fontSize: 14
+          },
+          grid: null,
+          offset: -10,
+          autoRotate: false,
+          position: 'end',
+          text: '单数（个）'
+        }
+      })
+      chart.axis('day', {
+        title: {
+          style: {
+            fill: '#01D4F9',
+            fontSize: 14
+          },
+          grid: null,
+          autoRotate: false,
+          position: 'end',
+          text: '日期(月)'
+        }
+      })
+      chart.tooltip({
+        showCrosshairs: true,
+        shared: true
+      })
+
+      chart.line().position('day*percent').shape('smooth')
+      chart.point().position('day*percent')
+      chart.theme({ 'styleSheet': { 'brandColor': '#F5942B ' } })
+      chart.render()
+    },
+    getChart2 (id, data) {
+      const chart = new Chart({
+        container: id,
+        width: 730,
+        height: 350,
+        appendPadding: [0, 0, 0, 20]
+      })
+      chart.data(data)
+      chart.scale({
+        day: {
+          min: 1,
+          tickCount: 12
+        },
+        percent: {
+          min: 0,
+          range: [0, 1]
+        }
+      })
+      chart.axis('percent', {
+        tickLine: null,
+        title: {
+          style: {
+            fill: '#01D4F9',
+            fontSize: 14
+          },
+          grid: null,
+          offset: -10,
+          autoRotate: false,
+          position: 'end',
+          text: '金额（元）'
+        }
+      })
+
+      chart.tooltip({
+        showCrosshairs: true,
+        shared: true
+      })
+
+      // chart.line().position('day*percent').shape('smooth')
+      chart.area().position('day*percent').shape('smooth')
+      // chart.theme({ 'styleSheet': { 'brandColor': '#031655 ' } })
+      chart.render()
+    },
+    getChart3 (id, data) {
+      registerTheme('myTheme', {
+        columnWidthRatio: 0.1,
+        colors10: ['#0091F1', '#FDB628', '#00E4EC', '#EB6F49', '#9C24F0 ', '#00FF00', '#9661BC', '#F6903D', '#008685', '#F08BB4']
+      })
+      const chart = new Chart({
+        container: id,
+        width: 700,
+        height: 150
+      })
+      chart.data(data)
+      chart.scale({
+        percent: {
+          nice: true,
+          range: [0, 1]
+        }
+      })
+      chart.legend(false)
+      chart.tooltip({
+        showCrosshairs: true,
+        shared: true
+      })
+      chart.interaction('active-region')
+        .interval()
+        .position('day*percent')
+        .color('day')
+      chart.theme('myTheme')
+      chart.render()
+    },
+    getChart4 (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: 300
+      })
+      chart.data(data)
+      chart.scale('percent', {
+        formatter: (val) => {
+          val = val * 100 + '%'
+          return val
+        }
+      })
+      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
+        .annotation()
+        .text({
+          position: ['50%', '50%'],
+          content: '1000',
+          style: {
+            fontSize: 20,
+            fill: '#8c8c8c',
+            textAlign: 'center'
+          }
+
+        })
+      chart
+        .interval()
+        .adjust('stack')
+        .position('percent')
+        .color('day')
+        .label('percent', (percent) => {
+          return {
+            content: (data) => {
+              return percent + '%\n' + data.value
+            }
+          }
+        })
+        .tooltip('day*percent', (item, percent) => {
+          percent = percent + '%'
+          return {
+            name: item,
+            value: percent
+          }
+        })
+
+      chart.interaction('element-active')
+      chart.theme('myTheme')
+      chart.render()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.view-container {
+width:1920px;
+height:1080px;
+background-color: RGBA(0, 7, 73, 0.8);
+padding:42px 41px;
+}
+.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{
+  text-align: center;
+font-size: 32px;
+font-family: Microsoft YaHei;
+font-weight: bold;
+color: #BDE4FF;
+padding-bottom: 38px;
+}
+.content{
+ width: 100%;
+ height: 919px;
+ display: flex;
+ justify-content: space-between;
+}
+.content-left{
+ font-size: 24px;
+font-family: Microsoft YaHei;
+font-weight: 400;
+color: #24D1F0;
+ width: 522px;
+height: 919px;
+.content-left-top{
+  background: #000D39;
+border: 4px solid #02044B;
+   width: 522px;
+   height: 543px;
+   margin-bottom:14px;
+}
+.content-left-bottom{
+  background: #000D39;
+border: 4px solid #02044B;
+   width: 522px;
+   height: 362px;
+padding:20px;
+overflow: hidden;
+}
+}
+.content-middle{
+   font-size: 24px;
+font-family: Microsoft YaHei;
+font-weight: 400;
+color: #24D1F0;
+ width: 762px;
+height: 919px;
+.content-middle-top{
+  background: #000D39;
+border: 4px solid #02044B;
+   width: 762px;
+   height: 445px;
+   margin-bottom:14px;
+}
+.content-middle-bottom{
+  background: #000D39;
+border: 4px solid #02044B;
+   width: 762px;
+   height: 458px;
+padding:20px;
+.middle-bottom-tag{
+width: 695px;
+height: 172px;
+background: #030E44;
+.middle-bottom-tag-list{
+height: 51px;
+margin:17px auto;
+display:flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+}
+.border-right{
+border-right: 2px solid #07164C;
+}
+.border-bottom{
+border-bottom: 2px solid #07164C;
+}
+}
+}
+}
+.content-right{
+
+ width: 513px;
+height: 919px;
+.content-right-top{
+  background: #000D39;
+border: 4px solid #02044B;
+   width: 513px;
+   height: 445px;
+   margin-bottom:14px;
+padding:20px;
+
+}
+.content-right-bottom{
+  background: #000D39;
+ border: 4px solid #02044B;
+   width: 513px;
+   height: 457px;
+padding:20px;
+overflow: hidden;
+}
+}
+.discolor{
+  background: #04154D;
+}
+.list-header{
+  width: 25%;
+  text-align: center;
+}
+.card-num{
+  padding: 0 5px;
+  font-size: 24px;
+  margin-right: 5px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #000D39;
+  background:#24D1F0;
+  }
+.demo-infinite-container {
+  overflow: auto;
+  height: 240px;
+}
+::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+</style>

src/views/statisticView/22.vue

@@ -168,12 +168,12 @@ export default {
         { name: 'D', year: '2022', value: 15 }
       ],
       chart3: [
-        { year: '2001', population: 41.8 },
+        { year: '2001', population: 54.8 },
         { year: '2002', population: 38 },
-        { year: '2003', population: 33.7 },
+        { year: '2003', population: 5.7 },
         { year: '2004', population: 30.7 },
         { year: '2005', population: 25.8 },
-        { year: '2006', population: 31.7 }
+        { year: '2006', population: 11.7 }
       ],
       chart4: [
         { type: '完好率', value: 90 },
@@ -223,11 +223,19 @@ export default {
         range: [0, 1]
 
       })
+
       chart.tooltip({
         shared: true,
         showMarkers: false
       })
-
+      chart.legend('year', {
+        itemName: {
+          style: {
+            fill: '#03D3D3 ',
+            fontSize: 14
+          }
+        }
+      })
       chart
         .interval()
         .position('year*value')
@@ -254,6 +262,16 @@ export default {
           nice: true
         }
       })
+      chart.legend('name', {
+        position: 'bottom',
+        offsetY: 10,
+        itemName: {
+          style: {
+            fill: '#03D3D3 ',
+            fontSize: 14
+          }
+        }
+      })
       chart.tooltip({
         shared: true,
         showCrosshairs: true
@@ -293,7 +311,13 @@ export default {
       })
       chart.legend('year', {
         position: 'bottom',
-        offsetY: 10
+        offsetY: 10,
+        itemName: {
+          style: {
+            fill: '#03D3D3 ',
+            fontSize: 14
+          }
+        }
       })
       chart.axis(false)
       chart.tooltip({
@@ -387,7 +411,7 @@ export default {
 .view-container {
 width:1920px;
 height:1080px;
-background-color: black;
+background-color: rgba(4, 8, 20, 0.8);
 padding:35px 21px;
 }
 .view-container::after {
@@ -395,13 +419,12 @@ padding:35px 21px;
   width:1920px;
   height:1080px;
   background: url(../../assets/bgView.png);
-  opacity: 0.3;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
-  // z-index: -1;
+  z-index: -1;
 }
 .title{
   height: 89px;

src/views/statisticView/44.vue

@@ -1,12 +1,421 @@
 <template>
   <div class="view-container">
-    vcv
+    <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: 335px;">
+                <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;">维修历史</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;">设备部位维修占比</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: 500
+      })
+      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>
 
@@ -14,7 +423,7 @@ export default {
 .view-container {
 width:1920px;
 height:1080px;
-background-color: black;
+background-color: rgba(4, 8, 20, 0.8);
 padding:35px 21px;
 }
 .view-container::after {
@@ -22,12 +431,248 @@ padding:35px 21px;
   width:1920px;
   height:1080px;
   background: url(../../assets/bgView.png);
-  opacity: 0.3;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
-  // z-index: -1;
+  z-index: -1;
+}
+  .sbInfo{
+    position: relative;
+padding:34px;
+width: 597px;
+height:555px;
+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: #FFFFFF;
+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:555px;
+.sbStatus-title{
+  width: 120px;
+height: 29px;
+font-size: 30px;
+font-family: Microsoft YaHei;
+font-weight: bold;
+color: #FFFFFF;
+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:444px;
+   color: #fff;
+    border: 2px solid #045693;
+   margin-right:16px;
+   position: relative;
+   padding:30px;
+   .list-header{
+     margin:0;
+     padding: 0;
+      width: 142px;
+height: 39px;
+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:444px;
+  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: 154px;
+ background: rgba(0, 186, 255, 0.1);
+}
+}
+.sb-proportion{
+  color:#fff;
+  width: 766px;
+   height:1015px;
+   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>

src/views/statisticView/9.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    dfdsf
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>