添加chart图

code/package.json

@@ -14,6 +14,10 @@
     "dingtalk-jsapi": "^2.13.53",
     "echarts": "^4.6.0",
     "element-ui": "^2.15.6",
+    "js-md5": "^0.7.3",
+    "qs": "^6.10.1",
+    "sass-loader": "^12.2.0",
+    "vant": "^2.12.30",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"

code/src/api/base.js

@@ -0,0 +1,10 @@
+/**
+ * 接口域名的管理
+ */
+const base = {
+   url: 'https://kiq.xazhima.com/api/api.php',
+   secret: "AirQK_weichat_app_zhima",
+  //online: 'http://m.boniu.xazhima.com/api'
+}
+
+export default base;

code/src/api/big_screen.js

@@ -0,0 +1,41 @@
+/**
+ * bigScreen模块接口列表
+ */
+
+import base from './base'; // 导入接口域名列表
+import axios from '@/utils/http'; // 导入http中创建的axios实例
+import qs from 'qs'; // 根据需求是否导入qs模块
+import md5 from 'js-md5';
+let date = new Date();
+let timeObj = {
+  nowTimeStamp:Math.round(new Date().getTime()/1000).toString(),
+  year:date.getFullYear().toString(),
+  month:date.getMonth() < 10 ? '0' + (date.getMonth() + 1) : date.getMonth().toString(),
+  day:date.getDate().toString(),
+};
+let nowTime = timeObj.year + timeObj.month + timeObj.day;
+const totalApi = {
+  searchApi(searchVal,methodType,sourceType,actionType) {
+    let md5Sign = md5("method=" + methodType + "&timestamp=" + timeObj.nowTimeStamp + "&secret=" +base.secret);
+    let url = base.url +"?method="+ methodType + "&source=" + sourceType + "&action=" + actionType + "&timestamp=" + timeObj.nowTimeStamp +"&sign=" + md5Sign;
+    let data = {
+      ss_name:searchVal
+    };
+    return axios.post(url,qs.stringify(data));
+  },
+  run_chart (time) {
+    let data = {
+      method:'run_chart',
+      date:nowTime,
+      timestamp:timeObj.nowTimeStamp,
+      timeType:time || 'all', //all,last,year,month
+      sign:md5('method='+'run_chart' +'&timestamp='+timeObj.nowTimeStamp)
+    };
+    return axios.get(`${base.url}`, {
+      params: data
+    });
+  },
+  // 其他接口…………
+};
+
+export default totalApi

code/src/api/index.js

@@ -0,0 +1,12 @@
+/**
+ * api接口的统一出口
+ */
+// 文章模块接口
+import totalApi from './big_screen';
+// 其他模块的接口……
+
+// 导出接口
+export default {
+  totalApi,
+  // ……
+}

code/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

code/src/components/PieChart.vue

@@ -0,0 +1,122 @@
+// 百分比环比图
+<template>
+    <div :class="className" :style="{ height: height, width: width}"> </div>
+</template>
+
+<script>
+    import * as echarts from "echarts";
+    require("echarts/theme/macarons"); // echarts theme
+
+    export default {
+        props: {
+            className: {
+                type: String,
+                default: "chart",
+            },
+            width: {
+                type: String,
+                default: "100%",
+            },
+            height: {
+                type: String,
+                default: "100%",
+            },
+            list: {
+                type: Array,
+                default: () => [],
+            },
+            text: {
+                type: Array,
+                default: () => [],
+            },
+        },
+        data() {
+            return {
+                chart: null,
+            };
+        },
+        watch: {
+            list: {
+                handler: function() {
+                    this.initChart();
+                },
+                deep: true,
+            },
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.initChart();
+            });
+        },
+        beforeDestroy() {
+            if (!this.chart) {
+                return;
+            }
+            this.chart.dispose();
+            this.chart = null;
+        },
+        methods: {
+            initChart() {
+                let t = this;
+                this.chart = echarts.init(this.$el, "macarons");
+                let  option = {
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        // top: '5%',
+                        icon: "circle",
+                        left: 'center',
+                        bottom:'bottom'
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: [0, '50%'],
+                            center: ['50%', '42%'],
+                            avoidLabelOverlap: false,
+                            emphasis: {
+                                label: {
+                                    show: true,
+                                    fontSize: '30',
+                                    fontWeight: 'bold'
+                                }
+                            },
+                            label: {
+                                normal: {
+                                    formatter: '{b|{b}}\n{a|{d}%}',
+                                    borderWidth: 0,
+                                    padding: [10, -10],
+                                    rich: {
+                                        a: {
+                                            color: '#333',
+                                            fontSize: 13,
+                                            lineHeight: 20
+                                        },
+                                        b: {
+                                            fontSize: 13,
+                                            lineHeight: 20,
+                                            color: '#333'
+                                        }
+                                    }
+                                }
+                            },
+                            labelLine: {
+                                normal: {
+                                    length: 20,
+                                    length2:50,
+                                    // smooth:true,
+                                    // lineStyle: {
+                                    //     color: '#333'
+                                    // }
+                                }
+                            },
+                            data: this.list
+                        }
+                    ]
+                };
+                this.chart.setOption(option);
+            },
+        },
+    };
+</script>

