cxw-010203

src/api/home/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-20 16:17:39
- * @LastEditTime: 2021-10-21 15:27:39
+ * @LastEditTime: 2021-10-21 17:32:22
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/home/index.js
@@ -37,7 +37,15 @@ export function getHomeCount0528(params) {
         params: obj
     })
 }
-
+// 首页_热销排行-选择框
+export function getCheZhuTime0528(params) {
+    let obj =  Object.assign({action: 'getCheZhuTime0528'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
 // 首页_热销排行
 export function getCheZhuBrandCount0528(params) {
     let obj =  Object.assign({action: 'getCheZhuBrandCount0528',sType: 'Home'}, params)
@@ -116,3 +124,23 @@ export function getHomeBrandSourceType0528(params) {
         params: obj
     })
 }
+
+// 首页_获取用户画像
+export function getSexOrAttestationOrRegionHome0528(params) {
+    let obj =  Object.assign({action: 'getSexOrAttestationOrRegionHome0528',sType: 'Home'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+
+// 首页_全网传播数量详情数据
+export function getHomeList0528(params) {
+    let obj =  Object.assign({action: 'getHomeList0528',sType: 'Home'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}

src/components/v-echars/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:12:07
- * @LastEditTime: 2021-10-13 17:28:06
+ * @LastEditTime: 2021-10-21 17:03:11
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edi
  * @FilePath: /data-show/src/components/v-echars/index.vue
@@ -33,6 +33,7 @@ export default {
                         } else {
                             this.myChart.setOption(val);
                         }
+                        this.roundDefaultSelect(this.myChart);
                         this.$emit('echarsUpdate', this.myChart)  
                     })  
                 }
@@ -46,10 +47,40 @@ export default {
         }
     },
     methods: {
+        // 画图
         drawFun(opt) {
             let eRef = this.$refs.myChart;
             this.myChart = echarts.init(eRef);
             this.myChart.setOption(opt);
+        },
+        // 针对圆特定图形加个默认被选择
+        roundDefaultSelect(myChart) {
+            if(myChart.getOption().series[0].type != 'pie') {
+                return;
+            }
+            let index = 0;
+            myChart.dispatchAction({
+                type: "highlight",
+                seriesIndex: 0,
+                dataIndex: 0,
+            });
+            myChart.on("mouseover", function (e) {
+                if (e.dataIndex != index) {
+                    myChart.dispatchAction({
+                        type: "downplay",
+                        seriesIndex: 0,
+                        dataIndex: index,
+                    });
+                }
+            });
+            myChart.on("mouseout", function (e) {
+                index = e.dataIndex;
+                myChart.dispatchAction({
+                    type: "highlight",
+                    seriesIndex: 0,
+                    dataIndex: e.dataIndex,
+                });
+            });
         }
     }
 }

src/components/v-label-ctx/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-09 09:19:06
- * @LastEditTime: 2021-10-12 14:59:47
+ * @LastEditTime: 2021-10-21 16:03:07
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-label-ctx/index.vue
@@ -33,7 +33,7 @@ export default {
       },
       contLabel: {
         type: String,
-        default: "销量"
+        default: "数量"
       },
       cont: {
           type: [String, Number],

src/lycomponents/iHeader/index.vue

@@ -94,7 +94,6 @@ export default {
            this.setCommTime({sTimeType: val});
            if(this.sTimeType != this.selVal) {
                this.setCommTime({sStartTime: "",sEndTime: ""});
-               console.log(this.getCommTime)
            }
         },
         // 获取当前日期时间

src/views/BrandComparison/brandTonalDistribution/roundata/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 13:41:17
- * @LastEditTime: 2021-10-15 14:37:24
+ * @LastEditTime: 2021-10-21 16:50:07
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@@ -50,7 +50,6 @@ export default {
                     });
                 }
             });
