zx

src/components/index.js

@@ -7,6 +7,7 @@
  * @FilePath: /data-show/src/components/index.js
  */
 import vLabelDiv from "@/components/v-labelDiv";
+import vLabelDivLight from "@/components/v-labelDivLight";
 import vModal from "@/components/v-modal";
 import vTable from "@/components/v-table";
 import vTabGroup from "@/components/v-tab-group";
@@ -27,6 +28,7 @@ export default {
         Vue.mixin({
             components: {
                 vLabelDiv,
+                vLabelDivLight,
                 vModal,
                 vTable,
                 vTabGroup,

src/components/v-labelDivLight/index.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:01:05
+ * @LastEditTime: 2021-11-03 12:01:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-labelDiv/index.vue
+-->
+<template>
+    <div class="v-label-container" ref="vlc" :style="eStyle">
+        <span v-if="showBack==true" ref="titleRef" :style="{color: titleColor}" @click="handlerClick">
+            <a-icon class="v-label-icon" type="import" @click="goBack" /><span style="margin-left: 14px">{{title}}</span>
+        </span>
+        <span v-else ref="titleRef" :style="{color: titleColor}" @click="handlerClick">
+            {{title}}
+        </span>
+        <div class="gx" v-if="showLine"></div>
+        <div class="v-l-right">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-label-div",
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        titleColor: {
+            type: String,
+            default: '#000'
+        },
+        showLine: {
+            type: Boolean,
+            default: true
+        },
+        eStyle: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        showBack: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        handlerClick() {
+            this.$emit('click')
+        },
+        goBack() {
+            this.$router.go(-1)
+        }
+    }
+  
+}
+</script>
+
+<style lang="less" scoped>
+.v-label-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 48px;
+    padding-left: 16px;
+    padding-right: 16px;
+    justify-content: space-between;
+    align-items: center;
+    background: #FFF;
+    border-bottom: 2px solid #0F2A4D;
+    span {
+         color: #fff;
+         font-size: 16px;
+         font-weight: 400;
+         cursor: pointer;
+    }
+    .gx {
+        position: absolute;
+        width: 48px;
+        height: 4px;
+        background: linear-gradient(270deg, #45B5F4 0%, #0A1E38 100%);
+        left: 0px;
+        bottom: 0px;
+        border-top-right-radius: 10px;
+    }
+    .v-l-right {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+    .v-label-icon {
+        color: #45B5F4;
+        font-size: 24px;
+    }
+}
+</style>

src/lycomponents/iSaleModelChoose/index.vue

@@ -35,8 +35,11 @@
                     <div class="sb-dd-right">
                        <vue-scroll>
                            <div class="sb-bd" v-loading="load">
-                               <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">{{item.name}}</div>    
+                               <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
-                           </div>
+                                   <div v-if="item.name.length > 12" style="font-size: 15px">{{item.name}}</div>
+                                   <div v-else>{{item.name}}</div>
+                                </div> 
+                            </div>
                        </vue-scroll> 
                     </div>
                 </div>

src/lycomponents/iSwitchModel/index.vue

@@ -35,7 +35,10 @@
                     <div class="sb-dd-right">
                        <vue-scroll>
                            <div class="sb-bd" v-loading="load">
-                               <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">{{item.name}}</div>    
+                               <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
+                                   <div v-if="item.name.length > 12" style="font-size: 15px">{{item.name}}</div>
+                                   <div v-else>{{item.name}}</div>
+                                </div>    
                            </div>
                        </vue-scroll> 
                     </div>

src/mixins/index.js

@@ -127,10 +127,10 @@ export default {
                 }
             },
             computed: {
-                ...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison','getTComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus','getTcStatus'])
+                ...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison','getTComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus','getTcStatus','getIsLight'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison','setTComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus','setTcStatus']),
+                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison','setTComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus','setTcStatus','setIsLight']),
                 // 获取当前日期时间
                 getDatetime() {
                     let now = new Date();

src/store/actions.js

@@ -77,5 +77,8 @@ const actions = {
     setChangeSTime: ({commit}, log) => {
         commit('setChangeSTime', log) 
     },
+    setIsLight: ({commit}, log) => {
+        commit('setIsLight', log) 
+    },
 }
 export default actions

src/store/getters.js

@@ -77,6 +77,9 @@ const getters = {
     },
     getMenu(state) {
         return state.menu  
-    }
+    },
+    getIsLight(state) {
+        return state.isLight  
+    },
 }
 export default getters