code/src/components/annularChart.vue

@@ -0,0 +1,122 @@
+// 百分比环比图
+<template>
+    <div :class="className" :style="{ height: height, width: width}"> </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+
+export default {
+    props: {
+        className: {
+            type: String,
+            default: "chart",
+        },
+        width: {
+            type: String,
+            default: "100%",
+        },
+        height: {
+            type: String,
+            default: "100%",
+        },
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        text: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            chart: null,
+        };
+    },
+    watch: {
+        list: {
+            handler: function() {
+                this.initChart();
+            },
+            deep: true,
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart();
+        });
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return;
+        }
+        this.chart.dispose();
+        this.chart = null;
+    },
+    methods: {
+        initChart() {
+            let t = this;
+            this.chart = echarts.init(this.$el, "macarons");
+            let  option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    // top: '5%',
+                    icon: "circle",
+                    left: 'center',
+                    bottom:'bottom'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '25%'],
+                        center: ['50%', '40%'],
+                        avoidLabelOverlap: false,
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: '40',
+                                fontWeight: 'bold'
+                            }
+                        },
+                        label: {
+                            normal: {
+                                formatter: '{b|{b}}\n{a|{d}%}',
+                                borderWidth: 0,
+                                padding: [10, -10],
+                                rich: {
+                                    a: {
+                                        color: '#333',
+                                        fontSize: 13,
+                                        lineHeight: 20
+                                    },
+                                    b: {
+                                        fontSize: 13,
+                                        lineHeight: 20,
+                                        color: '#333'
+                                    }
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                length: 50,
+                                length2: 50,
+                                // smooth:true,
+                                // lineStyle: {
+                                //     color: '#333'
+                                // }
+                            }
+                        },
+                        data: this.list
+                    }
+                ]
+            };
+            this.chart.setOption(option);
+        },
+    },
+};
+</script>

code/src/components/singleBarChart.vue