-
             myChart.on("mouseout", function (e) {
                 index = e.dataIndex;
                 myChart.dispatchAction({

src/views/Index/dynamicNumber/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 14:25:05
- * @LastEditTime: 2021-10-20 18:16:19
+ * @LastEditTime: 2021-10-21 17:54:25
  * @LastEditors: Please set LastEditors
  * @Description: 大数据统计gif
  * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
@@ -44,7 +44,7 @@
             </span>
             <span class="s2">新闻</span> 
         </div>
-        <div class="d3">
+        <div class="d3" @click="handlerAllData">
             <span class="s1">系统入库 数据总量</span>
             <span class="s2">
                 <countTo :startVal='0' :endVal='form.total' :duration='3000'></countTo>
@@ -79,6 +79,7 @@ export default {
         this.getData()
     },
     methods: {
+        // 获取后台数据
         getData() {
             getHomeCount0528(this.getCommTime).then(res => {
                 let data = res.data;
@@ -103,6 +104,10 @@ export default {
                 }
                
             })
+        },
+        // 点击中间的全网数据显示
+        handlerAllData() {
+            this.$emit('allData')
         }
     }
 }
@@ -180,6 +185,7 @@ export default {
         display: flex;
         justify-content: flex-start;
         align-items: center;
+        cursor: pointer;
         .s1 {
             display: block;
             font-size: 18px;

src/views/Index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 09:17:42
- * @LastEditTime: 2021-10-13 14:51:05
+ * @LastEditTime: 2021-10-21 17:55:54
  * @LastEditors: Please set LastEditors
  * @Description: 行业洞察
  * @FilePath: /data-show/src/views/Index/index.vue
@@ -16,7 +16,7 @@
       </div>
       <div class="d2">
         <div class="d2-top">
-          <dynamic-number></dynamic-number>
+          <dynamic-number @allData="handlerAllData"></dynamic-number>
         </div>
         <div class="d2-bottom">
           <barometer></barometer>
@@ -53,6 +53,7 @@ import barometer from "./barometer";
 import tailInsight from "./tailInsight";
 import hotDiscussionGraph from "./hotDiscussionGraph";
 import dynamicNumber from "./dynamicNumber";
+import {getHomeList0528} from "@/api/home";
 export default {
   name: "index",
   components: {
@@ -94,31 +95,27 @@ export default {
           key: "laiyuan",
         },
       ],
-      tbData: [
-          {
-          key: "1",
-          name: "John Brown",
-          age: 32,
-          address: "New York No. 1 Lake Park",
-          tags: ["nice", "developer"],
-        },
-        {
-          key: "2",
-          name: "Jim Green",
-          age: 42,
-          address: "London No. 1 Lake Park",
-          tags: ["loser"],
+      tbData: [],
+      form: {
+        RefreshTime: ""
+      }
+    };
   },
-        {
-          key: "3",
-          name: "Joe Black",
-          age: 32,
-          address: "Sidney No. 1 Lake Park",
-          tags: ["cool", "teacher"],
+  created() {
+    
   },
-      ]
-    };
+  methods: {
+    handlerAllData() {
+      this.modalObj.visible = true;
     },
+    getTableList() {
+      let obj = Object.assign({}, this.getCommTime, this.form)
+      console.log(obj)
+      getHomeList0528(obj).then(res => {
+        console.log(res)
+      })
+    }
+  }
 };
 </script>
 

src/views/Index/salesRank/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-08 18:58:00
- * @LastEditTime: 2021-10-20 18:52:14
+ * @LastEditTime: 2021-10-21 16:08:27
  * @LastEditors: Please set LastEditors
  * @Description: 热销排行
  * @FilePath: /data-show/src/views/Index/salesRank/index.vue
@@ -11,58 +11,84 @@
         <v-label-div title="热销排行">
             <div>
                 <v-tab-group :btns="['品牌', '车型']" @change="handlerTabChange"></v-tab-group>
-                <a-select v-model="form.sTimeType" style="width: 80px;margin-left: 16px">
-                    <a-select-option v-for="item in selArr" :key="item.key" :value="item.key"> {{item.value}} </a-select-option>
+                <a-select v-model="selVal" style="width: 100px;margin-left: 16px" @change="handlerSelect">
+                    <a-select-option v-for="item in selArr" :key="item.key" :value="item.key"> {{item.key}} </a-select-option>
                 </a-select>
             </div>
         </v-label-div>
         <div class="sr-bd">
             <v-echarts :opt="opt"></v-echarts>
-            <v-pagination :style="{position: 'absolute', right: '2px', bottom: '11px'}"></v-pagination>
+            <v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '11px'}" @change="handlerPage"></v-pagination>
         </div>
     </div>
 </template>
 
 <script>
 import createOpt from "./opt";
-import {getOneTime} from "@/api/comm"
-import {getCheZhuBrandCount0528} from "@/api/home"
+import {getCheZhuBrandCount0528, getCheZhuTime0528} from "@/api/home"
 export default {
     name: "sales-rank",
     data() {
         return {
+            selVal: "",
             form: {
                 sQueryType: 1,
-                sTimeType: 34,
-                sType: 'Home'
+                sTimeType: 4,
+                sStartTime: "",
+                sEndTime: ""
             },
             selArr: [],
-            opt: createOpt(
-                ["奥迪", "宝马", "奔驰", "吉利", "江淮"],
-                [120, 200, 150, 80, 70]
-            ),
+            pdata: [],
+            opt:{},
         };
     },
     created() {
       this.getSelect();
-      this.getData()
     },
     methods: {
+        // 选择车型 
         handlerTabChange(n) {
-          this.form.sQueryType = n === 0 ? 1 : 2
+          this.form.sQueryType = n + 1;
+          this.getData();
+        },
+        // 选择时间
+        handlerSelect(key) {
+          let n = this.selArr.findIndex(ele => {
+            return ele.key === key
+          })
+          let obj = this.selArr[n];
+          this.form.sStartTime = obj.starttime;
+          this.form.sEndTime = obj.endtime;
+          this.getData();
         },
         // 获取选择时间的数据
         getSelect() {
-          getOneTime().then(res => {
+          getCheZhuTime0528().then(res => {
             this.selArr = res.data
+            this.selVal = this.selArr[0].key;
+            this.form.sStartTime = this.selArr[0].starttime;
+            this.form.sEndTime = this.selArr[0].endtime;
+            this.getData();
           })
         },
         // 获取数据
         getData() {
-          let obj = Object.assign({}, this.getCommTime, this.form)
-          getCheZhuBrandCount0528(obj).then(res => {
-            console.log(res)
+          getCheZhuBrandCount0528(this.form).then(res => {
+            let data = res.data;
+            this.pdata = data;
+          })
+        },
+        // 获取分页的数据
+        handlerPage(arr = []) {
+          let dx = [];
+          let ds = [];
+          arr.forEach(ele => {
+            let key = ele.key;
+            let value = ele.value;
+            dx.push(key);
+            ds.push(value);
           })
+         this.opt = createOpt(dx, ds)
         }
     },
 };

src/views/Index/salesRank/opt.js

@@ -2,7 +2,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 19:24:08
- * @LastEditTime: 2021-10-09 16:45:39
+ * @LastEditTime: 2021-10-21 15:55:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/salesRank/opt.js
@@ -11,10 +11,10 @@ import * as echarts from "echarts";
 export default function createOpt(dx, ds) {
     return {
         grid: {
-            top: "16px",
-            left: "16px",
-            right: "28px",
-            bottom: "16px",
+            top: 16,
+            left: 16,
+            right: 28,
+            bottom: 16,
             containLabel: true,
         },
         tooltip: {
@@ -38,6 +38,9 @@ export default function createOpt(dx, ds) {
         },
         xAxis: {
             type: "category",
+            axisLabel :{  
+                interval:0   
+            }, 
             axisTick: {
                 show: false,
             },

src/views/Index/userPortrait/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 09:04:01
- * @LastEditTime: 2021-10-12 10:44:39
+ * @LastEditTime: 2021-10-21 18:03:22
  * @LastEditors: Please set LastEditors
  * @Description: 用户画像
  * @FilePath: /data-show/src/views/Index/userPortrait/index.vue
@@ -9,16 +9,14 @@
 <template>
     <div class="u-p-outter">
         <v-label-div title="用户画像">
-            <v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
+            <v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
         </v-label-div>
         <div class="u-p-bd">
             <div class="u-p-char">
                 <v-echarts :opt="opt" ></v-echarts>
             </div>
             <div class="u-p-bd-1">
-                <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC"></v-label-ctx>
-                <v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12"></v-label-ctx>
-                <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93"></v-label-ctx>
+                <v-label-ctx :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" v-for="(item,index) in labelData" :key="index"></v-label-ctx>
             </div>
         </div>
     </div>
@@ -26,13 +24,70 @@
 
 <script>
 import createOpt from "./opt"
+import {getSexOrAttestationOrRegionHome0528} from "@/api/home"
 export default {
     name: "user-portrait",
     data() {
         return {
-             opt: createOpt()  
+            attestation: [], // 认证
+            sex: [], // 性别
+            region: [], // 地区
+            opt: {},
+            labelData: [],
+            totalData: 0,
+            colors: ['#54BF93', '#3373CC', '#CC9D12','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
         }
        
+    },
+    created() {
+        this.getData()
+    },
+    methods: {
+        // 切换数据
+        handlerTab(n) {
+            if(n === 0) {
+                this.labelData = this.sex;
+                let total = 0;
+                this.sex.forEach(ele => {
+                    total+=ele.value;
+                })
+                this.totalData = total;
+                this.opt = createOpt(this.sex, ['#54BF93', '#3373CC', '#CC9D12']);
+            } else if(n === 1) {
+                this.labelData = this.attestation;
+                let total = 0;
+                this.attestation.forEach(ele => {
+                    total+=ele.value;
+                })
+                this.totalData = total;
+                this.opt = createOpt(this.attestation, this.colors);
+            } else {
+                this.labelData = this.region;
+                let total = 0;
+                this.region.forEach(ele => {
+                    total+=ele.value;
+                })
+                this.totalData = total;
+                this.opt = createOpt(this.region, this.colors);
+            }
+        },
+        // 获取远程数据
+        getData() {
+           getSexOrAttestationOrRegionHome0528(this.getCommTime).then(res => {
+               let data = res.data;
+               this.attestation = data.attestation;
+               this.sex = data.sex;
+               this.region = data.region;
+               let total = 0;
+                this.sex.forEach(ele => {
+                    total+=ele.value;
+                })
+                this.totalData = total;
+               this.labelData = this.sex;
+               this.opt = createOpt(this.sex, ['#54BF93', '#3373CC', '#CC9D12']);
+           })
+        },
+        
     }
 }
 </script>

src/views/Index/userPortrait/opt.js

@@ -1,13 +1,37 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 09:49:50
- * @LastEditTime: 2021-10-09 10:38:26
+ * @LastEditTime: 2021-10-21 17:33:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/userPortrait/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value,
+      name: ele.key,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //给第一个设置0，第四个设置1，就是垂直渐变
+          offset: 0,
+          color: 'black'
+        }, {
+          offset: 1,
+          color: colors[index]
+        }])
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+export default function createOpt(ds = [], color = []) {
+  const data = createData(ds, color);
   return {
     series: [
       {
@@ -17,49 +41,24 @@ export default function createOpt() {
         avoidLabelOverlap: false,
         label: {
           show: false,
-                position: 'center'
+          position: 'center',
+          lineHeight: 30
         },
         emphasis: {
           label: {
             show: true,
-                  fontSize: '40',
+            fontSize: '20',
             color: "#ffff",
-                  fontWeight: 'bold'
+            fontWeight: 'bold',
+            formatter: function (p) {
+              return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+            }
           }
         },
         labelLine: {
           show: false
         },
-              data: [
-                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-              ],
-
+        data: data
       },
       {
         name: 'Access From1',
@@ -74,36 +73,7 @@ export default function createOpt() {
           show: false
         },
         center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                ],
-  
+        data: data
       }
     ]
   }