添加接口数据

echarts-screen/src/components/PieCon.vue

@@ -18,26 +18,44 @@ export default {
   name: "PieCon",
   data() {
     return {
-
+        asymptomaticRelative: null,
+        overseasInputRelative: ''
     }
   },
   mounted() {
     this.getEchartLeft2();
   },
   methods: {
-    getEchartLeft2() {
-      let myChart = echarts.init(document.getElementById('chart_left2'));
-      //数据
-      let scaleData = [{
-        name: '本地新增',
-        value: 9
-      },{
-        name: '境外输入',
-        value: 12
-      }];
-      let rich = {
-        white: {
-          color: '#ddd',
+      getEchartLeft2() {
+          let myChart = echarts.init(document.getElementById('chart_left2'));
+          //数据
+
+          axios.get('https://www.maomin.club/fy/get', {
+              dataType: "json"
+          }).then(res => {
+              let ConData = res.data
+              let made = JSON.parse(ConData)
+              let madeData = made.component
+              let data = madeData[0]
+              console.log(data)
+
+              this.asymptomaticRelative = data.summaryDataIn.asymptomaticRelative
+              this.overseasInputRelative = data.summaryDataIn.overseasInputRelative
+              console.log(this.asymptomaticRelative)
+              console.log(this.overseasInputRelative)
+          }).catch(err => {
+              console.log(err)
+          })
+          let scaleData = [{
+              name: '本地新增',
+              value: data.summaryDataIn.asymptomaticRelative
+          }, {
+              name: '境外输入',
+              value: 9
+          }];
+          let rich = {
+              white: {
+                  color: '#ddd',
           align: 'center',
           padding: [3, 0]
         }

echarts-screen/src/components/RoseCon.vue

@@ -12,12 +12,12 @@
 </template>
 
 <script>
-  import screenfull from 'screenfull'
+import screenfull from 'screenfull'
 export default {
   name: "RoseCon",
   data() {
     return {
-      fullscreen: false
+      option: null
     }
   },
   mounted() {
@@ -28,9 +28,6 @@ export default {
     })
   },
   methods: {
-    reload() {
-      this.$router.go(0);
-    },
     getEchartRight2() {
       let myChart = echarts.init(document.getElementById('chart_right2'));
       let option = {

echarts-screen/src/components/index.js

@@ -5,6 +5,8 @@ import PieCon from './PieCon'
 import CityRank from "./CityRank";
 import wordCloud from "./wordCloud";
 import bgAnimation from './bgAnimation' // 登录界面背景图动画
+import test from "./test";
+import waterPolo from './waterPolo'
 
 const components = {
     RoseCon,
@@ -14,6 +16,8 @@ const components = {
     CityRank,
     wordCloud,
     bgAnimation,
+    test,
+    waterPolo
 };
 
 const install = (Vue = {}) => {

echarts-screen/src/views/Brand.vue

@@ -6,10 +6,12 @@
                     <img :src="imgSrc">
                     <span class="tem">{{ weatcherData.tem }}°C</span>
                     <span class="wea">{{ weatcherData.wea }}</span>
+                    <!--                    测试，获取疫情接口中的更新时间-->
+                    <span>{{ConData.page}}</span>
                 </div>
                 <h2>疫情数据分析</h2>
               <div class="showTime">
-                <span class="time">数据更新至 {{ date }}</span>
+                  <span class="time">数据更新至 {{ConData.mapLastUpdatedTime}}</span>
               </div>
               <div class="showTime1">
                     <span class="date">
@@ -43,15 +45,15 @@
                         <div class="resume-hd">
                             <ul>
                                 <li>
-                                    <countTo :startVal='startVal' :endVal='1632' :duration='6000'
+                                    <countTo :startVal='startVal' :endVal='newConfirm' :duration='6000'
                                              separator=","></countTo>
                                 </li>
                                 <li>
-                                    <countTo :startVal='startVal' :endVal='95983' :duration='6000'
+                                    <countTo :startVal='startVal' :endVal='TotalConfirm' :duration='6000'
                                              separator=","></countTo>
                                 </li>
                                 <li>
-                                    <countTo :startVal='startVal' :endVal='89578' :duration='6000'
+                                    <countTo :startVal='startVal' :endVal='Cured' :duration='6000'
                                              separator=","></countTo>
                                 </li>
                             </ul>
@@ -80,7 +82,7 @@
                     </div>
                     <div class="panel">
                         <h2>现存确诊</h2>
-                        <RoseCon/>
+                        <waterPolo/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
@@ -115,16 +117,21 @@
                 imgSrc: '',
                 weatcherData: {},
                 startVal: 0,
+                ConData: {},
+                newConfirm: null,
+                TotalConfirm: null,
+                Cured: null
             }
         },
         computed: {},
         created() {
         },
         mounted() {
-            // this.getWeather();
-            // this.timer = setInterval(() => {
-            //     this.getWeather();
-            // }, 1000 * 60 * 60)
+            this.getWeather();
+            this.getConData()
+            this.timer = setInterval(() => {
+                this.getWeather();
+            }, 1000 * 60 * 60)
 
             this.nowTimes();
             this.getEchart();
@@ -156,38 +163,61 @@
             },
 
             // 第三方天气api接口
-            // getWeather() {
-            //     axios.get('https://www.tianqiapi.com/api/', {
-            //         params: {
-            //             appid: '26148275',
-            //             appsecret: '2id6H48Y',
-            //             version: 'v6'
-            //         }
-            //     }).then(res => {
-            //         if (res.data) {
-            //             if (res.data.wea_img == 'xue') {
-            //                 this.imgSrc = require('../assets/img/brand/xue.png');
-            //             } else if (res.data.wea_img == 'yin') {
-            //                 this.imgSrc = require('../assets/img/brand/yin.png');
-            //             } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
-            //                 this.imgSrc = require('../assets/img/brand/yu.png');
-            //             } else if (res.data.wea_img == 'yun') {
-            //                 this.imgSrc = require('../assets/img/brand/yun.png');
-            //             } else if (res.data.wea_img == 'wu') {
-            //                 this.imgSrc = require('../assets/img/brand/wu.png');
-            //             } else if (res.data.wea_img == 'shachen') {
-            //                 this.imgSrc = require('../assets/img/brand/shachen.png');
-            //             } else if (res.data.wea_img == 'lei') {
-            //                 this.imgSrc = require('../assets/img/brand/lei.png');
-            //             } else {
-            //                 this.imgSrc = require('../assets/img/brand/qing.png');
-            //             }
-            //             this.weatcherData = res.data;
-            //         }
-            //     }).catch(err => {
-            //         console.log(err)
-            //     })
-            // },
+            getWeather() {
+                axios.get('https://www.tianqiapi.com/api/', {
+                    params: {
+                        appid: '89325657',
+                        appsecret: 'jJ2yWJu6 ',
+                        version: 'v61'
+                    }
+                }).then(res => {
+                    if (res.data) {
+                        if (res.data.wea_img == 'xue') {
+                            this.imgSrc = require('../assets/img/brand/xue.png');
+                        } else if (res.data.wea_img == 'yin') {
+                            this.imgSrc = require('../assets/img/brand/yin.png');
+                        } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
+                            this.imgSrc = require('../assets/img/brand/yu.png');
+                        } else if (res.data.wea_img == 'yun') {
+                            this.imgSrc = require('../assets/img/brand/yun.png');
+                        } else if (res.data.wea_img == 'wu') {
+                            this.imgSrc = require('../assets/img/brand/wu.png');
+                        } else if (res.data.wea_img == 'shachen') {
+                            this.imgSrc = require('../assets/img/brand/shachen.png');
+                        } else if (res.data.wea_img == 'lei') {
+                            this.imgSrc = require('../assets/img/brand/lei.png');
+                        } else {
+                            this.imgSrc = require('../assets/img/brand/qing.png');
+                        }
+                        this.weatcherData = res.data;
+                        console.log(this.weatcherData)
+                    }
+                }).catch(err => {
+                    console.log(err)
+                })
+            },
+
+            //获取疫情数据接口
+            getConData() {
+                axios.get('https://www.maomin.club/fy/get', {
+                    dataType: "json"
+                }).then(res => {
+                    let ConData = res.data
+                    let made = JSON.parse(ConData)
+                    let madeData = made.component
+                    let data = madeData[0]
+                    console.log(data)
+
+                    this.newConfirm = Number(data.summaryDataIn.curConfirm)
+                    this.TotalConfirm = Number(data.summaryDataIn.confirmed)
+                    this.Cured = Number(data.summaryDataIn.cured)
+                    console.log('我是' + this.newConfirm)
+                    console.log(data.summaryDataIn.curConfirm)
+                    this.ConData = data
+                }).catch(err => {
+                    console.log(err)
+                })
+            },
 
             // 初始化地图数据
             getEchart() {
@@ -9933,17 +9963,17 @@
                 }
 
               .showTime {
-                position: absolute;
-                right: 4rem;
-                top: 0.8rem;
-                color: rgba(126, 240, 255, 0.7);
-                display: flex;
+                  position: absolute;
+                  right: 3rem;
+                  top: 0.8rem;
+                  color: rgba(126, 240, 255, 0.7);
+                  display: flex;
 
 
-                .time {
-                  font-size: .18rem;
-                  margin-right: .18rem;
-                }
+                  .time {
+                      font-size: .18rem;
+                      margin-right: .18rem;
+                  }
 
               }
 

echarts-screen/src/views/Login.vue

@@ -88,19 +88,30 @@ export default {
   created() {
   },
   mounted() {
-
+    this.getConData()
   },
   methods: {
-    login() {
-      //重定向路由
-      if (this.userName == 'zhuzhu' && this.userPwd == 'pigpig') {
-        this.$router.push({
-          path: '/Brand'
-        })
-      } else {
-        this.$Toast({
-          content: '请输入正确的用户名和密码',
-          type: 'error',
+      //获取疫情数据接口
+      getConData() {
+          axios.get('https://www.maomin.club/fy/get', {}).then(res => {
+              if (res.data) {
+                  this.ConData = res.data
+                  console.log(this.ConData)
+              }
+          }).catch(err => {
+              console.log(err)
+          })
+      },
+      login() {
+          //重定向路由
+          if (this.userName == 'zhuzhu' && this.userPwd == 'pigpig') {
+              this.$router.push({
+                  path: '/Brand'
+              })
+          } else {
+              this.$Toast({
+                  content: '请输入正确的用户名和密码',
+                  type: 'error',
           hasClose: true
         })
       }

echarts-screen/vue.config.js

@@ -1,14 +1,16 @@
 module.exports = {
-  publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/",
-  productionSourceMap: false,
-  lintOnSave: false,
-
-  configureWebpack: {
-    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
-    externals: {
-     'jquery' : '$',
-     'echarts': 'echarts',
-     'axios' : 'axios'
+    publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/",
+    productionSourceMap: false,
+    lintOnSave: false,
+    devServer: {
+        port: 3434,
+    },
+    configureWebpack: {
+        // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
+        externals: {
+            'jquery': '$',
+            'echarts': 'echarts',
+            'axios': 'axios'
+        }
     }
-  }
-};
+};