@@ -0,0 +1,142 @@
+<template>
+  <div :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    chartDataList: {
+      type: Array,
+      default:[]
+    },
+    barColor:{
+      type:String,
+      default:'#3085FF'
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      maxYCount:'',
+      xSeries:[],
+      dataList:[]
+    };
+  },
+  mounted() {
+    this.xSeries = this.chartDataList.map(v => v.name);
+    this.dataList = this.chartDataList.map(v => v);
+    this.$nextTick(() => {
+      this.initChart();
+    });
+        // 缩放自如
+    window.addEventListener("resize", () => {
+        this.chart.resize()
+    }, false);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.setOption({
+          title: {
+              text:'',
+          },
+          grid: {
+                top: '10%',
+                // left: '3%',
+                // right: '1%',
+                bottom: '5%',
+                containLabel: true
+            },
+
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:"#1D3268",
+        },
+          xAxis: [
+              {
+                  data: this.xSeries,
+                  type: 'category',
+                 //  axisTick: {
+                 //      show: false,
+                 //  },
+                 //  axisLine: {
+                 //      show: false,
+                 //  },
+                 //  splitLine:{
+                 //      show:false
+                 //  },
+                  axisLabel: {
+                    textStyle: {
+                      color: '#555',
+                     },
+                    interval: 0,
+                    rotate: 30,
+                 },
+
+              },
+          ],
+          yAxis: [
+              {
+                  type: 'value',
+                //   min: 0,
+                //   max: this.maxYCount,  //设置左侧最大值
+                  axisLine: {
+                      show: false,
+                  },
+                  axisTick: {
+                      show: false,
+                  },
+                  splitLine:{
+                      show:true,
+                      lineStyle:{
+                       color: ['#ccc'],
+                       // width: .3,
+                       type: 'dotted'
+                    }
+                  },
+                  splitArea : {show : false},//去除网格区域
+                  axisLabel: {
+                    textStyle: {
+                      color: '#555',
+                     }
+                 }
+               },
+          ],
+          series: [
+              {
+                  type: 'bar',
+                  data: this.dataList,
+                  itemStyle: {
+                      color: this.barColor,
+                  },
+                  barWidth: '15px',
+              },
+          ],
+});
+    },
+  },
+};
+</script>
+

code/src/main.js

@@ -1,18 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import api  from './api'
 import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import dd from '@/components/util/dingding.js'
+import * as eCharts from 'echarts';
+Vue.prototype.$echarts = eCharts;
+Vue.prototype.$api = api;
 Vue.use(ElementUI);
 Vue.config.productionTip = false
 Vue.prototype.dd = dd
 
