Signed-off-by: liuboyan <632697560@qq.com>

base

package-lock.json

@@ -872,9 +872,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.12.2.tgz",
-      "integrity": "sha1-vq5nHnF00pOLe0tp0vt+cit/1yw="
+      "version": "3.5.1",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.5.1.tgz?cache=0&sync_timestamp=1605751798748&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-3.5.1.tgz",
+      "integrity": "sha1-zWK5aIskZfSEIOJ620d2CrG1VZ8="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -4859,6 +4859,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-5.0.2.tgz?cache=0&sync_timestamp=1612592682359&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-5.0.2.tgz",
+      "integrity": "sha1-FybRelfPBdYs0FZ7QyXhIBpWuvY=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.0.4"
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",
@@ -16039,9 +16048,9 @@
       "dev": true
     },
     "tinycolor2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz",
-      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+      "version": "1.4.2",
+      "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz",
+      "integrity": "sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM="
     },
     "tmp": {
       "version": "0.0.33",
@@ -16190,6 +16199,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz",
+      "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",
@@ -16640,11 +16654,11 @@
       }
     },
     "view-design": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npm.taobao.org/view-design/download/view-design-4.2.0.tgz",
-      "integrity": "sha1-KvSGXJVr6EtkslGHvgcwFuq5p0g=",
+      "version": "4.5.0",
+      "resolved": "https://registry.npm.taobao.org/view-design/download/view-design-4.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fview-design%2Fdownload%2Fview-design-4.5.0.tgz",
+      "integrity": "sha1-IabIllMSB2SAzN1K1Pk0Z1eP8bw=",
       "requires": {
-        "async-validator": "^1.10.0",
+        "async-validator": "^3.3.0",
         "deepmerge": "^2.2.1",
         "element-resize-detector": "^1.2.0",
         "js-calendar": "^1.2.3",
@@ -17589,6 +17603,14 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
+    },
+    "zrender": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-5.0.4.tgz",
+      "integrity": "sha1-icNVr5CLn2SjAbOPdRt5UfLIqVo=",
+      "requires": {
+        "tslib": "2.0.3"
+      }
     }
   }
 }

package.json

@@ -15,9 +15,10 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "echarts": "^5.0.2",
     "js-cookie": "^2.2.1",
     "style-loader": "^1.2.0",
-    "view-design": "^4.2.0",
+    "view-design": "^4.5.0",
     "vue": "^2.5.2",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",

src/components/dataLine/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container-box">
+    <div class="container-ed"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataLine'
+}
+</script>
+
+<style scoped lang="scss">
+  .container-box{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .container-ed{
+      width: 1px;
+      height: 100%;
+      background: linear-gradient( to bottom,transparent 0%, rgba(134, 222, 255, 0.6) 50%, transparent 100%);
+    }
+  }
+</style>

src/components/dataModule/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="container-box">
+    <div class="container-ed"></div>
+    <div class="container">
+      <slot />
+    </div>
+    <div class="container-ed"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataModule'
+}
+</script>
+
+<style scoped lang="scss">
+  .container-box{
+    width: 100%;
+    position: relative;
+    .container-ed{
+      width: 100%;
+      height: 1px;
+      background: linear-gradient( to right,transparent 0%, rgba(134, 222, 255, 0.6) 50%, transparent 100%);
+    }
+    .container{
+      width: 100%;
+      background: linear-gradient( to right,transparent 0%, rgba(134, 222, 255, 0.1) 50%, transparent 100%);
+    }
+  }
+</style>

src/components/header/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-container">
     <div class="header-bg-left"></div>
-    <div class="header-title">视频监控大屏</div>
+    <div class="header-title">{{common.pageTitle}}</div>
     <div class="header-bg-right"></div>
   </div>
 </template>
