修改大屏

package.json

@@ -25,6 +25,7 @@
     "vue-baidu-map": "^0.21.22",
     "vue-i18n": "^8.0.0",
     "vue-router": "^3.0.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/api/bigscreen.js

+
+import request from '../util/ajax'
+
+export function siteSummary(params) {
+  return request({
+    url: '/api/bigScreen/siteSummary',
+    method: 'GET',
+    data: params
+  })
+}
+
+export function patientSummary(params) {
+  return request({
+    url: '/api/bigScreen/patientSummary',
+    method: 'GET',
+    data: params
+  })
+}
+
+export function admissions(params) {
+  return request({
+    url: '/api/bigScreen/admissions',
+    method: 'GET',
+    data: params
+  })
+}
+
+export function centerSummary(params) {
+  return request({
+    url: '/api/bigScreen/centerSummary',
+    method: 'GET',
+    data: params
+  })
+}

src/page/bigscreen/components/echartsMap.vue

@@ -13,23 +13,28 @@
       <div class="b">
         <div class="l">
           <p class="p1">项目总数</p>
-          <p class="p2">{{selectData.value}}</p>
+          <p class="p2">{{selectData.itemTotal}}</p>
         </div>
         <ul class="r">
           <li>
             <i class="xt"></i>
             <span>胸痛</span>
-            <span class="num">{{selectData.val1}}</span>
+            <span class="num">{{selectData.chestTotal}}</span>
           </li>
           <li>
             <i class="cz"></i>
             <span>卒中</span>
-            <span class="num">{{selectData.val2}}</span>
+            <span class="num">{{selectData.strokeTotal}}</span>
           </li>
           <li>
             <i class="css"></i>
-            <span>创/烧伤</span>
-            <span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span>
+            <span>创伤</span>
+            <span class="num">{{selectData.traumaTotal}}</span>
+          </li>
+          <li>
+            <i class="ss"></i>
+            <span>烧伤</span>
+            <span class="num">{{selectData.burnTotal}}</span>
           </li>
         </ul>
       </div>
@@ -38,38 +43,68 @@
 </template>
 
 <script>
+/**
+ * 江岸区 江汉区 硚口区 汉阳区 武昌区 青山区 洪山区 东西湖区 汉南区 蔡甸区 江夏区 黄陂区 新洲区
+ * */
 import * as echarts from 'echarts';
 import wuhan from '@/assets/map/wuhan.json'
 
 export default {
+  props: {
+    areaCenters: {
+      type: Array,
+      default: []
+    }
+  },
   data() {
     return {
-      chart: null,
-      dataList: [
-        { name: '江岸区', selected: true, value: 541, val1: 300, val2: 200 },
-        { name: '江汉区', value: 416, val1: 200, val2: 100 },
-        { name: '硚口区', value: 280, val1: 200, val2: 10 },
-        { name: '汉阳区', value: 971, val1: 200, val2: 100 },
-        { name: '武昌区', value: 157, val1: 20, val2: 10 },
-        { name: '青山区', value: 827, val1: 200, val2: 100 },
-        { name: '洪山区', value: 844, val1: 200, val2: 100 },
-        { name: '东西湖区', value: 850, val1: 200, val2: 100 },
-        { name: '汉南区', value: 354, val1: 200, val2: 100 },
-        { name: '蔡甸区', value: 431, val1: 200, val2: 100 },
-        { name: '江夏区', value: 252, val1: 200, val2: 10 },
-        { name: '黄陂区', value: 340, val1: 200, val2: 100 },
-        { name: '新洲区', value: 752, val1: 200, val2: 100 }
-      ],
-      selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 }
+      myChart: null,
+      dataIndex: 0,
+      dataList: [],
+      selectData: {
+        name: '',
+        itemTotal: 0,
+        chestTotal: 0,
+        strokeTotal: 0,
+        traumaTotal: 0,
+        burnTotal: 0,
+      }
+    }
+  },
+  watch: {
+    areaCenters: function(val) {
+      if (val || val.length > 0) {
+        this.init()
+      }
     }
   },
   mounted() {
+    echarts.registerMap('wuhan', wuhan)
     this.init()
   },