-//引入echart
-import echarts from 'echarts'
-Vue.prototype.$echarts = echarts
-
 new Vue({
   router,
   store,

code/src/utils/http.js

@@ -0,0 +1,104 @@
+/**
+ * axios封装
+ * 请求拦截、响应拦截、错误统一处理
+ */
+import axios from 'axios';
+// import router from '../router';
+import { Toast } from 'vant';
+
+/**
+ * 提示函数
+ * 禁止点击蒙层、显示一秒后关闭
+ */
+const tip = msg => {
+  Toast({
+    message: msg,
+    duration: 1000,
+    forbidClick: true
+  });
+}
+
+/**
+ * 跳转登录页
+ * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
+ */
+// const toLogin = () => {
+//   router.replace({
+//     path: '/login',
+//     query: {
+//       redirect: router.currentRoute.fullPath
+//     }
+//   });
+// }
+
+/**
+ * 请求失败后的错误统一处理
+ * @param {Number} status 请求失败的状态码
+ */
+const errorHandle = (status,) => {
+  // 状态码判断
+  switch (status) {
+    // 401: 未登录状态，跳转登录页
+    case 401:
+    //  toLogin();
+      tip('未登录状态，跳转登录页');
+      break;
+    // 403 token过期
+    // 清除token并跳转登录页
+    case 403:
+      tip('登录过期，请重新登录');
+      break;
+    // 404请求不存在
+    case 404:
+      tip('请求的资源不存在');
+      break;
+    default:
+    //  console.log(other);
+  }}
+
+// 创建axios实例
+var instance = axios.create({timeout: 1000 * 99});
+// instance.defaults.baseURL = '/api';
+// 设置post请求头
+instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+/**
+ * 请求拦截器
+ * 每次请求前，如果存在token则在请求头中携带token
+ */
+// instance.interceptors.request.use(
+//   config => {
+//     // 登录流程控制中，根据本地是否存在token判断用户的登录情况
+//     // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
+//     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
+//     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
+//     const token = store.state.token;
+//     token && (config.headers.Authorization = token);
+//     return config;
+//   },
+//   error => Promise.error(error))
+
+// 响应拦截器
+instance.interceptors.response.use(
+  // 请求成功
+  res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
+  // 请求失败
+  error => {
+    const { response } = error;
+    if (response) {
+      // 请求已发出，但是不在2xx的范围
+      errorHandle(response.status, response.data.message);
+      return Promise.reject(response);
+    } else {
+      // 处理断网的情况
+      // eg:请求超时或断网时，更新state的network状态
+      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
+      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
+      if (!window.navigator.onLine) {
+       // store.commit('changeNetwork', false);
+      } else {
+        return Promise.reject(error);
+      }
+    }
+  });
+
+export default instance;

code/src/views/company/company.vue

@@ -1,5 +1,155 @@
 <template>
-  <div class="about">
-    <h1>This is company page</h1>
+  <div class="company">
+    <!-- 搜索框 -->
+    <div class="input-box">
+      <img src="../../assets/search.png" alt="search" />
+      <input type="text"  placeholder="请输入企业名/人名"  v-model="searchVal"/>
+      <button>确定</button>
+    </div>
+
+    <div class="chart-box">
+       <div class="chart-title">按园区统计</div>
+       <annular :list="annularList"></annular>
+    </div>
+
+    <div class="chart-box"  style="margin-top: 40px">
+      <div class="chart-title">按行业统计</div>
+      <singleBar :chartDataList="annularList"></singleBar>
+    </div>
+
+    <div class="chart-box">
+      <div class="chart-title">按纳税金额统计</div>
+      <pie :list="annularList"></pie>
+    </div>
+
   </div>
 </template>
+
+<script>
+  import annular from '../../components/annularChart'
+  import singleBar from '../../components/singleBarChart'
+  import pie from '../../components/PieChart'
+  export default {
+//import引入的组件需要注入到对象中才能使用
+    components: {
+      annular,
+      singleBar,
+      pie
+    },
+    data() {
+//这里存放数据
+      return {
+        searchVal:'',
+        annularList:[
+          { value: 1048, name: '创新科技园' },
+          { value: 735, name: '科技园' },
+          { value: 580, name: '空港园区' },
+          { value: 484, name: '底张工业园' },
+          { value: 300, name: '科技创业园' },
+          { value: 623, name: '其他' }
+        ],
+
+      };
+    },
+//监听属性 类似于data概念
+    computed: {},
+//监控data中的数据变化
+    watch: {},
+//方法集合
+    methods: {
+      tabShow:function(flag){
+        this.tabFlag = flag;
+      },
+      selectClick(event) {
+        this.activeName = event.target.value;
+        switch (this.activeName) {
+          case '当月':
+            //this.runChartHttp('month');
+            break;
+          case '当年':
+            //this.runChartHttp('year');
+            break;
+          case '去年':
+            //this.runChartHttp('last');
+            break;
+          case '全部':
+           // this.runChartHttp('all');
+            break;
+        }
+      },
+      topSearch: function () {
+        let that = this;
+        that.$api.totalApi.searchApi(that.searchVal,'common','company','list').then(res=>{
+          console.log(res)
+        })
+      },
+      pageInit:function () {
+        //this.bullStockHttp();
+      },
+    },
+//生命周期 - 创建完成（可以访问当前this实例）
+    created() {
+
+    },
+//生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {
+      this.pageInit();
+      // setTimeout(()=>{
+      //   window.location.reload()
+      // },1800000)
+    },
+  }
+
+
+</script>
+<style>
+  .company {
+    width: 100%;
+    height: 100%;
+  }
+  .input-box {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: start;
+   }
+  .input-box img {
+      position: absolute;
+      left: 36px;
+      width: 20px;
+      height:20px;
+    }
+  .input-box input {
+      background-color: #ffffff;
+      width: 65%;
+      height: 60%;
+      border-radius: 25px;
+      padding: 2px;
+      font-size: 14px;
+      padding-left: 50px;
+      border: 1px solid #ccc;
+      margin-right: 10px;
+      margin-left: 15px;
+    }
+  .input-box button {
+      height: 30px;
+      width: 55px;
+      color: #fff;
+      border: none;
+      background-color: cornflowerblue;
+      border-radius: 5px;
+  }
+
+  .chart-title {
+    text-align: left;
+    padding-left: 20px;
+  }
+  .chart-box {
+     width: 100%;
+     height:40%;
+     margin-top: 20px;
+  }
+
+</style>