@@ -22,6 +22,7 @@ export default {
   },
   computed: {
     ...mapGetters([
+      'common'
     ])
   },
   created () {

src/main.js

@@ -13,10 +13,14 @@ import './permission'
 //  View UI
 import ViewUI from 'view-design'
 import 'view-design/dist/styles/iview.css'
+// echarts
+import * as echarts from 'echarts'
 //  引入公共css样式
 import '../static/css/public.css'
 //  View UI
 Vue.use(ViewUI)
+// 全局初始化echarts
+Vue.prototype.$echarts = echarts
 //  全局初始化 Axios
 Vue.prototype.$axios = axios
 //  ajax异步

src/permission.js

@@ -7,7 +7,7 @@ router.beforeEach((to, from, next) => {
   ViewUI.LoadingBar.start()
   const meta = to.meta || {}
   // 设置顶部标题
-  store.state.common.heightTitle = to.name
+  store.state.common.pageTitle = to.name
   // Token 校验验证
   if (getToken()) {
     if (to.matched.length === 0) {

src/router/index.js

@@ -33,27 +33,36 @@ export default new Router({
         isAuth: true
       }
     }, {
-      path: '/videoMonitor',
-      name: '视频监控大屏',
-      component: () => import('@/views/videoMonitor/index'),
+      path: '/integrateControl',
+      name: '融通地产智慧资产集成管控平台',
+      component: () => import('@/views/integrateControl/index'),
       meta: {
         keepAlive: true,
         isTab: false,
         isAuth: true
       }
     }, {
-      path: '/parkingSystem',
-      name: '车场系统大屏',
-      component: () => import('@/views/parkingSystem/index'),
+      path: '/hospitalControl',
+      name: '301医院智慧物业管控平台',
+      component: () => import('@/views/hospitalControl/index'),
       meta: {
         keepAlive: true,
         isTab: false,
         isAuth: true
       }
     }, {
-      path: '/hospitalControl',
-      name: '301医院智慧物业管控平台',
-      component: () => import('@/views/hospitalControl/index'),
+      path: '/hospitalExhibit',
+      name: '301医院智慧物业工程显示终端',
+      component: () => import('@/views/hospitalExhibit/index'),
+      meta: {
+        keepAlive: true,
+        isTab: false,
+        isAuth: true
+      }
+    }, {
+      path: '/assetsSecurity',
+      name: '资产安全管护系统显示终端',
+      component: () => import('@/views/assetsSecurity/index'),
       meta: {
         keepAlive: true,
         isTab: false,

src/store/index.js

@@ -4,16 +4,13 @@ import * as getters from './getters'
 
 // 公共数据
 import common from './modules/common'
-// 用户数据
-import user from './modules/user'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     // 公共State
-    common,
-    user,
+    common
   },
   // model主入口
   getters

src/store/modules/common.js

@@ -2,12 +2,12 @@ import {setStore, getStore} from '@/utils/store'
 
 const common = {
   state: {
-    test1: getStore({name: 'test1', type: 'session'}) || []
+    pageTitle: getStore({name: 'pageTitle', type: 'session'}) || ''
   },
   mutations: {
-    SET_TEST: (state, data) => {
-      setStore({name: 'test1', content: data, type: 'session'})
-      state.test1 = data
+    SET_PAGE_TITLE: (state, data) => {
+      setStore({name: 'pageTitle', content: data, type: 'session'})
+      state.pageTitle = data
     }
   }
 }

src/store/modules/user.js

@@ -1,12 +0,0 @@
-import {getStore} from '@/utils/store'
-/*
-* Vuex store 实例的根 state 对象
-*/
-const user = {
-  state: {
-  },
-  mutations: {
-  }
-}
-
-export default user

src/views/Index.vue

@@ -44,34 +44,6 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-  .filter-box{
-    height: 45px;
-    text-align: right;
-    .ivu-select-selection{
-      border-color: #86deff;
-      background-color: transparent;
-      text-align: left;
-    }
-    .ivu-select-placeholder{
-      color: #86deff!important;
-    }
-    .ivu-icon{
-      color: #86deff!important;
-    }
-    .ivu-select-dropdown{
-      border: 1px solid #86deff;
-      background-color: #0b2031;
-      text-align: left;
-    }
-    .ivu-select-item{
-      color: #86deff!important;
-    }
-    .ivu-select-item:hover{
-      background-color: rgba(134, 222, 255, 0.1);
-    }
-  }
-</style>
 <style scoped lang="scss">
   .index {
     width: 100%;
@@ -84,6 +56,7 @@ export default {
     .header{
       background: transparent;
       padding: 0px;
+      height: 4.5vw;
     }
     .content{
       box-sizing: border-box;

src/views/Login.vue

@@ -74,7 +74,7 @@ export default {
                 title: '登陆成功',
                 desc: res.message
               })
-              this.$router.push('/videoMonitor')
+              this.$router.push('/hospitalControl')
             } else {
               this.$Notice.error({
                 title: '登陆失败',

src/views/assetsSecurity/components/assignment.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>任务总数</p>
+            <Icon type="ios-paper-outline" />
+          </div>
+          <div class="data-number">{{rwzs}}</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>任务完成数</p>
+            <Icon type="md-trending-up" />
+          </div>
+          <div class="data-number">{{rwwcs}}</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>任务完成率</p>
+            <Icon type="ios-pie-outline" />
+          </div>
+          <div class="data-number">{{rwwcl}}%</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>逾期率</p>
+            <Icon type="md-time" />
+          </div>
+          <div class="data-number">{{yql}}%</div>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'assignment',
+  data () {
+    return {
+      rwzs: 12439,
+      rwwcs: 10938,
+      rwwcl: 87.93,
+      yql: 12.05
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    padding: 20px;
+    .data-row{
+      height: calc(50% - 10px);
+    }
+    .data-row:first-child{
+      margin-bottom: 20px;
+    }
+    .data-col{
+      height: 100%;
+      .data-container{
+        width: 100%;
+        height: 100%;
+        padding: 16px;
+        background: #20364b;
+        color: #5cadff;
+        .data-title{
+          font-size: 0.9vw;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          i{
+            color: #ffffff;
+            font-size: 2vw;
+          }
+        }
+        .data-number{
+          margin: 1vw 0;
+          color: #a2db99;
+          font-size: 1.6vw;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/census.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-census" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'census',
+  data () {
+    return {
+      wcl: 100,
+      chartData: {
+        '综合管理': 0,
+        '消防检查': 0,
+        '电气安全': 0,
+        '特种设备': 0,
+        '危险作业': 0,
+        '结构安全': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '综合管理': 50,
+        '消防检查': 50,
+        '电气安全': 50,
+        '特种设备': 50,
+        '危险作业': 50,
+        '结构安全': 50
+      }
+      let option = {
+        color: ['#5cb8ff', '#87c9f9', '#044eaf', '#b9e9fd', '#286add', '#459cff'],
+        legend: {
+          orient: 'vertical',
+          top: 'center',
+          right: 10,
+          align: 'right',
+          icon: 'roundRect',
+          textStyle: {
+            fontSize: 16,
+            color: '#5cadff'
+          }
+        },
+        series: [
+          {
+            name: '隐患统计表',
+            type: 'pie',
+            center: ['40%', '50%'],
+            radius: ['35%', '65%'],
+            label: {
+              color: '#5cadff',
+              fontSize: 14,
+              align: 'center',
+              formatter: '{b}\n{c}'
+            },
+            labelLine: {
+              lineStyle: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.5)',
+              shadowBlur: 3
+            },
+            data: [
+              {value: this.chartData['综合管理'], name: '综合管理'},
+              {value: this.chartData['消防检查'], name: '消防检查'},
+              {value: this.chartData['电气安全'], name: '电气安全'},
+              {value: this.chartData['特种设备'], name: '特种设备'},
+              {value: this.chartData['危险作业'], name: '危险作业'},
+              {value: this.chartData['结构安全'], name: '结构安全'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-census'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-census')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-census')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/countryComplete.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="container">
+    <Row :gutter="0" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-country-complete" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'countryComplete',
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      let option = {
+        legend: {
+          right: 20,
+          textStyle: {
+            color: '#5cadff'
+          }
+        },
+        grid: {
+          show: false,
+          top: '45px',
+          bottom: '25px',
+          left: '60px',
+          right: '10px'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 12,
+            interval: 0
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月', '01月', '02月', '03月']
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          name: '%/月份',
+          nameTextStyle: {
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 14
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '完成率',
+            type: 'line',
+            itemStyle: {
+              color: '#ff9900'
+            },
+            data: [2700, 7120, 8350, 5340, 7470, 8640, 6940, 8140, 7740, 7440, 6540, 9940]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-country-complete'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-country-complete')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-country-complete')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/countryDanger.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="container">
+    <Row :gutter="0" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-country-danger" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'countryDanger',
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      let option = {
+        legend: {
+          right: 20,
+          textStyle: {
+            color: '#5cadff'
+          }
+        },
+        grid: {
+          show: false,
+          top: '45px',
+          bottom: '25px',
+          left: '60px',
+          right: '10px'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 12,
+            interval: 0
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月', '01月', '02月', '03月']
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          name: '%/月份',
+          nameTextStyle: {
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 14
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '整改率',
+            type: 'line',
+            itemStyle: {
+              color: '#ff9900'
+            },
+            data: [2700, 7120, 8350, 5340, 7470, 8640, 6940, 8140, 7740, 7440, 6540, 9940]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-country-danger'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-country-danger')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-country-danger')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/danger.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>隐患数量</p>
+            <Icon type="ios-paper-outline" />
+          </div>
+          <div class="data-number">{{yhsl}}</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>现有隐患数</p>
+            <Icon type="md-trending-up" />
+          </div>
+          <div class="data-number">{{xyyhs}}</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>整改完成数</p>
+            <Icon type="ios-pie-outline" />
+          </div>
+          <div class="data-number">{{zgwcs}}</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>整改率</p>
+            <Icon type="md-time" />
+          </div>
+          <div class="data-number">{{zgl}}%</div>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'danger',
+  data () {
+    return {
+      yhsl: 6611,
+      xyyhs: 5622,
+      zgwcs: 8793,
+      zgl: 12.05
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    padding: 20px;
+    .data-row{
+      height: calc(50% - 10px);
+    }
+    .data-row:first-child{
+      margin-bottom: 20px;
+    }
+    .data-col{
+      height: 100%;
+      .data-container{
+        width: 100%;
+        height: 100%;
+        padding: 16px;
+        background: #20364b;
+        color: #5cadff;
+        .data-title{
+          font-size: 0.9vw;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          i{
+            color: #ffffff;
+            font-size: 2vw;
+          }
+        }
+        .data-number{
+          margin: 1vw 0;
+          color: #a2db99;
+          font-size: 1.6vw;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/project.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="container">
+    <Row :gutter="60" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container data-container1">
+          <div class="data-title">0~60分</div>
+          <div class="data-number">{{data1}}</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container data-container2">
+          <div class="data-title">60~75分</div>
+          <div class="data-number">{{data2}}</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="60" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container data-container3">
+          <div class="data-title">75~90分</div>
+          <div class="data-number">{{data3}}</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container data-container4">
+          <div class="data-title">90~100分</div>
+          <div class="data-number">{{data4}}</div>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'project',
+  data () {
+    return {
+      data1: 147,
+      data2: 201,
+      data3: 101,
+      data4: 89
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    padding: 10px 60px;
+    .data-row{
+      height: calc(50% - 10px);
+    }
+    .data-row:first-child{
+      margin-bottom: 20px;
+    }
+    .data-col{
+      height: 100%;
+      .data-container{
+        width: 100%;
+        height: 100%;
+        background: #20364b;
+        border: 1px solid ;
+        border-radius: 5px;
+        .data-title{
+          height: 1.3vw;
+          box-sizing: border-box;
+          padding-left: 10px;
+          color: #ffffff;
+          font-size: 0.8vw;
+          line-height: 1.3vw;
+        }
+        .data-number{
+          height: calc(100% - 1.3vw);
+          font-size: 1.6vw;
+          font-weight: bold;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .data-container1{
+        color: #cc0000;
+        .data-title{
+          background: #cc0000;
+        }
+      }
+      .data-container2{
+        color: #ff9900;
+        .data-title{
+          background: #ff9900;
+        }
+      }
+      .data-container3{
+        color: #ffcc00;
+        .data-title{
+          background: #ffcc00;
+        }
+      }
+      .data-container4{
+        color: #3366ff;
+        .data-title{
+          background: #3366ff;
+        }
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/components/regionComplete.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="container">
+    <Row :gutter="0" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-region-complete" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'regionComplete',
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      let that = this
+      let option = {
+        legend: {
+          right: 20,
+          textStyle: {
+            color: '#5cadff'
+          }
+        },
+        grid: {
+          show: false,
+          top: '45px',
+          bottom: '45px',
+          left: '60px',
+          right: '10px'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 12,
+            interval: 0,
+            formatter: function (label, index) {
+              return that.breakLine(label)
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['广东公司', '北京公司', '福建公司', '辽宁公司', '广西公司', '海南公司', '河南公司', '黑龙江公司', '湖北公司', '上海公司', '山东工司', '云南公司']
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          name: '%/月份',
+          nameTextStyle: {
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 14
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '完成率',
+            type: 'line',
+            itemStyle: {
+              color: '#ff9900'
+            },
+            data: [2700, 7120, 8350, 5340, 7470, 8640, 6940, 8140, 7740, 7440, 6540, 9940]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-region-complete'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-region-complete')).resize()
+      }, 10)
+    },
+    //  公司换行
+    breakLine (label) {
+      let reg = /.{1,2}/g
+      let labelArr = label.match(reg)
+      return labelArr.join('\n')
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-region-complete')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/assetsSecurity/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="container-row">
+      <Col span="8" class-name="container-col">
+        <dataContainer title="任务完成进度">
+          <assignment ref="assignment"></assignment>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <Row :gutter="20" class-name="container-row2">
+          <Col span="24" class-name="container-col">
+            <dataContainer title="项目安全状态">
+              <project ref="project"></project>
+            </dataContainer>
+          </Col>
+        </Row>
+        <Row :gutter="20" class-name="container-row2">
+          <Col span="24" class-name="container-col">
+            <dataContainer title="隐患统计表">
+              <census ref="census"></census>
+            </dataContainer>
+          </Col>
+        </Row>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="隐患数量统计">
+          <danger ref="danger"></danger>
+        </dataContainer>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="container-row">
+      <Col span="8" class-name="container-col">
+        <dataContainer title="全国任务完成率">
+          <countryComplete ref="countryComplete"></countryComplete>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="各区域完成率">
+          <regionComplete ref="regionComplete"></regionComplete>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="全国隐患整改率">
+          <countryDanger ref="countryDanger"></countryDanger>
+        </dataContainer>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataContainer from '@/components/dataContainer'
+import assignment from '@/views/assetsSecurity/components/assignment'
+import project from '@/views/assetsSecurity/components/project'
+import census from '@/views/assetsSecurity/components/census'
+import danger from '@/views/assetsSecurity/components/danger'
+import countryComplete from '@/views/assetsSecurity/components/countryComplete'
+import regionComplete from '@/views/assetsSecurity/components/regionComplete'
+import countryDanger from '@/views/assetsSecurity/components/countryDanger'
+
+export default {
+  name: 'assetsSecurity',
+  components: {
+    dataContainer,
+    assignment,
+    project,
+    census,
+    danger,
+    countryComplete,
+    regionComplete,
+    countryDanger
+  },
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial () {
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    .container-row{
+      height: calc((200% - 40px) / 3);
+      .container-col{
+        height: 100%;
+      }
+    }
+    .container-row2{
+      height: calc(50% - 10px);
+    }
+    .container-row2:first-child{
+      margin-bottom: 20px;
+    }
+    .container-row:last-child{
+      height: calc((100% - 20px) / 3);
+      margin-top: 20px;
+    }
+  }
+</style>

src/views/hospitalControl/components/charge.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%;">
+      <Col flex="1" class-name="data-col">
+        <div id="chart-charge1" class="chart"></div>
+      </Col>
+      <Col flex="1px" class-name="data-col">
+        <dataLine style="height: 60%; top: 50%; transform: translateY(-50%)"></dataLine>
+      </Col>
+      <Col flex="1" class-name="data-col">
+        <div id="chart-charge2" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataLine from '@/components/dataLine'
+export default {
+  name: 'charge',
+  components: {
+    dataLine
+  },
+  data () {
+    return {
+      chartData1: {
+        '应收': 0,
+        '实收': 0
+      },
+      chartData2: {
+        '应收': 0,
+        '实收': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData1 = {
+        '应收': 6715393,
+        '实收': 2691883
+      }
+      this.chartData2 = {
+        '应收': 816880,
+        '实收': 5359521
+      }
+      this.$nextTick(() => {
+        this.creatChart1()
+        this.creatChart2()
+      })
+    },
+    //  创建图表
+    creatChart1 () {
+      let option = {
+        color: ['#a3f1ff', '#29c5f2'],
+        title: {
+          text: '◆  物业费',
+          textAlign: 'right',
+          left: 'center',
+          textStyle: {
+            color: '#5cadff'
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          top: 'middle',
+          align: 'left',
+          icon: 'circle',
+          itemWidth: 12,
+          itemGap: 20,
+          formatter: (name) => {
+            return '{name|' + name + '} \n {val|' + this.chartData1[name] + '}'
+          },
+          textStyle: {
+            padding: [26, 0, 0, 6],
+            rich: {
+              name: {
+                fontSize: 16,
+                align: 'left',
+                lineHeight: 26,
+                color: '#5cadff'
+              },
+              val: {
+                fontSize: 18,
+                align: 'left',
+                color: '#ff9900',
+                lineHeight: 24,
+                textShadowColor: '#ffffff',
+                textShadowBlur: 3
+              }
+            }
+          },
+          data: ['应收', '实收']
+        },
+        series: [
+          {
+            name: '物业费',
+            type: 'pie',
+            center: ['30%', '50%'],
+            radius: ['40%', '60%'],
+            label: {
+              show: false,
+              position: 'center'
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.8)',
+              shadowBlur: 5
+            },
+            data: [
+              {value: this.chartData1['应收'], name: '应收'},
+              {value: this.chartData1['实收'], name: '实收'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-charge1'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-charge1')).resize()
+      }, 10)
+    },
+    //  创建图表
+    creatChart2 () {
+      let option = {
+        color: ['#a3f1ff', '#29c5f2'],
+        title: {
+          text: '◆  停车费',
+          textAlign: 'right',
+          left: 'center',
+          textStyle: {
+            color: '#5cadff'
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          top: 'middle',
+          align: 'left',
+          icon: 'circle',
+          itemWidth: 12,
+          itemGap: 20,
+          formatter: (name) => {
+            return '{name|' + name + '} \n {val|' + this.chartData2[name] + '}'
+          },
+          textStyle: {
+            padding: [26, 0, 0, 6],
+            rich: {
+              name: {
+                fontSize: 16,
+                align: 'left',
+                lineHeight: 26,
+                color: '#5cadff'
+              },
+              val: {
+                fontSize: 18,
+                align: 'left',
+                color: '#ff9900',
+                lineHeight: 24,
+                textShadowColor: '#ffffff',
+                textShadowBlur: 3
+              }
+            }
+          },
+          data: ['应收', '实收']
+        },
+        series: [
+          {
+            name: '物业费',
+            type: 'pie',
+            center: ['30%', '50%'],
+            radius: ['40%', '60%'],
+            label: {
+              show: false,
+              position: 'center'
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.8)',
+              shadowBlur: 5
+            },
+            data: [
+              {value: this.chartData2['应收'], name: '应收'},
+              {value: this.chartData2['实收'], name: '实收'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-charge2'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-charge2')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-charge1')).resize()
+      this.$echarts.init(document.getElementById('chart-charge2')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/hospitalControl/components/customer.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" type="flex" align="middle" justify="center" style="height: 30%">
+      <dataModule style="width: 40%">
+        <div class="customer-title">客户满意度<span>{{khmyd}}%</span></div>
+      </dataModule>
+    </Row>
+    <Row :gutter="20" style="height: 70%;">
+      <Col flex="1" class-name="data-col data-col-flex">
+        <div class="ratio-info">
+          <span class="ratio-title">客户投诉量</span>
+          <span class="ratio-number">{{khtsl}}</span>
+        </div>
+        <div class="ratio-info">
+          <span class="ratio-title">解决量</span>
+          <span class="ratio-val">{{jjl1 ? jjl1 + '%' : '--'}}</span>
+        </div>
+      </Col>
+      <Col flex="1px" class-name="data-col">
+        <dataLine style="height: 80%; top: 50%; transform: translateY(-50%)"></dataLine>
+      </Col>
+      <Col flex="1" class-name="data-col data-col-flex">
+        <div class="ratio-info">
+          <span class="ratio-title">客户报修量</span>
+          <span class="ratio-number">{{khbxl}}</span>
+        </div>
+        <div class="ratio-info">
+          <span class="ratio-title">解决量</span>
+          <span class="ratio-val">{{jjl2 ? jjl2 + '%' : '--'}}</span>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataLine from '@/components/dataLine'
+import dataModule from '@/components/dataModule'
+export default {
+  name: 'customer',
+  components: {
+    dataLine,
+    dataModule
+  },
+  data () {
+    return {
+      khmyd: 100,
+      khtsl: 1,
+      jjl1: 100,
+      khbxl: 0,
+      jjl2: ''
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+    }
+    .data-col-flex{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding: 1.4vw 0;
+    }
+    .customer-title{
+      height: 2.4vw;
+      padding: 0.2vw 20px;
+      color: #5cadff;
+      font-size: 0.9vw;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        color: #ff9900;
+        font-size: 1.2vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+      }
+    }
+    .ratio-info{
+      width: 60%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .ratio-title{
+      width: 100%;
+      color: #5cadff;
+      font-size: 0.9vw;
+    }
+    .ratio-number{
+      color: #ff9900;
+      font-size: 1.2vw;
+      text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+    }
+    .ratio-val{
+      color: #00c172;
+      font-size: 1.2vw;
+      text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+      white-space: nowrap;
+    }
+  }
+</style>

src/views/hospitalControl/components/electricFireWarning.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="container">
-    <div class="zxw-box">
-      <div class="zxw" v-for="(item, index) in list" :key="index">{{item.name + index}}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'electricFireWarning',
-  data () {
-    return {
-      list: [
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'},
-        {name: 'zxw'}
-      ]
-    }
-  },
-  mounted () {
-    // 初始化
-    this.initial()
-  },
-  methods: {
-    //  初始化
-    initial (object) {
-      this.$Message.success('我查询了' + object)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  .container{
-    flex: auto;
-    overflow: hidden;
-    position: relative;
-  }
-  .zxw-box{
-    height: 100%;
-    flex: auto;
-    display: flex;
-    white-space: nowrap;
-    position: absolute;
-    animation: zxw-animation 15s linear infinite alternate;
-    -moz-animation: zxw-animation  15s linear infinite alternate;
-    -webkit-animation: zxw-animation 15s linear infinite alternate;
-    -o-animation: zxw-animation 15s linear infinite alternate;
-  }
-  @keyframes zxw-animation
-  {
-    from {
-      left: 0;
-      transform: translateX(0%);
-    }
-    to {
-      left: 100%;
-      transform: translateX(-100%);
-    }
-  }
-
-  @-moz-keyframes zxw-animation /* Firefox */
-  {
-    from {
-      left: 0;
-      transform: translateX(0%);
-    }
-    to {
-      left: 100%;
-      transform: translateX(-100%);
-    }
-  }
-
-  @-webkit-keyframes zxw-animation /* Safari 和 Chrome */
-  {
-    from {
-      left: 0;
-      transform: translateX(0%);
-    }
-    to {
-      left: 100%;
-      transform: translateX(-100%);
-    }
-  }
-
-  @-o-keyframes zxw-animation /* Opera */
-  {
-    from {
-      left: 0;
-      transform: translateX(0%);
-    }
-    to {
-      left: 100%;
-      transform: translateX(-100%);
-    }
-  }
-  .zxw{
-    width: 50px;
-    height: 100px;
-    flex: none;
-    background: #ffffff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 10px;
-  }
-</style>

src/views/hospitalControl/components/engineer.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 40%;padding-top: 1vw;box-sizing: border-box">
+      <Col span="12" class-name="data-col">
+        <dataModule>
+          <div class="engineer-title">总工单数<span>{{zgds}}</span></div>
+        </dataModule>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <dataModule>
+          <div class="engineer-title">完成工单<span>{{wcgd}}</span></div>
+        </dataModule>
+      </Col>
+    </Row>
+    <Row :gutter="20" style="height: 60%; padding-bottom: 20px;">
+      <Col span="12" class-name="data-col data-col-flex">
+        <div class="engineer-ratio"><p>{{jsl}}<span>%</span></p>及时率</div>
+      </Col>
+      <Col span="12" class-name="data-col data-col-flex">
+        <div class="engineer-ratio"><p>{{wcl}}<span>%</span></p>完成率</div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataModule from '@/components/dataModule'
+export default {
+  name: 'engineer',
+  components: {
+    dataModule
+  },
+  data () {
+    return {
+      zgds: 50,
+      wcgd: 50,
+      jsl: 66,
+      wcl: 66
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+    }
+    .engineer-title{
+      color: #5cadff;
+      font-size: 0.9vw;
+      padding: 0.6vw 2.4vw;
+      span{
+        color: #00c172;
+        font-size: 1vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        float: right;
+        padding-right: 20px;
+      }
+    }
+    .data-col-flex{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .engineer-ratio{
+      width: 96px;
+      height: 84px;
+      background-size: cover;
+      background-image: url('~@/assets/images/charts_panel.png');
+      color: #5cadff;
+      font-size: 0.9vw;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      p{
+        width: 100%;
+        height: 40px;
+        color: #ff9900;
+        font-size: 1.2vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        text-align: center;
+        line-height: 40px;
+        margin-top: 30px;
+        span{
+          font-size: 0.9vw;
+        }
+      }
+    }
+  }
+</style>

src/views/hospitalControl/components/facilities.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="data-row">
+      <Col span="6" offset="2" class-name="data-col">
+        <div class="row-title">设备信息数</div>
+        <div class="row-number">{{sbxxs.number}}</div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <Progress vertical :percent="sbxxs.ratio" hide-info />
+        <div class="ratio-info">
+          <div class="ratio-number">{{sbxxs.ratio}}%</div>
+          <div class="ratio-title">完好率</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="6" offset="2" class-name="data-col">
+        <div class="row-title">维保任务</div>
+        <div class="row-number">{{wbrw.number}}</div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <Progress vertical :percent="wbrw.ratio1" hide-info />
+        <div class="ratio-info">
+          <div class="ratio-number">{{wbrw.ratio1}}%</div>
+          <div class="ratio-title">完好率</div>
+        </div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <Progress vertical :percent="wbrw.ratio2" hide-info />
+        <div class="ratio-info">
+          <div class="ratio-number">{{wbrw.ratio2}}%</div>
+          <div class="ratio-title">完好率</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="6" offset="2" class-name="data-col">
+        <div class="row-title">巡检任务</div>
+        <div class="row-number">{{xjrw.number}}</div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <Progress vertical :percent="xjrw.ratio1" hide-info />
+        <div class="ratio-info">
+          <div class="ratio-number">{{xjrw.ratio1}}%</div>
+          <div class="ratio-title">完好率</div>
+        </div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <Progress vertical :percent="xjrw.ratio2" hide-info />
+        <div class="ratio-info">
+          <div class="ratio-number">{{xjrw.ratio2}}%</div>
+          <div class="ratio-title">完好率</div>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'facilities',
+  data () {
+    return {
+      sbxxs: {
+        number: 175,
+        ratio: 100
+      },
+      wbrw: {
+        number: 65,
+        ratio1: 68,
+        ratio2: 68
+      },
+      xjrw: {
+        number: 362,
+        ratio1: 94,
+        ratio2: 94
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-row{
+      height: calc((100% - 28px) / 3);
+      margin-bottom: 14px;
+      .data-col{
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .row-title{
+          width: 100%;
+          color: #5cadff;
+          font-size: 0.9vw;
+          line-height: 1vw;
+        }
+        .row-number{
+          color: #ff9900;
+          font-size: 0.9vw;
+          text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+          line-height: 1vw;
+        }
+        .ratio-info{
+          margin-left: 14px;
+        }
+        .ratio-number{
+          color: #00c172;
+          font-size: 0.9vw;
+          text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        }
+        .ratio-title{
+          width: 100%;
+          color: #5cadff;
+          font-size: 0.9vw;
+        }
+      }
+      .data-col:first-child{
+        flex-wrap: wrap;
+      }
+    }
+    .data-row:last-child{
+      margin-bottom: 0;
+    }
+  }
+</style>

src/views/hospitalControl/components/quality.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="container">
+    <Row :gutter="0" style="height: 100%">
+      <Col span="18" class-name="data-col">
+        <div id="chart-quality" class="chart"></div>
+      </Col>
+      <Col span="6" class-name="data-col">
+        <dataModule>
+          <div class="ratio-title">问题发现量<p>{{wtfxl}}</p></div>
+        </dataModule>
+        <dataModule>
+          <div class="ratio-title">整改完成数<p>{{zgwcs}}</p></div>
+        </dataModule>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataModule from '@/components/dataModule'
+export default {
+  name: 'quality',
+  components: {
+    dataModule
+  },
+  data () {
+    return {
+      wtfxl: 173,
+      zgwcs: 165
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      let option = {
+        legend: {
+          textStyle: {
+            color: '#5cadff'
+          },
+          icon: 'rect',
+          itemWidth: 12,
+          itemHeight: 12
+        },
+        grid: {
+          show: false,
+          top: '45px',
+          bottom: '25px',
+          left: '60px',
+          right: '10px'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 12,
+            interval: 0
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['09/28~10/04', '10/05~10/11', '10/12~10/18', '10/19~10/25']
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          name: '（数量）',
+          nameTextStyle: {
+            align: 'right'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 14
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '问题跟踪数',
+            type: 'bar',
+            barWidth: 45,
+            itemStyle: {
+              color: this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  {offset: 0, color: '#009ef9'},
+                  {offset: 1, color: '#005698'}
+                ]
+              )
+            },
+            data: [70, 20, 50, 40]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-quality'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-quality')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-quality')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+    .data-col:last-child{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      height: 8.4vw;
+      transform: translateY(-50%);
+      top: 50%;
+    }
+    .ratio-title{
+      height: 3.2vw;
+      padding: 0.2vw 20px;
+      color: #5cadff;
+      font-size: 0.9vw;
+      text-align: center;
+      p{
+        color: #00c172;
+        font-size: 1.2vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+</style>

src/views/hospitalControl/components/repair.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="16" class-name="data-col">
+        <div id="chart-repair" class="chart"></div>
+      </Col>
+      <Col span="8" class-name="data-col">
+        <dataModule>
+          <div class="ratio-title">报修总数<span>{{chartData['内部报修'] + chartData['客户报修']}}</span></div>
+        </dataModule>
+        <dataModule>
+          <div class="ratio-title">完成率<span>{{wcl}}%</span></div>
+        </dataModule>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataModule from '@/components/dataModule'
+export default {
+  name: 'repair',
+  components: {
+    dataModule
+  },
+  data () {
+    return {
+      wcl: 100,
+      chartData: {
+        '内部报修': 0,
+        '客户报修': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '内部报修': 50,
+        '客户报修': 10
+      }
+      let option = {
+        color: ['#a3f1ff', '#29c5f2'],
+        legend: {
+          orient: 'vertical',
+          left: '8.5%',
+          top: 'middle',
+          align: 'right',
+          icon: 'circle',
+          itemWidth: 12,
+          itemGap: 18,
+          formatter: (name) => {
+            return '{name|' + name + '} \n {val|' + this.chartData[name] + '}'
+          },
+          textStyle: {
+            padding: [0, 0, 20, 0],
+            rich: {
+              name: {
+                fontSize: 16,
+                align: 'center',
+                lineHeight: 26,
+                color: '#5cadff'
+              },
+              val: {
+                fontSize: 18,
+                align: 'center',
+                color: '#ff9900',
+                lineHeight: 26,
+                textShadowColor: '#ffffff',
+                textShadowBlur: 3
+              }
+            }
+          },
+          data: ['内部报修', '客户报修']
+        },
+        series: [
+          {
+            name: '维修工单',
+            type: 'pie',
+            center: ['70%', '50%'],
+            radius: ['30%', '80%'],
+            label: {
+              show: false,
+              position: 'center'
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.8)',
+              shadowBlur: 5
+            },
+            data: [
+              {value: this.chartData['内部报修'], name: '内部报修'},
+              {value: this.chartData['客户报修'], name: '客户报修'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-repair'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-repair')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-repair')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+    .data-col:last-child{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      height: 6vw;
+      transform: translateY(-50%);
+      top: 50%;
+    }
+    .ratio-title{
+      color: #5cadff;
+      font-size: 0.9vw;
+      padding: 0.6vw 20px;
+      span{
+        color: #00c172;
+        font-size: 1vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        float: right;
+        padding-right: 20px;
+      }
+    }
+  }
+</style>

src/views/hospitalControl/components/security.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <Row :gutter="0" style="height: 100%">
+      <Col span="18" class-name="data-col">
+        <div id="chart-security" class="chart"></div>
+      </Col>
+      <Col span="6" class-name="data-col">
+        <dataModule>
+          <div class="ratio-title">总任务数<p>{{zrws}}</p></div>
+        </dataModule>
+        <dataModule>
+          <div class="ratio-title">完成率<p>{{wcl}}<span>%</span></p></div>
+        </dataModule>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataModule from '@/components/dataModule'
+export default {
+  name: 'security',
+  components: {
+    dataModule
+  },
+  data () {
+    return {
+      zrws: 67239,
+      wcl: 77
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      let option = {
+        legend: {
+          textStyle: {
+            color: '#5cadff'
+          },
+          icon: 'rect',
+          itemWidth: 12,
+          itemHeight: 12
+        },
+        grid: {
+          show: false,
+          top: '45px',
+          bottom: '25px',
+          left: '60px',
+          right: '10px'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 12,
+            interval: 0
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['09/28~10/04', '10/05~10/11', '10/12~10/18', '10/19~10/25']
+        },
+        yAxis: {
+          show: true,
+          name: '（数量）',
+          nameTextStyle: {
+            align: 'right'
+          },
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#5cadff'
+            }
+          },
+          axisLabel: {
+            color: '#5cadff',
+            fontSize: 14
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '综合巡逻完成数',
+            type: 'bar',
+            barWidth: 45,
+            itemStyle: {
+              color: this.$echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  {offset: 0, color: '#009ef9'},
+                  {offset: 1, color: '#005698'}
+                ]
+              )
+            },
+            data: [12000, 11000, 11500, 8000]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-security'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-security')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-security')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+    .data-col:last-child{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      height: 8.4vw;
+      transform: translateY(-50%);
+      top: 50%;
+    }
+    .ratio-title{
+      height: 3.2vw;
+      padding: 0.2vw 20px;
+      color: #5cadff;
+      font-size: 0.9vw;
+      text-align: center;
+      p{
+        color: #00c172;
+        font-size: 1.2vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        span{
+          font-size: 0.9vw;
+        }
+      }
+    }
+  }
+</style>

src/views/hospitalControl/index.vue

@@ -1,39 +1,64 @@
 <template>
   <div class="container">
-    <Row :gutter="0" class-name="filter-box">
-      <Select v-model="filterId" style="width:200px" @on-change="filterData">
-        <Option v-for="item in filterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-    </Row>
     <Row :gutter="20" class-name="container-row">
-      <Col span="16" class-name="container-col">
-        <Row :gutter="20" class-name="container-row-left">
+      <Col span="8" class-name="container-col">
+        <Row :gutter="20" class-name="container-row-normal">
+          <Col span="24" class-name="container-col">
+            <dataContainer title="设施设备">
+              <facilities ref="facilities"></facilities>
+            </dataContainer>
+          </Col>
+        </Row>
+        <Row :gutter="20" class-name="container-row-normal">
+          <Col span="24" class-name="container-col">
+            <dataContainer title="维修工单">
+              <repair ref="repair"></repair>
+            </dataContainer>
+          </Col>
+        </Row>
+        <Row :gutter="20" class-name="container-row-normal">
           <Col span="24" class-name="container-col">
-            <dataContainer title="电气火灾预警" titlePosition="left">
-              <electricFireWarning ref="electricFireWarning"></electricFireWarning>
+            <dataContainer title="工程人员工作量">
+              <engineer ref="engineer"></engineer>
             </dataContainer>
           </Col>
         </Row>
-        <Row :gutter="20" class-name="container-row-left">
+      </Col>
+      <Col span="8" class-name="container-col">
+        <Row :gutter="20" class-name="container-row-long">
           <Col span="24" class-name="container-col">
-            <dataContainer title="火灾自动报警" titlePosition="left">22222</dataContainer>
+            <dataContainer>
+            </dataContainer>
           </Col>
         </Row>
-        <Row :gutter="20" class-name="container-row-left">
+        <Row :gutter="20" class-name="container-row-normal">
           <Col span="24" class-name="container-col">
-            <dataContainer title="室内环境" titlePosition="left">22222</dataContainer>
+            <dataContainer title="安防巡逻">
+              <security ref="security"></security>
+            </dataContainer>
           </Col>
         </Row>
       </Col>
       <Col span="8" class-name="container-col">
-        <Row :gutter="20" class-name="container-row-right">
+        <Row :gutter="20" class-name="container-row-normal">
+          <Col span="24" class-name="container-col">
+            <dataContainer title="收费数据">
+              <charge ref="charge"></charge>
+            </dataContainer>
+          </Col>
+        </Row>
+        <Row :gutter="20" class-name="container-row-normal">
           <Col span="24" class-name="container-col">
-            <dataContainer title="实时火警">22222</dataContainer>
+            <dataContainer title="客户服务">
+              <customer ref="customer"></customer>
+            </dataContainer>
           </Col>
         </Row>
-        <Row :gutter="20" class-name="container-row-right">
+        <Row :gutter="20" class-name="container-row-normal">
           <Col span="24" class-name="container-col">
-            <dataContainer title="实时预警">22222</dataContainer>
+            <dataContainer title="品质核查">
+              <quality ref="quality"></quality>
+            </dataContainer>
           </Col>
         </Row>
       </Col>
@@ -43,27 +68,28 @@
 
 <script>
 import dataContainer from '@/components/dataContainer'
-import electricFireWarning from '@/views/EBA/components/electricFireWarning'
+import facilities from '@/views/hospitalControl/components/facilities'
+import repair from '@/views/hospitalControl/components/repair'
+import engineer from '@/views/hospitalControl/components/engineer'
+import security from '@/views/hospitalControl/components/security'
+import charge from '@/views/hospitalControl/components/charge'
+import customer from '@/views/hospitalControl/components/customer'
+import quality from '@/views/hospitalControl/components/quality'
 
 export default {
-  name: 'EBA',
+  name: 'hospitalControl',
   components: {
     dataContainer,
-    electricFireWarning
+    facilities,
+    repair,
+    engineer,
+    security,
+    charge,
+    customer,
+    quality
   },
   data () {
     return {
-      filterId: '',
-      filterList: [
-        {
-          value: 'New York',
-          label: 'New York'
-        },
-        {
-          value: 'London',
-          label: 'London'
-        }
-      ]
     }
   },
   mounted () {
@@ -73,10 +99,6 @@ export default {
   methods: {
     //  初始化
     initial () {
-    },
-    //  过滤
-    filterData () {
-      this.$refs.electricFireWarning.initial(this.filterId)
     }
   }
 }
@@ -85,19 +107,19 @@ export default {
   .container{
     flex: auto;
     .container-row{
-      height: calc(100% - 45px);
-      .container-row-left{
+      height: calc(100%);
+      .container-row-normal{
         height: calc((100% - 40px) / 3);
         margin-bottom: 20px;
       }
-      .container-row-left:last-child{
+      .container-row-normal:last-child{
         margin-bottom: 0;
       }
-      .container-row-right{
-        height: calc(50% - 10px);
+      .container-row-long{
+        height: calc((200% - 20px) / 3);
         margin-bottom: 20px;
       }
-      .container-row-right:last-child{
+      .container-row-long:last-child{
         margin-bottom: 0;
       }
       .container-col{

src/views/hospitalExhibit/components/equipment.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-equipment" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'equipment',
+  data () {
+    return {
+      chartData: {
+        '升降系统': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '升降系统': 50
+      }
+      let option = {
+        color: ['#5cb8ff', '#87c9f9', '#044eaf', '#b9e9fd', '#286add', '#459cff'],
+        legend: {
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '4%',
+          align: 'left',
+          icon: 'roundRect',
+          padding: [0, 20, 0, 20],
+          formatter: (name) => {
+            return '{name|' + name + '} \n {val|' + this.chartData[name] + '}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                padding: [0, 35, 0, 15],
+                fontSize: 16,
+                align: 'center',
+                lineHeight: 26,
+                color: '#5cadff'
+              },
+              val: {
+                padding: [0, 35, 0, 15],
+                fontSize: 18,
+                align: 'center',
+                color: '#ff9900',
+                lineHeight: 26,
+                textShadowColor: '#ffffff',
+                textShadowBlur: 3
+              }
+            }
+          }
+        },
+        series: [
+          {
+            name: '设备类型',
+            type: 'pie',
+            center: ['50%', '35%'],
+            radius: ['40%', '55%'],
+            label: {
+              color: '#5cadff',
+              fontSize: 14,
+              align: 'center',
+              formatter: '{b}\n{c}'
+            },
+            labelLine: {
+              lineStyle: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.5)',
+              shadowBlur: 3
+            },
+            data: [
+              {value: this.chartData['升降系统'], name: '升降系统'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-equipment'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-equipment')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-equipment')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/components/facilities.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-facilities" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'facilities',
+  data () {
+    return {
+      chartData: {
+        '维修中': 0,
+        '关机中': 0,
+        '维保中': 0,
+        '故障中': 0,
+        '停机中': 0,
+        '运行中': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '维修中': 50,
+        '关机中': 50,
+        '维保中': 50,
+        '故障中': 50,
+        '停机中': 50,
+        '运行中': 10
+      }
+      let option = {
+        color: ['#5cb8ff', '#87c9f9', '#044eaf', '#b9e9fd', '#286add', '#459cff'],
+        legend: {
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '4%',
+          align: 'left',
+          icon: 'roundRect',
+          padding: [0, 20, 0, 20],
+          formatter: (name) => {
+            return '{name|' + name + '} \n {val|' + this.chartData[name] + '}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                padding: [0, 35, 0, 15],
+                fontSize: 16,
+                align: 'center',
+                lineHeight: 26,
+                color: '#5cadff'
+              },
+              val: {
+                padding: [0, 35, 0, 15],
+                fontSize: 18,
+                align: 'center',
+                color: '#ff9900',
+                lineHeight: 26,
+                textShadowColor: '#ffffff',
+                textShadowBlur: 3
+              }
+            }
+          }
+        },
+        series: [
+          {
+            name: '设备状态',
+            type: 'pie',
+            center: ['50%', '35%'],
+            radius: ['40%', '55%'],
+            label: {
+              color: '#5cadff',
+              fontSize: 14,
+              align: 'center',
+              formatter: '{b}\n{c}'
+            },
+            labelLine: {
+              lineStyle: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.5)',
+              shadowBlur: 3
+            },
+            data: [
+              {value: this.chartData['维修中'], name: '维修中'},
+              {value: this.chartData['关机中'], name: '关机中'},
+              {value: this.chartData['维保中'], name: '维保中'},
+              {value: this.chartData['故障中'], name: '故障中'},
+              {value: this.chartData['停机中'], name: '停机中'},
+              {value: this.chartData['运行中'], name: '运行中'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-facilities'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-facilities')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-facilities')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/components/inspection.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-inspection" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'inspection',
+  data () {
+    return {
+      wcl: 100,
+      chartData: {
+        '未完成': 0,
+        '完成': 0,
+        '审核关闭': 0,
+        '未派单': 0,
+        '过期': 0,
+        '已销单': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '未完成': 50,
+        '完成': 50,
+        '审核关闭': 50,
+        '未派单': 50,
+        '过期': 50,
+        '已销单': 50
+      }
+      let option = {
+        color: ['#5cb8ff', '#87c9f9', '#044eaf', '#b9e9fd', '#286add', '#459cff'],
+        legend: {
+          orient: 'vertical',
+          top: 'center',
+          right: 10,
+          align: 'right',
+          icon: 'roundRect',
+          textStyle: {
+            fontSize: 16,
+            color: '#5cadff'
+          }
+        },
+        series: [
+          {
+            name: '巡检任务',
+            type: 'pie',
+            center: ['40%', '50%'],
+            radius: ['35%', '65%'],
+            label: {
+              color: '#5cadff',
+              fontSize: 14,
+              align: 'center',
+              formatter: '{b}\n{c}'
+            },
+            labelLine: {
+              lineStyle: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.5)',
+              shadowBlur: 3
+            },
+            data: [
+              {value: this.chartData['未完成'], name: '未完成'},
+              {value: this.chartData['完成'], name: '完成'},
+              {value: this.chartData['审核关闭'], name: '审核关闭'},
+              {value: this.chartData['未派单'], name: '未派单'},
+              {value: this.chartData['过期'], name: '过期'},
+              {value: this.chartData['已销单'], name: '已销单'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-inspection'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-inspection')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-inspection')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/components/maintenance.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" style="height: 100%">
+      <Col span="24" class-name="data-col">
+        <div id="chart-maintenance" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'maintenance',
+  data () {
+    return {
+      wcl: 100,
+      chartData: {
+        '未完成': 0,
+        '完成': 0,
+        '审核关闭': 0,
+        '未派单': 0,
+        '过期': 0,
+        '已销单': 0
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+    //  监听浏览器页面尺寸
+    window.addEventListener('resize', this.resizePage)
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+      this.chartData = {
+        '未完成': 50,
+        '完成': 50,
+        '审核关闭': 50,
+        '未派单': 50,
+        '过期': 50,
+        '已销单': 50
+      }
+      let option = {
+        color: ['#5cb8ff', '#87c9f9', '#044eaf', '#b9e9fd', '#286add', '#459cff'],
+        legend: {
+          orient: 'vertical',
+          top: 'center',
+          right: 10,
+          align: 'right',
+          icon: 'roundRect',
+          textStyle: {
+            fontSize: 16,
+            color: '#5cadff'
+          }
+        },
+        series: [
+          {
+            name: '巡检任务',
+            type: 'pie',
+            center: ['40%', '50%'],
+            radius: ['35%', '65%'],
+            label: {
+              color: '#5cadff',
+              fontSize: 14,
+              align: 'center',
+              formatter: '{b}\n{c}'
+            },
+            labelLine: {
+              lineStyle: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              shadowColor: 'rgba(255, 255, 255, 0.5)',
+              shadowBlur: 3
+            },
+            data: [
+              {value: this.chartData['未完成'], name: '未完成'},
+              {value: this.chartData['完成'], name: '完成'},
+              {value: this.chartData['审核关闭'], name: '审核关闭'},
+              {value: this.chartData['未派单'], name: '未派单'},
+              {value: this.chartData['过期'], name: '过期'},
+              {value: this.chartData['已销单'], name: '已销单'}
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('chart-maintenance'))
+      // 绘制图表
+      myChart.setOption(option, true)
+      setTimeout(() => {
+        this.$echarts.init(document.getElementById('chart-maintenance')).resize()
+      }, 10)
+    },
+    //  监听浏览器页面尺寸
+    resizePage () {
+      this.$echarts.init(document.getElementById('chart-maintenance')).resize()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    .data-col{
+      height: 100%;
+      .chart{
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/components/masterData.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>在管设备</p>
+            <Icon type="ios-cog-outline" />
+          </div>
+          <div class="data-number">{{zgsb}}</div>
+          <div class="data-tip">在管项目<span>{{zgxm}}</span>个</div>
+          <div class="data-tip">在管机房<span>{{zgjf}}</span>个</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>设备完好率</p>
+            <Icon type="md-trending-up" />
+          </div>
+          <div class="data-number">{{sbwhl}}%</div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>巡检完成率</p>
+            <Icon type="ios-pie-outline" />
+          </div>
+          <div class="data-number">{{xjwcl}}%</div>
+        </div>
+      </Col>
+      <Col span="12" class-name="data-col">
+        <div class="data-container">
+          <div class="data-title">
+            <p>维保完成率</p>
+            <Icon type="md-done-all" />
+          </div>
+          <div class="data-number">{{wbwcl}}%</div>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'masterData',
+  data () {
+    return {
+      zgsb: 1,
+      zgxm: 52,
+      zgjf: 1110,
+      sbwhl: 100,
+      xjwcl: 96.08,
+      wbwcl: 85.61
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    padding: 20px;
+    .data-row{
+      height: calc(50% - 10px);
+    }
+    .data-row:first-child{
+      margin-bottom: 20px;
+    }
+    .data-col{
+      height: 100%;
+      .data-container{
+        width: 100%;
+        height: 100%;
+        padding: 16px;
+        background: #20364b;
+        color: #5cadff;
+        .data-title{
+          font-size: 0.9vw;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          i{
+            color: #ffffff;
+            font-size: 2vw;
+          }
+        }
+        .data-number{
+          margin: 1vw 0;
+          color: #00c172;
+          font-size: 1.2vw;
+          text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+        }
+        .data-tip{
+          line-height: 1.6vw;
+          font-size: 0.7vw;
+          span{
+            color: #00c172;
+            text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/components/repair.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="data-row">
+      <Col span="10" offset="2" class-name="data-col">
+        <div class="data-title">内部报修&nbsp;&nbsp;|&nbsp;&nbsp;完成率</div>
+      </Col>
+      <Col span="10" class-name="data-col">
+        <div class="data-number">{{nbbx}}&nbsp;&nbsp;&nbsp;&nbsp;{{nbbxwcl}}%</div>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="data-row">
+      <Col span="10" offset="2" class-name="data-col">
+        <div class="data-title">内部报修&nbsp;&nbsp;|&nbsp;&nbsp;完成率</div>
+      </Col>
+      <Col span="10" class-name="data-col">
+        <div class="data-number">{{khbx}}&nbsp;&nbsp;&nbsp;&nbsp;{{khbxwcl}}%</div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'masterData',
+  data () {
+    return {
+      nbbx: 15,
+      nbbxwcl: 80,
+      khbx: 18,
+      khbxwcl: 52
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial (object) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    overflow: hidden;
+    position: relative;
+    padding: 20px;
+    .data-row{
+      height: calc(50% - 10px);
+    }
+    .data-row:first-child{
+      margin-bottom: 20px;
+    }
+    .data-col{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .data-title{
+        color: #5cadff;
+        font-size: 0.9vw;
+      }
+      .data-number{
+        color: #00c172;
+        font-size: 1.2vw;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+</style>

src/views/hospitalExhibit/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="container">
+    <Row :gutter="20" class-name="container-row">
+      <Col span="8" class-name="container-col">
+        <dataContainer title="设施状态">
+          <facilities ref="facilities"></facilities>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="基础数据">
+          <masterData ref="masterData"></masterData>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="设备类型">
+          <equipment ref="equipment"></equipment>
+        </dataContainer>
+      </Col>
+    </Row>
+    <Row :gutter="20" class-name="container-row">
+      <Col span="8" class-name="container-col">
+        <dataContainer title="维修任务分布">
+          <repair ref="repair"></repair>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="巡检任务">
+          <inspection ref="inspection"></inspection>
+        </dataContainer>
+      </Col>
+      <Col span="8" class-name="container-col">
+        <dataContainer title="维保任务">
+          <maintenance ref="maintenance"></maintenance>
+        </dataContainer>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataContainer from '@/components/dataContainer'
+import facilities from '@/views/hospitalExhibit/components/facilities'
+import masterData from '@/views/hospitalExhibit/components/masterData'
+import equipment from '@/views/hospitalExhibit/components/equipment'
+import repair from '@/views/hospitalExhibit/components/repair'
+import inspection from '@/views/hospitalExhibit/components/inspection'
+import maintenance from '@/views/hospitalExhibit/components/maintenance'
+
+export default {
+  name: 'hospitalExhibit',
+  components: {
+    dataContainer,
+    facilities,
+    masterData,
+    equipment,
+    repair,
+    inspection,
+    maintenance
+  },
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial () {
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    .container-row{
+      height: calc((200% - 40px) / 3);
+      .container-col{
+        height: 100%;
+      }
+    }
+    .container-row:last-child{
+      height: calc((100% - 20px) / 3);
+      margin-top: 20px;
+    }
+  }
+</style>

src/views/integrateControl/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="container">
+    <Row :gutter="30" align="middle" justify="center" class-name="container-row">
+      <Col flex="276px">
+        <div class="data-box">
+          <div class="data-label">全国项目数</div>
+          <div class="data-value">{{qgxms}}<span>个</span></div>
+        </div>
+      </Col>
+      <Col flex="276px">
+        <div class="data-box">
+          <div class="data-label">建筑面积</div>
+          <div class="data-value">{{jzmj}}<span>㎡</span></div>
+        </div>
+      </Col>
+      <Col flex="276px">
+        <div class="data-box">
+          <div class="data-label">土地面积</div>
+          <div class="data-value">{{tdmj}}<span>㎡</span></div>
+        </div>
+      </Col>
+      <Col flex="276px">
+        <div class="data-box">
+          <div class="data-label">管护项目数</div>
+          <div class="data-value">{{ghxms}}<span>个</span></div>
+        </div>
+      </Col>
+      <Col flex="276px">
+        <div class="data-box">
+          <div class="data-label">全委项目数</div>
+          <div class="data-value">{{qwxms}}<span>个</span></div>
+        </div>
+      </Col>
+    </Row>
+    <Row :gutter="0" class-name="container-row">
+      <Col span="24" style="height: 100%">
+        <div id="chart-map" class="chart"></div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import dataContainer from '@/components/dataContainer'
+import { bindMap } from '@/utils/map'
+
+export default {
+  name: 'integrateControl',
+  components: {
+    dataContainer
+  },
+  data () {
+    return {
+      qgxms: 1321,
+      jzmj: 4567,
+      tdmj: 4422,
+      ghxms: 127,
+      qwxms: 223,
+      option: {
+        grid: {
+          left: 50,
+          right: 50
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        geo: {
+          show: true,
+          map: '全国',
+          label: {
+            normal: {
+              color: '#ffffff'
+            },
+            emphasis: {
+              show: true,
+              fontSize: 14,
+              color: '#ffffff'
+            }
+          },
+          zoom: 1.2,
+          roam: false,
+          itemStyle: {
+            normal: {
+              areaColor: '#0e3241',
+              borderColor: '#00d6ff',
+              borderWidth: 1
+            },
+            emphasis: {
+              areaColor: '#ffad77'
+            }
+          }
+        },
+        series: [
+          {
+            name: '地图',
+            type: 'map',
+            map: '全国',
+            geoIndex: 0,
+            layoutCenter: ['50%', '50%'],
+            layoutSize: 310,
+            tooltip: {
+              show: false
+            },
+            data: []
+          },
+          {
+            name: '项目数',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            data: [],
+            animation: false,
+            itemStyle: {
+              color: '#2f9dff'
+            },
+            symbolSize: (val) => {
+              return val[2] / 10
+            },
+            emphasis: {
+              label: {
+                color: '#ffffff',
+                verticalAlign: 'middle',
+                show: true
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.initial()
+  },
+  methods: {
+    //  初始化
+    initial () {
+      this.option.series[1].data = [
+        {name: '公司1', value: [122.18, 40.65, 300]},
+        {name: '公司2', value: [87.68, 43.77, 200]},
+        {name: '公司3', value: [110.35, 20.02, 300]},
+        {name: '公司4', value: [116.46, 39.92, 500]}
+      ]
+      let myChart = this.$echarts.init(document.getElementById('chart-map'))
+      // 绑定地图
+      this.$echarts.registerMap('全国', bindMap()['全国'], {})
+      myChart.setOption(this.option, true)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .container{
+    flex: auto;
+    .container-row{
+      height: 62px;
+      .container-col{
+        height: 100%;
+      }
+    }
+    .container-row:last-child{
+      height: calc(100% - 82px);
+      margin-top: 20px;
+    }
+    .data-box{
+      width: 276px;
+      height: 62px;
+      box-sizing: border-box;
+      padding: 0 25px;
+      background-image: url('~@/assets/images/data_box_start.png');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 276px 62px;
+      display: flex;
+      justify-content: space-between;
+      line-height: 68px;
+      .data-label{
+        font-size: 0.8vw;
+        font-family: Microsoft YaHei;
+        color: #52d0ff;
+      }
+      .data-value{
+        color: #ff9900;
+        font-size: 1.2vw;
+        font-weight: bold;
+        span{
+          font-size: 1vw;
+        }
+      }
+    }
+    .chart{
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/parkingSystem/index.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="container">
-    <Row :gutter="0" class-name="filter-box">
-      <Select v-model="filterId" style="width:200px" @on-change="filterData">
-        <Option v-for="item in filterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-    </Row>
-    <Row :gutter="20" class-name="container-row">
-      <Col span="8" class-name="container-col">
-        <dataContainer title="今日车场流量分析">22222</dataContainer>
-      </Col>
-      <Col span="8" class-name="container-col">
-        <dataContainer title="关键指标">22222</dataContainer>
-      </Col>
-      <Col span="8" class-name="container-col">
-        <dataContainer title="异常趋势统计">22222</dataContainer>
-      </Col>
-    </Row>
-    <Row :gutter="20" class-name="container-row">
-      <Col span="8" class-name="container-col">
-        <dataContainer title="车场流量趋势">22222</dataContainer>
-      </Col>
-      <Col span="8" class-name="container-col">
-        <dataContainer title="今日停车时长统计">22222</dataContainer>
-      </Col>
-      <Col span="8" class-name="container-col">
-        <dataContainer title="异常趋势">22222</dataContainer>
-      </Col>
-    </Row>
-  </div>
-</template>
-
-<script>
-import dataContainer from '@/components/dataContainer'
-
-export default {
-  name: 'parkingSystem',
-  components: {
-    dataContainer
-  },
-  data () {
-    return {
-    }
-  },
-  mounted () {
-    // 初始化
-    this.initial()
-  },
-  methods: {
-    //  初始化
-    initial () {
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-  .container{
-    flex: auto;
-    .container-row{
-      height: calc(50% - 32.5px);
-      margin-bottom: 20px;
-      .container-col{
-        height: 100%;
-      }
-    }
-    .container-row:last-child{
-      margin-bottom: 0;
-    }
-  }
-</style>

src/views/videoMonitor/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="container">
-    <Row :gutter="0" class-name="filter-box">
-      <Select v-model="filterId" style="width:200px" @on-change="filterData">
-        <Option v-for="item in filterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-    </Row>
-    <Row :gutter="20" class-name="container-row">
-      <Col span="24" class-name="container-col">
-        <dataContainer>22222</dataContainer>
-      </Col>
-    </Row>
-  </div>
-</template>
-
-<script>
-import dataContainer from '@/components/dataContainer'
-
-export default {
-  name: 'videoMonitor',
-  components: {
-    dataContainer
-  },
-  data () {
-    return {
-    }
-  },
-  mounted () {
-    // 初始化
-    this.initial()
-  },
-  methods: {
-    //  初始化
-    initial () {
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-  .container{
-    flex: auto;
-    .container-row{
-      height: calc(100% - 45px);
-      .container-col{
-        height: 100%;
-      }
-    }
-  }
-</style>

static/css/public.css

@@ -60,3 +60,6 @@ span, p, h1, h2, h3, h4, h5, h6 {
   border-radius: 4px;
   background-color: #f6f6f6;
 }
+.ivu-progress-inner{
+  background-color: rgba(255, 255, 255, 0.15);
+}