+  destroyed() {
+    clearInterval(this.timer)
+  },
   methods: {
     init() {
-      echarts.registerMap('wuhan', wuhan)
-      const myChart = echarts.init(this.$refs.chart);
+      let total = 0
+      const list = this.areaCenters.map((item, index) => {
+        total += item.itemTotal
+        const params = {
+          name: item.areaName,
+          value: item.itemTotal,
+          ...item
+        }
+        if (index === 0) {
+          params.selected = true
+          this.selectData = params
+        }
+        return params
+      })
+      this.myChart = this.myChart || echarts.init(this.$refs.chart);
+      this.myChart.off('click')
+      this.myChart.off('selectchanged')
+
       let option = {
         title: {
           text: '武汉市地图',
@@ -87,11 +122,11 @@ export default {
           left: 138,
           bottom: 108,
           pieces: [
-            { gt: 820, lte: 1000, label: '高', color: '#386FFF' },
-            { gt: 640, lte: 820, label: ' ', color: '#3361DE' },
-            { gt: 460, lte: 640, label: ' ', color: '#2B52BD' },
-            { gt: 280, lte: 460, label: ' ', color: '#24449C' },
-            { gt: 100, lte: 280, label: '低', color: '#1A347A' }
+            { gt: total / 5 * 4, lte: total, label: '高', color: '#386FFF' },
+            { gt: total / 5 * 3, lte: total / 5 * 4, label: ' ', color: '#3361DE' },
+            { gt: total / 5 * 2, lte: total / 5 * 3, label: ' ', color: '#2B52BD' },
+            { gt: total / 5, lte: total / 5 * 2, label: ' ', color: '#24449C' },
+            { gt: 0, lte: total / 5, label: '低', color: '#1A347A' }
           ],
           itemWidth: 44,
           itemHeight: 27,
@@ -142,15 +177,30 @@ export default {
             },
             top: 115,
             bottom: 325,
-            data: this.dataList
+            data: list
           }
         ]
       }
-      // this.chart.setOption(option);
-      myChart.setOption(option);
-      myChart.on('click', (params) => {
-        this.selectData = params.data
+      this.myChart.setOption(option);
+      this.myChart.on('click', (params) => {
+        this.dataIndex = params.dataIndex
+        this.selectData = list[this.dataIndex]
       });
+      this.myChart.on('selectchanged', (params) => {
+        this.dataIndex = params.fromActionPayload.dataIndex
+        this.selectData = list[this.dataIndex]
+      });
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.dataIndex++
+        if (this.dataIndex >= list.length) {
+          this.dataIndex = 0
+        }
+        this.myChart.dispatchAction({
+          type: 'select',
+          dataIndex: this.dataIndex
+        })
+      }, 30 * 1000)
     }
   }
 }
@@ -184,7 +234,7 @@ export default {
   .tip {
     position: absolute;
     width: 520px;
-    height: 382px;
+    height: 450px;
     background: #00fffc;
     box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
       0px 0px 64px 0px #00b3ff;
@@ -202,7 +252,7 @@ export default {
       line-height: 60px;
     }
     .b {
-      height: 189px;
+      height: 257px;
     }
     .l,
     .r {
@@ -249,6 +299,9 @@ export default {
           &.css {
             background: #ff8931;
           }
+          &.ss {
+            background: #ff5600;
+          }
         }
         span:nth-child(2) {
           display: inline-block;

src/page/bigscreen/components/echartsPie.vue

@@ -2,7 +2,7 @@
   <div class="main">
     <div class="total">
       <span>总人数</span>
-      <p>{{this.total}}人 </p>
+      <p>{{ total }}人 </p>
     </div>
     <div
       class="chart"
@@ -16,30 +16,45 @@
 <script>
 import * as echarts from 'echarts';
 export default {
+  props: {
+    patientCount: {
+      type: Object,
+      default: {
+        burnTotal: 0,
+        chestTotal: 0,
+        strokeTotal: 0,
+        traumaTotal: 0
+      }
+    }
+  },
   data() {
     return {
       chart: null,
-      list: [
-        { value: 27594, name: '胸痛' },
-        { value: 18594, name: '卒中' },
-        { value: 18594, name: '创/烧伤' },
-        { value: 18594, name: '其他' }
-      ],
       total: 0
     }
   },
+  watch: {
+    patientCount: function(val) {
+      if (val) {
+        this.init()
+      }
+    }
+  },
   mounted() {
-    let count = 0
-    this.list.forEach(i => {
-      count += i.value
-    })
-    this.total = count
     this.init()
   },
   methods: {
     init() {
+      const { burnTotal, chestTotal, strokeTotal, traumaTotal } = this.patientCount
+      this.total = burnTotal + chestTotal + strokeTotal + traumaTotal
+      // console.log(total)
+      const list = [
+        { value: chestTotal, name: '胸痛' },
+        { value: strokeTotal, name: '卒中' },
+        { value: traumaTotal, name: '创伤' },
+        { value: burnTotal, name: '烧伤' }
+      ]
       const myChart = this.chart || echarts.init(this.$refs.chart);
-      // this.chart = echarts.init(this.$refs.chart);
       let option = {
         tooltip: {
           trigger: 'item'
@@ -52,8 +67,12 @@ export default {
           itemWidth: 24,
           itemHeight: 24,
           formatter: (name) => {
-            const item = this.list.find(i => i.name = name)
-            const per = parseInt(item.value / this.total * 100)
+
+            const item = list.find(i => i.name == name)
+            let per = 0
+            if (item.value !== 0) {
+              per = parseInt(item.value / this.total * 100)
+            }
             return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
           },
           textStyle: {
@@ -94,7 +113,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: this.list,
+            data: list,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
@@ -125,7 +144,7 @@ export default {
   .total {
     position: absolute;
     top: 183px;
-    left: 157px;
+    width: 50%;
     text-align: center;
     z-index: 9999;
     span {