upload

src/libs/host.js

@@ -31,7 +31,8 @@ function urlFun(name){
         /**
          * 健康打卡统计
          */ 
-        health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`
+        // health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`,
+        health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040`,       //测试地址
         // health:`http://xuxiaoming.vaiwan.com`
     }
     return url[name]

src/view/healthCard/statistics/chart.vue

@@ -182,7 +182,16 @@
                 </div>
             </div>
             <div>
-                <h3>2.自2020年1月1日起，是否在湖北停留或路过，或解除过来自湖北的人员饼状图</h3>
+                <h3>2.体温情况</h3>
+                <div ref="chart4" v-show="set4.length > 0">
+                    <canvas id="myChart4" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+                <div class="img" v-if="set4.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </div>
+            <div>
+                <h3>3.自2020年1月1日起，是否在湖北停留或路过，或解除过来自湖北的人员饼状图</h3>
                 <div ref="chart2" v-show="set2.length > 0">
                     <canvas id="myChart2" width="400" height="300" style="width:100%;height:300px;"></canvas>
                 </div>
@@ -191,7 +200,7 @@
                 </div>
             </div>
             <div>
-                <h3>3.是否接触过疑似或确诊的新型肺炎患者</h3>
+                <h3>4.是否接触过疑似或确诊的新型肺炎患者</h3>
                 <div ref="chart3" v-show="set3.length > 0">
                     <canvas id="myChart3" width="400" height="300" style="width:100%;height:300px;"></canvas>
                 </div>
@@ -230,6 +239,10 @@ const Legend = require('@antv/f2/lib/plugin/legend');
 F2.Chart.plugins.register(Legend); // 方式一：全局注册
 F2.Chart.plugins.register(PieLabel);
 
+require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互
+const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
+F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册
+
 export default {
   name: 'healthCardStatisticsChart',
   data () {
@@ -238,9 +251,11 @@ export default {
         myChart1:null,
         myChart2:null,
         myChart3:null,
+        myChart4:null,
         set1:[],
         set2:[],
         set3:[],
+        set4:[],
         list:[],
         page:1,
         per_page:20,
@@ -277,9 +292,13 @@ export default {
             this.myChart2.destroy();
             this.myChart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
             this.myChart3.destroy();
+            this.myChart4.changeSize(this.$refs['chart4'].offsetWidth); // 清除
+            this.myChart4.destroy();
             this.renderChart1();
             this.renderChart2();
             this.renderChart3();
+            this.renderChart4();
+
         })
     });
     
@@ -287,6 +306,7 @@ export default {
         await this.renderChart1();
         await this.renderChart2();
         await this.renderChart3();
+        await this.renderChart4();
     })
   },
   methods:{
@@ -448,6 +468,56 @@ export default {
             .adjust('stack')
         this.myChart3.render();
     },
+    renderChart4 () {
+        this.myChart4 = new F2.Chart({
+            id: 'myChart4',
+            pixelRatio: window.devicePixelRatio,
+            plugins: [PieLabel,Legend]
+        });
+        this.myChart4.source(this.set4);
+        this.myChart4.coord('polar', {
+            transposed: true,
+            radius: 0.9,
+        });
+        this.myChart4.axis(false);
+        this.myChart4.tooltip(false);
+        this.myChart4.legend('title', {
+            position: 'bottom'
+        })
+        this.myChart4.guide()
+        .html({
+            position: [ '50%', '50%' ],
+            html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
+        });
+        
+        this.myChart4.pieLabel({
+            sidePadding: 30,
+            activeShape: true,
+            label1: function label1(data) {
+                return {
+                text: data.value,
+                fill: '#343434',
+                fontWeight: 'bold'
+                };
+            },
+            label2: function label2(data) {
+                return {
+                text: data.title,
+                fill: '#999'
+                };
+            },
+            onClick: function onClick(ev) {
+                const data = ev.data;
+                if (data) {
+                }
+            }
+        });
+        this.myChart4.interval()
+            .position('const*value')
+            .color('title', [ '#19be6b', '#ff9900','#2d8cf0' ])
+            .adjust('stack')
+        this.myChart4.render();
+    },
     async getData(){
         let res = await this.request('getStatisticalDetails',{
             data:[
@@ -499,9 +569,27 @@ export default {
                     const: 'const'
                 }
             ];
+            this.set4 = [
+                {
+                    title:'正常体温',
+                    value:res.set4[0].iNormalCount,
+                    const: 'const'
+                },
+                {
+                    title:'低烧',
+                    value:res.set4[0].iLowCount,
+                    const: 'const'
+                },
+                {
+                    title:'发烧',
+                    value:res.set4[0].iHighCount,
+                    const: 'const'
+                }
+            ];
             this.set1 = this.set1.filter(x=>x.value > 0);
             this.set2 = this.set2.filter(x=>x.value > 0);
             this.set3 = this.set3.filter(x=>x.value > 0);
+            this.set4 = this.set4.filter(x=>x.value > 0);
         }
     },
     async getList(){