src/store/mutations.js

@@ -123,7 +123,13 @@ const mutations = {
         // saveMenu(log);
         let str = JSON.stringify(log);
         LS.put('menu', str, 1/8);
-    } 
+    },
+    setIsLight: (state, log) => {
+        state.isLight = log;
+        // saveMenu(log);
+        let str = JSON.stringify(log);
+        LS.put('isLight', str, 1/8);
+    },
 }
 
 export default mutations;

src/store/state.js

@@ -31,5 +31,6 @@ const state = {
     tcStatus:LS.get('tcStatus') ? JSON.parse(LS.get('tcStatus')) : false,
     levelBtn:LS.get('levelBtn') ? JSON.parse(LS.get('levelBtn')) : [],
     menu: LS.get('menu') ? JSON.parse(LS.get('menu')) : [],
+    isLight: LS.get('isLight') || false, //浅色背景
 }
 export default state;

src/views/SaleRank/ChineseCarSale/zgCarSale/index.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="zg-outter" v-loading="load">
-        <v-label-div :title="time">
+        <v-label-div-light v-if="getIsLight" :title="time">
+            <v-btn @click="historySale">查看历史销量</v-btn>
+        </v-label-div-light>
+        <v-label-div v-else :title="time">
             <v-btn @click="historySale">查看历史销量</v-btn>
         </v-label-div>
-        <div class="zg-inner">
+        <div class="zg-inner" v-if="getIsLight" style="background: #FFF">
+            <v-echarts :opt="optLight"></v-echarts>
+        </div>
+        <div class="zg-inner" v-else>
             <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
@@ -12,6 +18,7 @@
 <script>
 import {getCheZhuCountTime} from "@/api/SaleRank"
 import createOpt from "./opt"
+import createOptLight from "./optLight"
 export default {
     name: 'zgCarSale',
     data() {
@@ -21,6 +28,7 @@ export default {
             },
             time: '',
             opt: {},
+            optLight: {},
             load: false
         }
     },
@@ -42,6 +50,7 @@ export default {
                     ds.push(ele.value)
                 })
                this.opt = createOpt(dx,ds);
+               this.optLight = createOptLight(dx,ds);
                this.load = false
             })
         },

src/views/SaleRank/ChineseCarSale/zgCarSale/optLight.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#000',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgb(65,117,203,0.9)", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#3373CC", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}

src/views/SaleRank/index.vue

@@ -2,30 +2,7 @@
   <div class="d-container" >
       <div class="sr-outter">
           <div class="sr-top">
-              <!-- <a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" :dropdownMatchSelectWidth="dd">
+              <a-button type="primary" style="margin-right: 16px" @click="changeLight">{{isLight}}</a-button>
-                  <div slot="dropdownRender" class="brand-list">
-                      <vue-scroll>
-                        <div class="brand-items" v-for="(item, index) in letters" :key="index">
-                            <div class="left-letter">{{item}}</div>
-                            <div class="right-letter">
-                                <template v-for="(it, id) in brandList[index]">
-                                    <span class="right" :key="id">
-                                        <a-button type="primary" @click="onBrand(it.brandname)" v-if="it.firstword == item">{{it.brandname}}</a-button>
-                                    </span>
-                                </template>
-                            </div>  
-                        </div>
-                      </vue-scroll>
-                  </div>
-              </a-select> -->
-              <!-- <a-cascader class="choose-brand"
-                expandTrigger="hover" 
-                :options="brandOption"
-                v-model="chosenBrand" 
-                placeholder="请选择品牌"
-                @click="brandDrawer" 
-                @change="handlerBrand(chosenBrand)">
-              </a-cascader> -->
               <a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" @dropdownVisibleChange="brandDrawer" :dropdownMatchSelectWidth="dd">
                   <div slot="dropdownRender"></div>
               </a-select>
@@ -144,7 +121,9 @@ export default {
             visible: false,
             bodyStyle: {
                 
-            }
+            },
+            //深色模式
+            isLight: '深色模式'
         };
     },
     created() {

src/views/SaleRank/tableEvent.js

@@ -131,6 +131,16 @@ export default {
             return;
         }
     },
+    //切换模式
+    changeLight() {
+        if(this.getIsLight) {
+            this.isLight = '深色模式'
+            this.setIsLight(false)
+        } else {
+            this.isLight = '浅色模式'
+            this.setIsLight(true)
+        };
+    },
     //左侧菜单栏
     handlerMenu(val) {
         this.window = val.key