合并

commandCenter/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2251662_4rete72vz3.css">
-    <title>智慧社区管理平台</title>
+    <title>智慧园区管理平台</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   

commandCenter/src/components/common/Header.vue

@@ -3,7 +3,7 @@
         <div class="v-header-left">
             <div class="left-img inlineBlock"></div>
             <div class="system-title">
-                <div class="zh">智慧社区指挥调度中心</div>
+                <div class="zh">智慧园区指挥调度中心</div>
                 <div class="en">Smart Community Space Management System</div>
             </div>
             <div class="left-img rights inlineBlock"></div>
@@ -23,15 +23,16 @@
             <div class="right-imgs"></div>
             <div>
                 <span class="selectIocn"></span>
-                <el-select
-                    v-model="communityId"
-                    placeholder="所有社区"
+                <el-cascader
                     class="saveColumn-select"
-                    @change="$store.commit('setHomeCommunityAll', communityId)"
-                    clearable
-                >
-                    <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
-                </el-select>
+                    ref="multipleValue"
+                    :options="scOptions"
+                    :props="{ checkStrictly: true, label: 'name' }"
+                    collapse-tags
+                    :show-all-levels="false"
+                    @change="selectChange"
+                    v-model="communityValue"
+                ></el-cascader>
             </div>
 
             <div class="time">
@@ -85,21 +86,28 @@ export default {
                 week: '星期一',
                 date: '00:00:00'
             },
-            communityList: [],
-            communityId: ''
+            communityValue: [],
+            scOptions: []
         };
     },
     computed: {
-        ...mapState(['homeCommunityAll']),
+        ...mapState(['globalCommunity', 'thisArr']),
         menuList() {
             return this.$store.getters['getMenuList'] || [];
         }
     },
     watch: {
-        homeCommunityAll(val) {
-            if (!!val) {
-                this.communityId = val;
-            }
+        // globalCommunity: {
+        //     handler(newVal, oldVal) {
+        //         // this.communityValue = !!newVal.type ? [newVal.value[0]] : newVal;
+        //     },
+        //     deep: true
+        // },
+        thisArr: {
+            handler(newVal, oldVal) {
+                this.communityValue = this.$store.getters['getThisArr'];
+            },
+            deep: true
         }
     },
     methods: {
@@ -138,13 +146,62 @@ export default {
             this.time.week = this.$moment().format('dddd');
             this.time.thisTime = this.$moment().format('YYYY/MM/DD');
         },
+        selectChange() {
+            let thisValue = this.$refs.multipleValue.getCheckedNodes()[0];
+            // 选择是否为公司
+            if (!!thisValue && thisValue.data.type == 'org') {
+                let arrs = [];
+                let ids = [thisValue.value];
+                this.fitersValue(arrs, thisValue.data);
+                arrs.map((item) => {
+                    ids.push(item.value);
+                });
+                this.$store.commit('setGlobalCommunity', {
+                    type: 'org',
+                    value: ids
+                });
+            } else {
+                this.$store.commit('setGlobalCommunity', {
+                    value: [!!thisValue ? thisValue.value : null]
+                });
+            }
+        },
+        fitersValue(arrs, value) {
+            if (!!value.children) {
+                value.children.map((item) => {
+                    if (item.type == 'org') {
+                        arrs.push(item);
+                        if (!!item.children) {
+                            this.fitersValue(arrs, item);
+                        }
+                    }
+                });
+            } else {
+                arrs.push(value);
+            }
+        },
         communityNameList() {
-            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+            this.$http.get('/sc-community/assets/tree/community/findCompanyCommunityTree').then(({ data, msg, status }) => {
                 if (status == 0) {
-                    this.communityList = data;
-                    // this.communityId = data[0].id;
-                    // this.$store.commit('setHomeCommunityAll', this.communityId);
-                    this.$store.commit('setAreaSelect', data);
+                    this.scOptions = data;
+                    this.communityValue = [data[0].value];
+                    this.$store.commit('setFindCompanyCommunityTree', data);
+                    if (data[0].type == 'org') {
+                        let arrs = [];
+                        let ids = [data[0].value];
+                        this.fitersValue(arrs, data[0]);
+                        arrs.map((item) => {
+                            ids.push(item.value);
+                        });
+                        this.$store.commit('setGlobalCommunity', {
+                            type: 'org',
+                            value: ids
+                        });
+                    } else {
+                        this.$store.commit('setGlobalCommunity', {
+                            value: [data[0].value]
+                        });
+                    }
                 }
             });
         },
@@ -261,7 +318,7 @@ $colorOption: rgba(250, 250, 250, 0.6);
             height: 24px;
             background-image: url('~@/assets/img/homeTop/icon_shequ@2x.png');
             background-size: cover;
-            margin-top: 5px;
+            vertical-align: text-bottom;
         }
         .time {
             display: flex;

commandCenter/src/components/common/numberActive.vue

@@ -23,7 +23,6 @@ export default {
     },
     methods: {
         numberGrow(ele) {
-          debugger;
             let _this = this;
             let step = (_this.value * 10) / (_this.time * 1000);
             let current = 0;

commandCenter/src/store/store.js

@@ -20,27 +20,19 @@ const store = new Vuex.Store({
         thisDetai: {},
         //查询是否有未读消息
         messageNumber: false,
-        //最近消息列表集合
-        messageList: [],
-        //记录消息的状态
-        messageStatus: 2,
         // 弹窗集合
         popups: '',
         theme: 'light', //控制界面的颜色,
-        // 查询的点的坐标
-        searchPointInfo: {},
         //所有社区下拉
         areaSelect: [],
-        //所有民族
-        nationArray: [],
-        //所有籍贯
-        nativeArray: [],
         //公司部门
         companyArray: [],
-        departmentArray: [],
         communityArray: [],
         homeCommunityAll: '',
-        scale: ""
+        scale: "",
+        globalCommunity: {},
+        findCompanyCommunityTree: [],
+        thisArr: []
     },
     getters: {
         getTheme(state) {
@@ -52,9 +44,6 @@ const store = new Vuex.Store({
         getToken(state) {
             return state.token;
         },
-        getSearchPointInfo(state) {
-            return state.searchPointInfo;
-        },
         getCollapse(state) {
             return state.collapse;
         },
@@ -86,18 +75,9 @@ const store = new Vuex.Store({
         getAreaSelect(state) {
             return state.areaSelect;
         },
-        getNationArray(state) {
-            return state.nationArray;
-        },
-        getNativeArray(state) {
-            return state.nativeArray;
-        },
         getCompanyArray(state) {
             return state.companyArray;
         },
-        getDepartmentArray(state) {
-            return state.departmentArray;
-        },
         getCommunityArray(state) {
             return state.communityArray;
         },
@@ -107,11 +87,17 @@ const store = new Vuex.Store({
         getScale(state) {
             return state.scale;
         },
+        getGlobalCommunity(state) {
+            return state.globalCommunity;
+        },
+        getFindCompanyCommunityTree(state) {
+            return state.findCompanyCommunityTree;
+        },
+        getThisArr(state) {
+            return state.thisArr;
+        },
     },
     mutations: {
-        setSearchPointInfo(state, data) {
-            state.searchPointInfo = data;
-        },
         setPopups(state, data) {
             state.popups = data;
         },
@@ -142,30 +128,15 @@ const store = new Vuex.Store({
         setmessageNumber(state, data) {
             state.messageNumber = data;
         },
-        setmessageList(state, data) {
-            state.messageList = data;
-        },
-        setmessageStatus(state, data) {
-            state.messageStatus = data;
-        },
         setTheme(state, data) {
             state.theme = data;
         },
         setAreaSelect(state, data) {
             state.areaSelect = data;
         },
-        setNationArray(state, data) {
-            state.nationArray = data;
-        },
-        setNativeArray(state, data) {
-            state.nativeArray = data;
-        },
         setCompanyArray(state, data) {
             state.companyArray = data;
         },
-        setDepartmentArray(state, data) {
-            state.departmentArray = data;
-        },
         setCommunityArray(state, data) {
             state.communityArray = data;
         },
@@ -175,6 +146,15 @@ const store = new Vuex.Store({
         setScale(state, data) {
             state.scale = data;
         },
+        setGlobalCommunity(state, data) {
+            state.globalCommunity = data;
+        },
+        setFindCompanyCommunityTree(state, data) {
+            state.findCompanyCommunityTree = data;
+        },
+        setThisArr(state, data) {
+            state.thisArr = data;
+        }
     },
     actions: {
         tags(ctx, data) {
@@ -245,7 +225,7 @@ const store = new Vuex.Store({
                     ctx.commit('setModalParams', params);
                 })
                 .catch((err) => {
-                   this.$message.error(`${err.message}，请刷新页面重试`);
+                    this.$message.error(`${err.message}，请刷新页面重试`);
                 });
         },
         closeModal(ctx) {

commandCenter/src/views/commandDispatch/index.vue

@@ -101,7 +101,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(['homeCommunityAll']),
+        ...mapState(['globalCommunity']),
         points() {
             let showArr = [];
             this.point.map((item) => {
@@ -120,16 +120,17 @@ export default {
         }
     },
     watch: {
-        //全局社区接口调用
-        homeCommunityAll(val) {
-            if (!!val) {
-                this.mixins_query.communityId = val;
-                this.getData();
-                this.getImg();
-                this.showMap = false;
-            } else {
-                this.showMap = true;
-            }
+        globalCommunity: {
+            handler(newVal, oldVal) {
+                this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+                this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+                this.showMap = !!newVal.type;
+                if (!this.showMap && !!newVal.value) {
+                    this.getData();
+                    this.getImg();
+                }
+            },
+            deep: true
         }
     },
     methods: {
@@ -266,15 +267,19 @@ export default {
                 .catch(() => {});
         }
     },
-
-    created() {
-        this.mixins_query.communityId = this.homeCommunityAll;
-        if (!!this.mixins_query.communityId) {
-            this.showMap = false;
-            this.getImg();
-            this.getData();
+    mounted() {
+        const { type, value } = this.globalCommunity;
+        this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+        this.mixins_query.companyIds = !!type ? value.join() : null;
+        if (!!value) {
+            this.showMap = !!type;
+            if (!this.showMap) {
+                this.getData();
+                this.getImg();
+            }
         }
-    }
+    },
+    created() {}
 };
 </script>
 <style lang="scss" scoped>

commandCenter/src/views/commandDispatch/map.vue

@@ -21,41 +21,29 @@ export default {
             addressName: '', //地址查询名称
             poisArray: [],
             loadding: true,
-            mixins_query: {
-                communityId: ''
-            },
             centet: []
         };
     },
     mounted() {},
     computed: {
-        ...mapState(['homeCommunityAll']),
+        ...mapState(['globalCommunity', 'findCompanyCommunityTree']),
         poisArrays() {
-            return this.poisArray;
-            // let arrs = [];
-            // this.poisArray.map((item) => {
-            //     if (!!this.mixins_query.communityId) {
-            //         if (item.id == this.mixins_query.communityId) {
-            //             arrs = [item];
-            //         }
-            //     } else {
-            //         arrs = this.poisArray;
-            //     }
-            // });
-            // return arrs;
+            let arrs = [];
+            this.fitersValue(arrs, this.findCompanyCommunityTree);
+            return arrs;
         }
     },
     watch: {
-        homeCommunityAll(val) {
-            if (!!val) {
-                this.mixins_query.communityId = val;
+        globalCommunity: {
+            handler(newVal, oldVal) {
                 if (!!this.map) {
                     this.map.clearMap();
                 }
-            }
-            if (this.poisArrays.length > 0) {
-                this.addIcon(this.poisArrays);
-            }
+                if (this.poisArrays.length > 0) {
+                    this.addIcon(this.poisArrays);
+                }
+            },
+            deep: true
         }
     },
 
@@ -63,8 +51,8 @@ export default {
         init() {
             this.map = new AMap.Map('mapInit', {
                 resizeEnable: true, //是否监控地图容器尺寸变化
-                center: this.centet,
-                zoom: 8, //初始化地图层级
+                center: !!this.centet[0] ? this.centet : '',
+                zoom: !!this.centet[0] ? 8 : 5, //初始化地图层级
                 mapStyle: 'amap://styles/darkblue',
                 defaultCursor: 'pointer'
             });
@@ -98,7 +86,7 @@ export default {
                 });
                 self.marker.setLabel({
                     offset: new AMap.Pixel(-15, 50),
-                    content: `${item.communityName}`
+                    content: `${item.name}`
                 });
                 if (self.poisArrays.length < 2) {
                     self.map.setFitView();
@@ -109,9 +97,36 @@ export default {
             });
         },
         setCommunity(its) {
-            this.$store.commit('setHomeCommunityAll', its.id);
+            this.$store.commit('setGlobalCommunity', {
+                value: [its.value]
+            });
+            let newarr = this.finterParent(this.findCompanyCommunityTree, its.value);
+            newarr.push(its.value);
+            this.$store.commit('setThisArr', newarr);
             this.$parent.showMap = false;
         },
+        finterParent(data, id) {
+            // 深度遍历查找
+            function dfs(data, id, parents) {
+                for (var i = 0; i < data.length; i++) {
+                    var item = data[i];
+                    // 找到id则返回父级id
+                    if (item.value === id) return parents;
+                    // children不存在或为空则不递归
+                    if (!item.children || !item.children.length) continue;
+                    // 往下查找时将当前id入栈
+                    parents.push(item.value);
+
+                    if (dfs(item.children, id, parents).length) return parents;
+                    // 深度遍历查找未找到时当前id 出栈
+                    parents.pop();
+                }
+                // 未找到时返回空数组
+                return [];
+            }
+
+            return dfs(data, id, []);
+        },
         //搜索区域
         districtMask(val) {
             if (!this.district) {
@@ -157,10 +172,11 @@ export default {
             });
         },
         getPoin(resolve) {
-            this.$http.get('/sc-community/assets/community/list').then(({ data, status, msg }) => {
+            this.$http.get('/sc-community/assets/tree/community/findCompanyCommunityTree').then(({ data, status, msg }) => {
                 if (status == 0) {
-                    this.poisArray = data;
-                    this.centet = this.getPointsCenter(data);
+                    let arrs = [];
+                    this.fitersValue(arrs, data);
+                    this.centet = this.getPointsCenter(arrs);
                     resolve && resolve(true);
                 }
             });
@@ -204,25 +220,26 @@ export default {
                 Math.floor(((tmp_lng * 180) / Math.PI) * 1000000) / 1000000,
                 Math.floor(((tmp_lat * 180) / Math.PI) * 1000000) / 1000000
             ];
+        },
+        fitersValue(arrs, value) {
+            let thisValue = this.globalCommunity.value;
+            value.map((item) => {
+                if (item.type == 'org') {
+                    if (!!item.children) {
+                        this.fitersValue(arrs, item.children);
+                    }
+                } else {
+                    if (!!thisValue && thisValue.includes(item.parentId)) {
+                        arrs.push(item);
+                    }
+                }
+            });
         }
     },
     destroyed() {
         this.map && this.map.destroy();
     },
     created() {
-        // this.getPoin();
-        // new Promise((resolve) => {
-        //     this.getLoc(resolve);
-        // }).then(() => {
-        //     new Promise((resolve) => {
-        //         if (!!AMap) {
-        //             resolve(true);
-        //         }
-        //     }).then(() => {
-        //         this.init();
-        //     });
-        // });
-
         new Promise((resolve) => {
             this.getPoin(resolve);
         }).then(() => {

commandCenter/src/views/commandDispatch/pop/typeHydropower.vue

@@ -52,7 +52,7 @@ export default {
                     this.$http
                         .post('/sc-energy/device/batchValve', {
                             valveStatus: satus,
-                            ids: id
+                            ids: [id]
                         })
                         .then(({ status, data, msg }) => {
                             if (status === 0) {

commandCenter/src/views/communityAssets/assembly/allcommunit.js

@@ -7,18 +7,20 @@ export default {
     },
     computed: {
         //全局社区
-        ...mapState(['homeCommunityAll']),
-
+        ...mapState(['globalCommunity']),
         resize() {
             // 通过scale值来判断窗口是变化
             return this.$store.getters['getScale'];
         }
     },
     watch: {
-        //全局社区接口调用
-        homeCommunityAll(n) {
-            this.mixins_query.communityId = n;
-            this.getData();
+        globalCommunity: {
+            handler(newVal, oldVal) {
+                this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+                this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+                this.getData();
+            },
+            deep: true
         },
         resize(va) {
             // console.log(va);
@@ -26,7 +28,8 @@ export default {
     },
     methods: {},
     created() {
-        this.mixins_query.communityId = this.homeCommunityAll;
-        // this.getData();
+        const { type, value } = this.globalCommunity
+        this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+        this.mixins_query.companyIds = !!type ? value.join() : null;
     }
 };

commandCenter/src/views/communityAssets/assembly/householdGender.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
- * @Date: 2022-08-24 11:40:10
- * @LastEditTime: 2022-09-02 17:09:49
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:22:18
  * @LastEditors: D4THYL3
  * @Description: In User Settings Edit
  * @FilePath: \commandCenter\src\views\communityAssets\assembly\householdGender.vue
@@ -33,7 +33,7 @@ export default {
   mixins: [index],
   data () {
     return {
-      valueClass: "",
+      valueClass: '',
       mixins_query: {
         communityId: ''
       },
@@ -56,7 +56,7 @@ export default {
           // this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
           if (window.screen.width == 1920 || window.screen.width < 1920) {
             this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
-          } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {}, { type: '%', total: data.total });
           }
         } else {
@@ -70,7 +70,7 @@ export default {
               {},
               { type: '%', total: 0 }
             );
-          } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge(
               [],
               [
@@ -81,6 +81,15 @@ export default {
               { type: '%', total: 0 }
             );
           }
+          // this.clientOptions = ringType(
+          //   [],
+          //   [
+          //     { value: 0, name: '男' },
+          //     { value: 0, name: '女' }
+          //   ],
+          //   {},
+          //   { type: '%', total: 0 }
+          // );
         }
       });
     },
@@ -112,7 +121,7 @@ export default {
         {},
         { type: '%', total: 0 }
       );
-    } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
       this.clientOptions = ringTypeEnlarge(
         [],

commandCenter/src/views/communityAssets/assembly/householdIdentity.vue

@@ -58,12 +58,12 @@ export default {
           // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           if (window.screen.width == 1920 || window.screen.width < 1920) {
             this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
-          } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
         } else {
           if (window.screen.width == 1920 || window.screen.width < 1920) {
-            this.valueClass = 1;
+
             this.clientOptions = ringType(
               colors,
               [
@@ -76,8 +76,8 @@ export default {
               {},
               { type: 'number', total: 0 }
             );
-          } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
-            this.valueClass = 2;
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+
             this.clientOptions = ringTypeEnlarge(
               colors,
               [
@@ -128,7 +128,7 @@ export default {
         {},
         { type: 'number', total: 0 }
       )
-    } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
       this.clientOptions = ringTypeEnlarge(
         colors,
@@ -198,7 +198,6 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
-        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);

commandCenter/src/views/communityAssets/assembly/indexOptionChart.js

@@ -63,7 +63,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -89,7 +89,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         },
         legend: {
             orient: 'vertical',
-            right: 10,
+            right: 0,
             top: 80,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
@@ -118,11 +118,85 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         series: [
             {
                 type: 'pie',
-                // radius: ['55%', '70%'],
-                radius: ['55%', '70%'],
+                radius: ['60%', '75%'],
+                avoidLabelOverlap: false,
                 center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+export const ringTypes = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 80,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['57%', '71%'],
                 avoidLabelOverlap: false,
-                // center: ['25%', '50%'],
+                center: ['25%', '50%'],
                 label: {
                     show: false,
                     position: 'center'
@@ -143,7 +217,7 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -213,6 +287,82 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         ]
     };
 };
+export const ringTypeEnlarges = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 30,
+            top: 100,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '64%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
 
 // 折现波浪
 export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {

commandCenter/src/views/communityAssets/assembly/rentalAndSaleRate.vue

@@ -19,12 +19,12 @@
   </div>
 </template>
 <script>
-import { ringType, ringTypeEnlarge } from './indexOptionChart';
+import { ringTypes, ringTypeEnlarges } from './indexOptionChart';
 import index from './allcommunit'
 let defaultTitle = {
   text: `{a|租售率}`,
   left: 'center',
-  top: '40%',
+  top: '35%',
   left: '18%',
   subtextStyle: {
     rich: {
@@ -40,7 +40,34 @@ let defaultTitle = {
       a: {
         fontSize: 12,
         color: '#858892',
-        padding: [0, 0, 0, 3]
+        padding: [0, 0, 0, 3],
+        fontWeight: 'lighter'
+      }
+    }
+  }
+};
+
+let defaultTitleEnlarge = {
+  text: `{a|租售率}`,
+  left: 'center',
+  top: '40%',
+  left: '19%',
+  subtextStyle: {
+    rich: {
+      b: {
+        fontSize: 20,
+        color: '#fff'
+      }
+    }
+  },
+  textStyle: {
+    color: '#ccc',
+    rich: {
+      a: {
+        fontSize: 14,
+        color: '#858892',
+        padding: [0, 0, 0, 3],
+        fontWeight: 'lighter'
       }
     }
   }
@@ -49,20 +76,20 @@ export default {
   mixins: [index],
   data () {
     return {
-      valueClass: '',
       mixins_query: {
         communityId: ''
       },
+      valueClass: '',
       total: 0,
       defaultTitle: {
         text: `{a|租售率}`,
         left: 'center',
-        top: '40%',
+        top: '30%',
         left: '18%',
         subtextStyle: {
           rich: {
             b: {
-              fontSize: 20,
+              fontSize: 30,
               color: '#fff'
             }
           }
@@ -78,7 +105,7 @@ export default {
           }
         }
       },
-      clientOptions: ringType(
+      clientOptions: ringTypes(
         [],
         [
           { name: '待租售', value: 0 },
@@ -94,12 +121,12 @@ export default {
       this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0) {
           if (window.screen.width == 1920 || window.screen.width < 1920) {
-            this.clientOptions = ringType([], this.eachartObj(data), {
+            this.clientOptions = ringTypes([], this.eachartObj(data), {
               subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
               ...defaultTitle
             });
           } else if (window.screen.width == 2560 || window.screen.width > 1920) {
-            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {
+            this.clientOptions = ringTypeEnlarges([], this.eachartObj(data), {
               subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
               ...defaultTitleEnlarge
             });
@@ -127,7 +154,7 @@ export default {
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
       this.valueClass = 1;
-      this.clientOptions = ringType([],
+      this.clientOptions = ringTypes([],
         [
           { name: '待租售', value: 0 },
           { name: '已售', value: 0 },
@@ -136,7 +163,7 @@ export default {
         { subtext: `{b|0%}`, ...defaultTitle })
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarge([],
+      this.clientOptions = ringTypeEnlarges([],
         [
           { name: '待租售', value: 0 },
           { name: '已售', value: 0 },

commandCenter/src/views/communityAssets/style.scss

@@ -55,7 +55,6 @@ $name: index-content;
         justify-content: space-between;
         font-size: 12px;
         position: relative;
-        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);

commandCenter/src/views/financialAnalysis/index.vue

@@ -19,10 +19,10 @@
             <deposit-balance></deposit-balance>
         </div>
         <div class="overflowHidden mr10 list_3_2">
-            <hydropower labeText="年度水费支出" :type="2"></hydropower>
+            <hydropower labeText="年度水费支出" :type="1"></hydropower>
         </div>
         <div class="overflowHidden mr10 list_3_4">
-            <hydropower labeText="年度电费支出" :type="3"></hydropower>
+            <hydropower labeText="年度电费支出" :type="2"></hydropower>
         </div>
     </div>
 </template>

commandCenter/src/views/financialAnalysis/smallModuleIndex/allcommunit.js

@@ -7,7 +7,7 @@ export default {
   },
   computed: {
     //全局社区
-    ...mapState(['homeCommunityAll']),
+    ...mapState(['globalCommunity']),
 
     resize() {
       // 通过scale值来判断窗口是变化
@@ -15,16 +15,21 @@ export default {
     }
   },
   watch: {
-    //全局社区接口调用
-    'homeCommunityAll'(n) {
-      this.mixins_query.communityId = n;
-      this.getData();
-    }
+    globalCommunity: {
+      handler(newVal, oldVal) {
+        this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+        this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+        this.getData();
+      },
+      deep: true
+    },
   },
   methods: {
   },
   created() {
-    this.mixins_query.communityId = this.homeCommunityAll;
+    const { type, value } = this.globalCommunity
+    this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+    this.mixins_query.companyIds = !!type ? value.join() : null;
     this.getData();
   }
 }

commandCenter/src/views/financialAnalysis/smallModuleIndex/collectionRate.vue

@@ -1,76 +1,71 @@
 <template>
   <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
-    <div class="model-title">
-      <div class="model-title-text">收款率分析</div>
-      <div class="model-title-right">
-        <el-date-picker
-          value-format="yyyy-MM"
-          v-model="date"
-          type="month"
-          placeholder="选择月"
-          class="saveColumn-select saveColumn-select-time"
-          @change="changeTime"
-          :clearable="false"
-        >
-        </el-date-picker>
-        <el-select
-          v-model="mixins_query.chargeType"
-          placeholder="所有费用"
-          clearable
-          class="saveColumn-select"
-          @change="getData"
-        >
-          <el-option
-            v-for="(item, index) in amountType"
-            :label="item.name"
-            :value="item.value"
-            :key="index"
-          ></el-option>
-        </el-select>
-      </div>
-    </div>
-    <div class="model-content">
-      <zz-echart
-        :option="clientOptions"
-        class="chart"
-        style="top: 15px; width: 270px;"
-      ></zz-echart>
-      <!-- <process-circle
-            class="item"
-            :strokeWidth="strokeWidth"
-            :strokeColor="strokeColor"
-            :trailWidth="trailWidth"
-            :trailColor="trailColor"
-            :percent="(100-parseInt(dataObj.collectionRate))"
+    <template>
+      <div class="model-title">
+        <div class="model-title-text">收款率分析</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select saveColumn-select-time"
+            @change="changeTime"
+            :clearable="false"
           >
-            <span
-              class="ashText"
-              style="font-size: 14px"
-            >收款率</span>
-            <span> {{ dataObj.collectionRate }}</span>
-          </process-circle> -->
-      <div class="textAmount">
-        <div class="listAmount">
-          <div class="listText">应收金额</div>
-          <div class="listNumber">{{ dataObj.receivableAmount }}</div>
-        </div>
-        <div class="listAmount">
-          <div class="listText">已收金额</div>
-          <div class="listNumber">{{ dataObj.receivedAmount }}</div>
+          </el-date-picker>
+          <el-select
+            v-model="mixins_query.chargeType"
+            placeholder="所有费用"
+            clearable
+            class="saveColumn-select"
+            @change="getData"
+          >
+            <el-option
+              v-for="(item, index) in amountType"
+              :label="item.name"
+              :value="item.value"
+              :key="index"
+            ></el-option>
+          </el-select>
         </div>
-        <div class="listAmount">
-          <div class="listText">未收金额</div>
-          <div class="listNumber">{{ dataObj.uncollected }}</div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+          style="top: 15px; width: 270px;"
+        ></zz-echart>
+        <div class="textAmount">
+          <div class="listAmount">
+            <div class="listText">应收金额</div>
+            <div class="listNumber">{{ dataObj.receivableAmount }}</div>
+          </div>
+          <div class="listAmount">
+            <div class="listText">已收金额</div>
+            <div class="listNumber">{{ dataObj.receivedAmount }}</div>
+          </div>
+          <div class="listAmount">
+            <div class="listText">未收金额</div>
+            <div class="listNumber">{{ dataObj.uncollected }}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
-  <script>
+
+
+
+    <script>
+// import processCircle from './circle'; // 环形进度条
 import { quantitativeAnalysisDashboard, quantitativeAnalysisDashboardEnlarge } from './indexOptionChart';
-import allcommunit from './allcommunit';
+// import permissionComponent from './permissionComponent';
 export default {
-  mixins: [allcommunit],
+  //   mixins: [permissionComponent],
+  //   components: {
+  //     processCircle
+  //   },
   data () {
     return {
       valueClass: '',
@@ -145,12 +140,11 @@ export default {
           }
 
         } else {
-          this.dataObj = {
-            receivableAmount: 0,
-            receivedAmount: 0,
-            uncollected: 0,
-            collectionRate: '0%'
-          };
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = quantitativeAnalysisDashboard(['收款率'], [0], []);
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = quantitativeAnalysisDashboardEnlarge(['收款率'], [0], []);
+          }
         }
       });
     },
@@ -162,8 +156,10 @@ export default {
   },
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
       this.clientOptions = quantitativeAnalysisDashboard(['收款率'], [0], []);
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
       this.clientOptions = quantitativeAnalysisDashboardEnlarge(['收款率'], [0], []);
     }
 
@@ -174,14 +170,36 @@ export default {
     this.getData();
   }
 };
-  </script>
-  <style scoped lang="scss">
+    </script>
+
+
+    <style scoped lang="scss">
 @import './style.scss';
 @import './stylePc.scss';
 .modelBlock {
     .model-content {
         height: calc(100% - #{rem(80)});
-        top: 0 !important;
+        top: 10px !important;
+    }
+    .textAmount {
+        width: rem(100);
+        margin-top: rem(25);
+        display: flex;
+        // justify-content: space-between;
+        flex-direction: column;
+        .listAmount {
+            font-size: 12px;
+            .listText {
+                opacity: 0.5;
+            }
+            .listNumber {
+                font-size: rem(20);
+                // margin-bottom: rem(10);
+                &:first-child {
+                    margin: 0;
+                }
+            }
+        }
     }
 }
 
@@ -195,26 +213,6 @@ export default {
     }
 }
 
-.textAmount {
-    width: 120px;
-    margin-top: 45px;
-    display: flex;
-    // justify-content: space-between;
-    flex-direction: column;
-    .listAmount {
-        font-size: 16px;
-        .listText {
-            opacity: 0.5;
-        }
-        .listNumber {
-            font-size: rem(20);
-            // margin-bottom: rem(10);
-            &:first-child {
-                margin: 0;
-            }
-        }
-    }
-}
 .item {
     margin-top: rem(25);
     margin-left: rem(25);
@@ -222,4 +220,27 @@ export default {
         opacity: 0.5;
     }
 }
+
+.modelBlock.enlarge {
+    .textAmount {
+        width: rem(100);
+        margin-top: 60px;
+        display: flex;
+        // justify-content: space-between;
+        flex-direction: column;
+        .listAmount {
+            font-size: 12px;
+            .listText {
+                opacity: 0.5;
+            }
+            .listNumber {
+                font-size: rem(20);
+                // margin-bottom: rem(10);
+                &:first-child {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/deposit.vue

@@ -28,7 +28,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
 const colors = [
   GradualChange('#22D8FF', '#00B2FF'),
   GradualChange('#F0646C', '#F4994E'),
@@ -69,30 +69,6 @@ export default {
           } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
-        } else {
-          if (window.screen.width == 1920 || window.screen.width < 1920) {
-            this.total = 0;
-            this.clientOptions = ringType(
-              colors,
-              [
-                { value: 0, name: '装修押金' },
-                { value: 0, name: '租赁押金' }
-              ],
-              {},
-              { type: 'number', total: 0 }
-            );
-          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
-            this.total = 0;
-            this.clientOptions = ringTypeEnlarge(
-              colors,
-              [
-                { value: 0, name: '装修押金' },
-                { value: 0, name: '租赁押金' }
-              ],
-              {},
-              { type: 'number', total: 0 }
-            );
-          }
         }
       });
     },
@@ -120,7 +96,8 @@ export default {
   },
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
-      this.clientOptions = ringType(
+      this.valueClass = 1;
+      this.clientOptions = ringTypes(
         colors,
         [
           { value: 0, name: '装修押金' },
@@ -128,8 +105,9 @@ export default {
         ],
         {},
         { type: 'number', total: 0 }
-      )
+      );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
       this.clientOptions = ringTypeEnlarge(
         colors,
         [
@@ -138,7 +116,7 @@ export default {
         ],
         {},
         { type: 'number', total: 0 }
-      )
+      );
     }
     this.date = this.$moment().format('YYYY-MM');
     this.mixins_query.yearMonth = this.$moment().format('YYYY-MM');

commandCenter/src/views/financialAnalysis/smallModuleIndex/hydropower.vue

@@ -33,7 +33,7 @@ export default {
         },
         type: {
             type: Number,
-            default: 2
+            default: 1
         }
     },
     data() {

commandCenter/src/views/financialAnalysis/smallModuleIndex/incomeMode.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
+import { GradualChange, ringTypes, ringTypeEnlarges } from './indexOptionChart';
 const colors = [
   GradualChange('#22D8FF', '#00B2FF'),
   GradualChange('#F0646C', '#F4994E'),
@@ -51,7 +51,7 @@ export default {
   mixins: [allcommunit],
   data () {
     return {
-      valueClass: '',
+      valueClass: "",
       mixins_query: {
         communityId: '',
         date: '',
@@ -59,7 +59,7 @@ export default {
       },
       date: '',
       total: 0,
-      clientOptions: ringType(
+      clientOptions: ringTypes(
         colors,
         [
           { value: 0, name: '微信' },
@@ -80,9 +80,9 @@ export default {
         if (status == 0 && !!data.datas && Object.keys(data.datas).length !== 0) {
           //   this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
           if (window.screen.width == 1920 || window.screen.width < 1920) {
-            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
+            this.clientOptions = ringTypes(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
           } else if (window.screen.width == 2560 || window.screen.width > 1920) {
-            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
+            this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
           }
         }
       });
@@ -115,7 +115,8 @@ export default {
   },
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
-      this.clientOptions = ringType(
+      this.valueClass = 1;
+      this.clientOptions = ringTypes(
         colors,
         [
           { value: 0, name: '微信' },
@@ -125,11 +126,11 @@ export default {
           { value: 0, name: '其他' }
         ],
         {},
-        { type: '%', total: 0 },
-        30
-      )
+        { type: '%', total: 0 }
+      );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
-      this.clientOptions = ringTypeEnlarge(
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarges(
         colors,
         [
           { value: 0, name: '微信' },
@@ -139,9 +140,8 @@ export default {
           { value: 0, name: '其他' }
         ],
         {},
-        { type: '%', total: 0 },
-        30
-      )
+        { type: '%', total: 0 }
+      );
     }
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');

commandCenter/src/views/financialAnalysis/smallModuleIndex/indexOptionChart.js

@@ -59,13 +59,13 @@ const defaultColor = [
     GradualChange('#884DD2', '#DF63CC')
 ];
 // 饼图
-export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}, tops = 80) => {
+export const ringTypes = (color = [], data = [], title = {}, legendFcuntion = {}) => {
     let legendFcuntionValue = (v) => {
         let val = '';
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -91,8 +91,8 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         },
         legend: {
             orient: 'vertical',
-            right: 10,
-            top: tops,
+            right: 0,
+            top: 40,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
             itemHeight: 8,
@@ -120,7 +120,83 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         series: [
             {
                 type: 'pie',
-                radius: ['55%', '70%'],
+                radius: ['60%', '75%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 80,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['60%', '75%'],
                 avoidLabelOverlap: false,
                 center: ['25%', '50%'],
                 label: {
@@ -143,7 +219,7 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -213,6 +289,82 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         ]
     };
 };
+export const ringTypeEnlarges = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 30,
+            top: 70,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['53%', '68%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
 
 // 折现波浪
 export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
@@ -1329,22 +1481,23 @@ export const quantitativeAnalysisDashboard = (name = [], data = [], color = [])
         // backgroundColor: 'rgba(8, 17, 67, 0.9)',
         title: {
             text: name,
-            left: '33%',
-            top: '35%',
+            left: '36%',
+            top: '30%',
             textAlign: 'center',
             textStyle: {
-                color: 'rgba(245, 247, 247,0.6)',
-                fontSize: 18
+                color: '#858892',
+                fontSize: 12,
+                fontWeight: 'lighter'
             },
             subtext: `${percent} %`,
             subtextStyle: {
-                color: 'rgba(245, 247, 247,1)',
-                fontSize: 14
+                color: '#fff',
+                fontSize: 20
             }
         },
         polar: {
-            radius: ['55%', '75%'],
-            center: ['35%', '50%']
+            radius: ['71%', '96%'],
+            center: ['38%', '50%']
         },
         // 极坐标角度轴
         angleAxis: {
@@ -1420,22 +1573,23 @@ export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color
         // backgroundColor: 'rgba(8, 17, 67, 0.9)',
         title: {
             text: name,
-            left: '33%',
-            top: '40%',
+            left: '37%',
+            top: '35%',
             textAlign: 'center',
             textStyle: {
-                color: 'rgba(245, 247, 247,0.6)',
-                fontSize: 14
+                color: '#858892',
+                fontSize: 14,
+                fontWeight: 'lighter'
             },
             subtext: `${percent} %`,
             subtextStyle: {
-                color: 'rgba(245, 247, 247,1)',
-                fontSize: 26
+                color: '#fff',
+                fontSize: 20
             }
         },
         polar: {
-            radius: ['60%', '75%'],
-            center: ['35%', '50%']
+            radius: ['50%', '70%'],
+            center: ['38%', '45%']
         },
         // 极坐标角度轴
         angleAxis: {

commandCenter/src/views/financialAnalysis/smallModuleIndex/stylePc.scss

@@ -1,3 +1,4 @@
+@import '@assets/css/public-style.scss';
 .modelBlock.enlarge {
     height: 100%;
     padding: rem(15) rem(20) rem(20);

commandCenter/src/views/industrialInvestment/assembly/BusinessOpportunity.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
- * @Date: 2022-08-24 11:40:10
- * @LastEditTime: 2022-09-02 17:13:37
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:25:47
  * @LastEditors: D4THYL3
  * @Description: In User Settings Edit
  * @FilePath: \commandCenter\src\views\industrialInvestment\assembly\BusinessOpportunity.vue
@@ -44,7 +44,7 @@ export default {
   mixins: [index],
   data () {
     return {
-      valueClass: '',
+      valueClass: "",
       mixins_query: {
         // companyOrgId: '',
         startDate: ''
@@ -75,7 +75,6 @@ export default {
               value: data[i].total
             })
           }
-          // this.clientOptions = ringType([], newData);
           if (window.screen.width == 1920 || window.screen.width < 1920) {
             this.clientOptions = ringType([], newData);
           } else if (window.screen.width == 2560 || window.screen.width > 1920) {

commandCenter/src/views/industrialInvestment/assembly/allcommunit.js

@@ -7,7 +7,7 @@ export default {
     },
     computed: {
         //全局社区
-        ...mapState(['homeCommunityAll']),
+        ...mapState(['globalCommunity']),
 
         resize() {
             // 通过scale值来判断窗口是变化
@@ -16,9 +16,13 @@ export default {
     },
     watch: {
         //全局社区接口调用
-        homeCommunityAll(n) {
-            this.mixins_query.communityId = n;
-            this.getData();
+        globalCommunity: {
+            handler(newVal, oldVal) {
+                this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+                this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+                this.getData();
+            },
+            deep: true
         },
         resize(va) {
             // console.log(va);
@@ -26,7 +30,8 @@ export default {
     },
     methods: {},
     created() {
-        this.mixins_query.communityId = this.homeCommunityAll;
-        // this.getData();
+        const { type, value } = this.globalCommunity
+        this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+        this.mixins_query.companyIds = !!type ? value.join() : null;
     }
 };

commandCenter/src/views/industrialInvestment/assembly/enterpriseDistribution.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
- * @Date: 2022-08-24 11:40:10
- * @LastEditTime: 2022-09-02 17:18:49
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:30:18
  * @LastEditors: D4THYL3
  * @Description: In User Settings Edit
  * @FilePath: \commandCenter\src\views\industrialInvestment\assembly\enterpriseDistribution.vue
@@ -30,10 +30,10 @@ export default {
   mixins: [index],
   data () {
     return {
-      valueClass: '',
       mixins_query: {
         communityId: ''
       },
+      valueClass: "",
       total: 0,
       clientOptions: ringType(
         [],
@@ -82,7 +82,7 @@ export default {
   },
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
-      this.valueClass = '1';
+      this.valueClass = 1;
       this.clientOptions = ringType(
         [],
         [
@@ -93,9 +93,9 @@ export default {
         ],
         {},
         { type: '', total: 0 }
-      )
+      );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
-      this.valueClass = '2'
+      this.valueClass = 2;
       this.clientOptions = ringTypeEnlarge(
         [],
         [
@@ -106,7 +106,7 @@ export default {
         ],
         {},
         { type: '', total: 0 }
-      )
+      );
     }
     this.getData();
   }

commandCenter/src/views/industrialInvestment/assembly/indexOptionChart.js

@@ -63,7 +63,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -89,7 +89,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         },
         legend: {
             orient: 'vertical',
-            right: 10,
+            right: 0,
             top: 80,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
@@ -118,11 +118,9 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         series: [
             {
                 type: 'pie',
-                // radius: ['55%', '70%'],
-                radius: ['55%', '70%'],
-                center: ['25%', '50%'],
+                radius: ['60%', '75%'],
                 avoidLabelOverlap: false,
-                // center: ['25%', '50%'],
+                center: ['25%', '50%'],
                 label: {
                     show: false,
                     position: 'center'
@@ -213,6 +211,7 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         ]
     };
 };
+
 // 折现波浪
 export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
     let option = {

commandCenter/src/views/industrialInvestment/stylePc.scss

@@ -1,3 +1,4 @@
+@import '@assets/css/public-style.scss';
 .modelBlock.enlarge {
     height: 100%;
     padding: rem(15) rem(20) rem(20);

commandCenter/src/views/operationalServices/assembly/allcommunit.js

@@ -7,7 +7,7 @@ export default {
     },
     computed: {
         //全局社区
-        ...mapState(['homeCommunityAll']),
+        ...mapState(['globalCommunity']),
 
         resize() {
             // 通过scale值来判断窗口是变化
@@ -16,9 +16,13 @@ export default {
     },
     watch: {
         //全局社区接口调用
-        homeCommunityAll(n) {
-            this.mixins_query.communityId = n;
-            this.getData();
+        globalCommunity: {
+            handler(newVal, oldVal) {
+                this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+                this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+                this.getData();
+            },
+            deep: true
         },
         resize(va) {
             // console.log(va);
@@ -26,7 +30,8 @@ export default {
     },
     methods: {},
     created() {
-        this.mixins_query.communityId = this.homeCommunityAll;
-        // this.getData();
+        const { type, value } = this.globalCommunity
+        this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+        this.mixins_query.companyIds = !!type ? value.join() : null;
     }
 };

commandCenter/src/views/operationalServices/assembly/completionMaintenanceOrder.vue

@@ -28,7 +28,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
+import { GradualChange, ringTypes, ringTypeEnlarges } from './indexOptionChart';
 import index from './allcommunit'
 // import permissionComponent from '../permissionComponent';
 const colors = [
@@ -43,18 +43,18 @@ export default {
   // mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       // defaultModel: {
       //   permissUrl: '17',
       //   titleName: '运维工单'
       // },
-      valueClass: '',
       mixins_query: {
         communityId: '',
         date: '',
       },
       date: '',
       total: 0,
-      clientOptions: ringType(
+      clientOptions: ringTypes(
         colors,
         [
           { value: 0, name: '待派单' },
@@ -72,11 +72,11 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticWorkOrderComplete', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0 && !!data.datas) {
-          // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total }, ['48%', '60%']);
+          // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           if (window.screen.width == 1920 || window.screen.width < 1920) {
-            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total }, ['48%', '60%']);
-          } else if (window.screen.width > 1920 || window.screen.width <= 2560) {
-            // this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+            this.clientOptions = ringTypes(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
         }
       })
@@ -101,7 +101,7 @@ export default {
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
       this.valueClass = 1;
-      this.clientOptions = ringType(
+      this.clientOptions = ringTypes(
         colors,
         [
           { value: 0, name: '待派单' },
@@ -111,28 +111,23 @@ export default {
           { value: 0, name: '已关闭' }
         ],
         {},
-        { type: 'number', total: 0 },
-        ['48%', '60%']
-      )
+        { type: 'number', total: 0 }
+      );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      // this.clientOptions = ringTypeEnlarges(
-      //   colors,
-      //   [
-      //     { value: 0, name: '待派单' },
-      //     { value: 0, name: '处理中' },
-      //     { value: 0, name: '已完成' },
-      //     { value: 0, name: '已完成（超时）' },
-      //     { value: 0, name: '已关闭' }
-      //   ],
-      //   {},
-      //   { type: 'number', total: 0 }
-      // )
+      this.clientOptions = ringTypeEnlarges(
+        colors,
+        [
+          { value: 0, name: '待派单' },
+          { value: 0, name: '处理中' },
+          { value: 0, name: '已完成' },
+          { value: 0, name: '已完成（超时）' },
+          { value: 0, name: '已关闭' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      );
     }
-
-
-
-
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');
     this.getData();
@@ -193,4 +188,73 @@ export default {
         }
     }
 }
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
 </style>

commandCenter/src/views/operationalServices/assembly/distributionSuggestion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="c == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">投诉建议类型分布</div>
       <div class="model-title-right">
@@ -43,11 +43,11 @@ export default {
   // mixins: [permissionComponent],
   data () {
     return {
-      valueClass: '',
       // defaultModel: {
       //   permissUrl: '17',
       //   titleName: '运维工单'
       // },
+      valueClass: '',
       mixins_query: {
         communityId: '',
         date: '',
@@ -75,7 +75,7 @@ export default {
           // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           if (window.screen.width == 1920 || window.screen.width < 1920) {
             this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
-          } else if (window.screen.width > 1920 || window.screen.width <= 2560) {
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
         }
@@ -108,8 +108,7 @@ export default {
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
       this.valueClass = 1;
-      this.clientOptions = ringType(
-        colors,
+      this.clientOptions = ringType(colors,
         [
           { value: 0, name: '扰民投诉' },
           { value: 0, name: '物业投诉' },
@@ -118,12 +117,10 @@ export default {
           { value: 0, name: '其他' }
         ],
         {},
-        { type: 'number', total: 0 }
-      );
+        { type: 'number', total: 0 });
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarge(
-        colors,
+      this.clientOptions = ringTypeEnlarge(colors,
         [
           { value: 0, name: '扰民投诉' },
           { value: 0, name: '物业投诉' },
@@ -132,8 +129,7 @@ export default {
           { value: 0, name: '其他' }
         ],
         {},
-        { type: 'number', total: 0 }
-      );
+        { type: 'number', total: 0 });
     }
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');
@@ -175,7 +171,6 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
-        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -196,11 +191,11 @@ export default {
         }
     }
 }
-
 .modelBlock.enlarge {
     height: 100%;
     padding: rem(15) rem(20) rem(20);
     background: #171f32;
+    position: relative;
     .model-title {
         line-height: rem(30);
         display: flex;
@@ -208,17 +203,34 @@ export default {
         padding-bottom: rem(15);
         border-bottom: 1px solid rgba(224, 225, 227, 0.2);
         .saveColumn-select {
-            width: rem(120);
-            margin-left: rem(20);
+            width: rem(100);
             /deep/ .el-input__inner {
                 background: transparent;
                 color: white;
+                padding-right: rem(20);
                 border-color: rgba(255, 255, 255, 0.2);
             }
         }
         .model-title-text {
             color: white;
         }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
     }
     .model-content {
         height: calc(100% - #{rem(45)});
@@ -242,7 +254,8 @@ export default {
             .numbers {
                 font-size: 12px;
                 opacity: 0.5;
-                line-height: 33px;
+                // line-height: rem(32);
+                line-height: 32px;
             }
         }
     }

commandCenter/src/views/operationalServices/assembly/indexOptionChart.js

@@ -57,19 +57,13 @@ const defaultColor = [
     GradualChange('#884DD2', '#DF63CC')
 ];
 // 饼图
-export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}, radius = []) => {
-    let radiusList;
-    if (radius.length != 0) {
-        radiusList = [radius[0], radius[1]];
-    } else {
-        radiusList = ['55%', '70%'];
-    }
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
     let legendFcuntionValue = (v) => {
         let val = '';
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -95,7 +89,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         },
         legend: {
             orient: 'vertical',
-            right: 10,
+            right: 0,
             top: 80,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
@@ -124,11 +118,85 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         series: [
             {
                 type: 'pie',
-                // radius: ['55%', '70%'],
-                radius: radiusList,
+                radius: ['60%', '75%'],
+                avoidLabelOverlap: false,
                 center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+export const ringTypes = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 80,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '62%'],
                 avoidLabelOverlap: false,
-                // center: ['25%', '50%'],
+                center: ['25%', '50%'],
                 label: {
                     show: false,
                     position: 'center'
@@ -149,7 +217,7 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
                     if (v.length > 5 || v.length == 5) {
                         let va = v.substr(0, 3) + '…';
@@ -219,6 +287,84 @@ export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntio
         ]
     };
 };
+// 饼图  2560
+export const ringTypeEnlarges = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 30,
+            top: 100,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['45%', '58%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+
 // 折现波浪
 export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
     let option = {

commandCenter/src/views/operationalServices/assembly/orderClassification.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
- * @Date: 2022-08-24 11:40:10
- * @LastEditTime: 2022-09-06 09:50:49
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:38:27
  * @LastEditors: D4THYL3
  * @Description: In User Settings Edit
  * @FilePath: \commandCenter\src\views\operationalServices\assembly\orderClassification.vue
@@ -42,11 +42,11 @@ export default {
   mixins: [index],
   data () {
     return {
-      valueClass: '',
       mixins_query: {
         communityId: '',
         date: '',
       },
+      valueClass: '',
       total: 0,
       date: '',
       clientOptions: ringType(
@@ -68,11 +68,10 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticWorkOrderCategory', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0 && !!data.datas) {
-          // debugger
           // this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
           if (window.screen.width == 1920 || window.screen.width < 1920) {
             this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
-          } else if (window.screen.width > 1920 || window.screen.width <= 2560) {
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
             this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {}, { type: '%', total: data.total });
           }
         }
@@ -97,26 +96,22 @@ export default {
   created () {
     if (window.screen.width == 1920 || window.screen.width < 1920) {
       this.valueClass = 1;
-      this.clientOptions = ringType(
-        [],
+      this.clientOptions = ringType([],
         [
           { value: 0, name: '业主报修' },
           { value: 0, name: '内部报修' }
         ],
         {},
-        { type: '%', total: 0 }
-      )
+        { type: '%', total: 0 });
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarge(
-        [],
+      this.clientOptions = ringTypeEnlarge([],
         [
           { value: 0, name: '业主报修' },
           { value: 0, name: '内部报修' }
         ],
         {},
-        { type: '%', total: 0 }
-      )
+        { type: '%', total: 0 });
     }
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');

commandCenter/src/views/operationalServices/assembly/scoringOperationPersonnel.vue

@@ -73,7 +73,6 @@ export default {
             }
             this.clientOptions = columnOptionsChartName('(分)', name, Resdate, [], 10);
           } else if (data.length == 0) {
-            debugger
             this.clientOptions = columnOptionsChartName('(分)', ['name1'], [{ name: 'name1', data: 0 }], [], 10);
           }
         })

commandCenter/src/views/operationalServices/assembly/todayTask.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">今日任务</div>
     </div>
@@ -8,41 +8,39 @@
       <!-- <div class="number">{{ houseData[item.fontObj] }}</div>
         <div class="text">{{ item.name }}</div> -->
       <div
-        class="blockmuen"
+        :class="valueClass == 1 ?  'blockmuen' : 'blockmuenEnlarge'"
         :style="item.style"
         v-for="(item, index) in blockArr"
         :key="index"
       >
-        <div v-if="index== 1 ? true :index ==0 ? true :flase ">
+        <div v-if="index == 1 ? true : index == 0 ? true : false">
           <span
             class="text"
-            style="margin-right: 20px;"
-          >{{item.name}}</span>
+            style="margin-right: 20px"
+          >{{ item.name }}</span>
           <span
             class="number"
-            style="font-size: 30px; position: relative;
-    top: 4px;"
-          >{{item.resData}}</span>
+            style="font-size: 30px; position: relative; top: 4px"
+          >{{ item.resData }}</span>
         </div>
         <div v-else>
           <div
             class="number"
-            style="font-size: 20px;
-    margin-bottom: 10px;"
-          >{{item.resData}}</div>
-          <div class="text">{{item.name}}</div>
+            style="font-size: 20px; margin-bottom: 10px"
+          >{{ item.resData }}</div>
+          <div class="text">{{ item.name }}</div>
         </div>
-
       </div>
     </div>
   </div>
 </template>
 <script>
-import index from './allcommunit'
+import index from './allcommunit';
 export default {
   mixins: [index],
   data () {
     return {
+      valueClass: '',
       houseData: [],
       blockArr: [
         {
@@ -98,9 +96,14 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+    } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+    }
     var date = new Date();
     let year = date.getFullYear();
-    let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
+    let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
     let resdate = date.getDate();
     this.mixins_query.date = year + '-' + month + '-' + resdate;
     this.getData();
@@ -109,6 +112,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .modelBlock {
     height: 280px;
     .model-contents {
@@ -138,4 +142,18 @@ export default {
         color: #ffffff;
     }
 }
+
+.modelBlock.enlarge {
+    .blockmuenEnlarge {
+        height: 105px !important;
+        border-radius: rem(10);
+        box-sizing: border-box;
+        padding-left: rem(20);
+        padding-top: rem(20);
+        // cursor: pointer;
+        .number {
+            font-size: rem(30);
+        }
+    }
+}
 </style>

commandCenter/src/views/smallModule/allcommunit.js

@@ -7,7 +7,7 @@ export default {
   },
   computed: {
     //全局社区
-    ...mapState(['homeCommunityAll']),
+    ...mapState(['globalCommunity']),
 
     resize() {
       // 通过scale值来判断窗口是变化
@@ -16,17 +16,21 @@ export default {
   },
   watch: {
     //全局社区接口调用
-    'homeCommunityAll'(n) {
-      this.mixins_query.communityId = n;
-      this.getData();
-    }, resize(va) {
-      // console.log(va);
-    }
+    globalCommunity: {
+      handler(newVal, oldVal) {
+        this.mixins_query.communityId = !!newVal.type ? null : newVal.value.join();
+        this.mixins_query.companyIds = !!newVal.type ? newVal.value.join() : null;
+        this.getData();
+      },
+      deep: true
+    },
   },
   methods: {
   },
   created() {
-    this.mixins_query.communityId = this.homeCommunityAll;
+    const { type, value } = this.globalCommunity
+    this.mixins_query.communityId = !!type ? null : !!value ? value.join() : null;
+    this.mixins_query.companyIds = !!type ? value.join() : null;
     this.getData();
   }
 }

commandCenter/src/views/smallModule/indexOptionChart.js

@@ -1,586 +1,586 @@
-import echarts from 'echarts';
+import echarts from "echarts";
 //从左往右颜色渐变
 export const GradualChange = (color1, color2) => {
-    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-        { offset: 1, color: color1 + '' },
-        { offset: 0, color: color2 + '' || color1 + '' }
-    ]);
+  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+    { offset: 1, color: color1 + '' },
+    { offset: 0, color: color2 + '' || color1 + '' }
+  ]);
 };
 export const getColor = ([color1, color2]) => {
-    // 右 下 左 上
-    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        { offset: 0, color: color1 + '' },
-        { offset: 1, color: color2 + '' || color1 + '' }
-    ]);
-};
+  // 右 下 左 上
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: color1 + '' },
+    { offset: 1, color: color2 + '' || color1 + '' },
+  ])
+}
 
 export const dateType = (date) => {
-    let val = '';
-    if (date) {
-        val = `${date.slice(0, 4)}年${date.slice(4)}月`;
-    } else {
-        val = date;
-    }
-    return val;
-};
+  let val = '';
+  if (date) {
+    val = `${date.slice(0, 4)}年${date.slice(4)}月`
+  } else {
+    val = date
+  }
+  return val
+}
 //折现波浪线颜色渐变
 export const getItemStyle = (c1, c2) => {
-    return {
-        color: {
-            type: 'linear',
+  return {
+    color: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: c1 // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: c2 // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    }
+  };
+}
+export const defaultMonth = ['01', "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+export const defaultDay = ['01', "02", "03", "04", "05", "06", "07"];
+export const defaultName = ['name1', 'name2', 'name3'];
+
+
+const defaultColor = [GradualChange('#22D8FF', '#00B2FF'),
+GradualChange('#F0646C', '#F4994E'),
+GradualChange('#5EEDCC ', '#24C3F1'),
+GradualChange('#7178FF', '#D2A4FF'),
+GradualChange('#884DD2', '#DF63CC')]
+// 饼图
+export const ringType = (
+  color = [],
+  data = [],
+  title = {},
+  legendFcuntion = {}
+) => {
+  let legendFcuntionValue = (v) => {
+    let val = ''
+    data.map(item => {
+      if (item.name == v) {
+        if (legendFcuntion.type == '%') {
+          val = `{a|${v}}· · ·{b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`
+        } else {
+          val = `{a|${v}}· · ·{b|${item.value}}`
+        }
+      }
+    })
+    return val
+
+  }
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 0,
+      top: 20,
+      itemGap: 10,
+      itemWidth: 12, // 图例图形宽度
+      itemHeight: 8,
+      type: 'scroll',
+      formatter: (v) => { return legendFcuntionValue(v) },
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 12,
+            color: '#858892',
+            padding: [0, 5, 0, 0]
+          },
+          b: {
+            fontSize: 14,
+            color: '#fff',
+            padding: [0, 0, 0, 5]
+          }
+        }
+      }
+    },
+    title,
+    color: !!color.length ? color : defaultColor,
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        avoidLabelOverlap: false,
+        center: ['25%', '50%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  }
+}
+
+
+// 折现波浪
+export const discountedWave = (
+  name = "",
+  xAxis = [],
+  series = [],
+  legendShow = false,
+  color = [],
+) => {
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      textStyle: {
+        fontSize: 12,
+        color: "#FFFFFF"
+      },
+      // formatter(param) {
+      //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
+      //   param.forEach(item => {
+      //     el += `<p>
+      //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left, 
+      //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+      //                   <span>${item.seriesName}：${item.value}</span>
+      //                 </p>`;
+      //   });
+      //   el += `</div>`;
+      //   return el;
+      // }
+    },
+    grid: {
+      top: 50,
+      left: 5,
+      bottom: 0,
+      right: 5,
+      containLabel: true
+    },
+
+    legend: {
+      show: legendShow,
+      icon: "circle",
+      x: "right", // 可设定图例在左、右、居中
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20,
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params
+        },
+        color: "#ffffff",
+        margin: 16
+      },
+      data: xAxis,
+      axisPointer: {
+        type: "shadow",
+        shadowStyle: {
+          color: {
+            type: "linear",
             x: 0,
             y: 0,
             x2: 0,
             y2: 1,
             colorStops: [
-                {
-                    offset: 0,
-                    color: c1 // 0% 处的颜色
-                },
-                {
-                    offset: 1,
-                    color: c2 // 100% 处的颜色
-                }
+              {
+                offset: 0,
+                color: "rgba(31,207,245,0)" // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(31,207,245,0.05)"
+              }
             ],
             global: false // 缺省为 false
+          }
         }
-    };
-};
-export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-export const defaultDay = ['01', '02', '03', '04', '05', '06', '07'];
-export const defaultName = ['name1', 'name2', 'name3'];
-
-const defaultColor = [
-    GradualChange('#22D8FF', '#00B2FF'),
-    GradualChange('#F0646C', '#F4994E'),
-    GradualChange('#5EEDCC ', '#24C3F1'),
-    GradualChange('#7178FF', '#D2A4FF'),
-    GradualChange('#884DD2', '#DF63CC')
-];
-// 饼图
-export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
-    let legendFcuntionValue = (v) => {
-        let val = '';
-        data.map((item) => {
-            if (item.name == v) {
-                if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
-                } else {
-                    if (v.length > 5 || v.length == 5) {
-                        let va = v.substr(0, 3) + '…';
-                        val = `{a|${va}} · · · · {b|${item.value}}`;
-                    } else if (item.value.length == 4 || item.value.length > 4) {
-                        let itval = item.value.substr(0, 4) + '…';
-                        val = `{a|${v}} · · · · {b|${itval}}`;
-                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
-                        let va = v.substr(0, 3) + '…';
-                        let itval = item.value.substr(0, 4) + '…';
-                        val = `{a|${va}} · · · · {b|${itval}}`;
-                    } else {
-                        val = `{a|${v}} · · · · {b|${item.value}}`;
-                    }
-                }
-            }
-        });
-        return val;
-    };
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            orient: 'vertical',
-            right: 0,
-            top: 20,
-            itemGap: 10,
-            itemWidth: 12, // 图例图形宽度
-            itemHeight: 8,
-            type: 'scroll',
-            formatter: (v) => {
-                return legendFcuntionValue(v);
-            },
-            textStyle: {
-                rich: {
-                    a: {
-                        fontSize: 12,
-                        color: '#858892',
-                        padding: [0, 5, 0, 0]
-                    },
-                    b: {
-                        fontSize: 14,
-                        color: '#fff',
-                        padding: [0, 0, 0, 5]
-                    }
-                }
-            }
+      }
+    },
+    yAxis: {
+      type: "value",
+      splitNumber: 4,
+      axisLine: {
+        show: false
+      },
+      name: name,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#ffffff",
+        margin: 15,
+        textStyle: {
+          align: "right",
+          baseline: "middle"
+        }
+      },
+      nameLocation: "end",
+      nameTextStyle: { color: "#ffffff", padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: "dotted",
+          width: 0.5
+        }
+      }
+    },
+    series: [
+      {
+        // name: "设备告警",
+        type: "line",
+        smooth: true,
+        symbol: "circle", // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle("#5EEDCC", "#24C3F1"),
+        data: series,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(36,121,253,0.1)"
+              },
+              {
+                offset: 1,
+                color: "rgba(19,194,247,0.3)"
+              }
+            ])
+          }
         },
-        title,
-        color: !!color.length ? color : defaultColor,
-        series: [
-            {
-                type: 'pie',
-                radius: ['55%', '70%'],
-                avoidLabelOverlap: false,
-                center: ['25%', '50%'],
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: data
-            }
-        ]
-    };
+        lineStyle: {
+          width: 1
+        }
+      },
+    ]
+
+  };
+  return option;
 };
 
-// 折现波浪
-export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
-    let option = {
-        tooltip: {
-            trigger: 'axis',
-            textStyle: {
-                fontSize: 12,
-                color: '#FFFFFF'
-            }
-            // formatter(param) {
-            //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
-            //   param.forEach(item => {
-            //     el += `<p>
-            //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
-            //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
-            //                   <span>${item.seriesName}：${item.value}</span>
-            //                 </p>`;
-            //   });
-            //   el += `</div>`;
-            //   return el;
-            // }
-        },
-        grid: {
-            top: 50,
-            left: 5,
-            bottom: 0,
-            right: 5,
-            containLabel: true
-        },
 
-        legend: {
-            show: legendShow,
-            icon: 'circle',
-            x: 'right', // 可设定图例在左、右、居中
-            itemWidth: 8, // 图例图形宽度
-            itemHeight: 8,
-            itemGap: 20
+//柱状日期 
+export const columnOptionsChart = (
+  name = "",
+  xAxis = [],
+  series = [],
+  color = [],
+  barWidth = 6
+) => {
+  let defaultData = [{
+    name: '', type: 'bar', data: [0,0,0,0,0,0,0]
+  }]
+  let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
+  let seriesConfiguration = () => {
+    let seriesData = [];
+    series.map((item, index) => {
+      seriesData.push({
+        name: item.name,
+        type: 'bar',
+        data: item.data,
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[index] || defaultColor[index]),
+          }
         },
-        xAxis: {
-            type: 'category',
-            axisLine: {
-                show: false // 不显示坐标轴
-            },
-            axisTick: {
-                show: false // 不显示坐标轴刻度
-            },
-            axisLabel: {
-                formatter: function (params, index) {
-                    return params;
-                },
-                color: '#ffffff',
-                margin: 16
-            },
-            data: xAxis,
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
-                            },
-                            {
-                                offset: 0.8,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 0.2,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(31,207,245,0.05)'
-                            }
-                        ],
-                        global: false // 缺省为 false
-                    }
-                }
-            }
-        },
-        yAxis: {
-            type: 'value',
-            splitNumber: 4,
-            axisLine: {
-                show: false
-            },
-            name: name,
-            axisTick: {
-                show: false
-            },
-            axisLabel: {
-                color: '#ffffff',
-                margin: 15,
-                textStyle: {
-                    align: 'right',
-                    baseline: 'middle'
-                }
-            },
-            nameLocation: 'end',
-            nameTextStyle: { color: '#ffffff', padding: [0, 0, 0, -40] },
-            splitLine: {
-                lineStyle: {
-                    type: 'dotted',
-                    width: 0.5
-                }
-            }
+        barGap: '100%'
+      })
+    })
+    return seriesData
+  }
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        shadowStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(31,207,245,0)" // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(31,207,245,0.05)"
+              }
+            ],
+            global: false // 缺省为 false
+          }
         },
-        series: [
-            {
-                // name: "设备告警",
-                type: 'line',
-                smooth: true,
-                symbol: 'circle', // 实心
-                symbolSize: 1, // 设定实心点的大小
-                itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
-                data: series,
-                areaStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: 'rgba(36,121,253,0.1)'
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(19,194,247,0.3)'
-                            }
-                        ])
-                    }
-                },
-                lineStyle: {
-                    width: 1
-                }
-            }
-        ]
-    };
-    return option;
-};
-
-//柱状日期
-export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
-    let defaultData = [
-        {
-            name: '',
-            type: 'bar',
-            data: [0, 0, 0, 0, 0, 0, 0]
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
         }
-    ];
-    let defaultColor = [
-        ['#0EAEFF', '#85E9FF'],
-        ['#F0646C', '#F4994E']
-    ];
-    let seriesConfiguration = () => {
-        let seriesData = [];
-        series.map((item, index) => {
-            seriesData.push({
-                name: item.name,
-                type: 'bar',
-                data: item.data,
-                barWidth: barWidth,
-                itemStyle: {
-                    normal: {
-                        barBorderRadius: [15, 15, 0, 0],
-                        color: getColor(color[index] || defaultColor[index])
-                    }
-                },
-                barGap: '100%'
-            });
-        });
-        return seriesData;
-    };
-    let option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
-                            },
-                            {
-                                offset: 0.8,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 0.2,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(31,207,245,0.05)'
-                            }
-                        ],
-                        global: false // 缺省为 false
-                    }
-                },
-                crossStyle: {
-                    shadowBlur: 30,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-            },
-            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
-            textStyle: {
-                fontSize: 12,
-                color: '#FFFFFF'
-            },
-            formatter(param) {
-                let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${param[0].axisValue}</h4>`;
-                param.forEach((item) => {
-                    el += `<p style="text-align: left;">
+      },
+      extraCssText:
+        "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
+      textStyle: {
+        fontSize: 12,
+        color: "#FFFFFF"
+      },
+      formatter(param) {
+        let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${param[0].axisValue}</h4>`;
+        param.forEach(item => {
+          el += `<p style="text-align: left;">
           <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
             ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
                         <span>${item.seriesName}：${item.value}</span>
                       </p>`;
-                });
-                el += `</div>`;
-                return el;
-            }
-        },
-        grid: {
-            top: 40,
-            left: 10,
-            bottom: 0,
-            right: 0,
-            containLabel: true
-        },
-        xAxis: {
-            type: 'category',
-            axisLine: {
-                show: false // 不显示坐标轴
-            },
-            axisTick: {
-                show: false // 不显示坐标轴刻度
-            },
-            axisLabel: {
-                formatter: function (params, index) {
-                    return params;
-                },
-                color: '#9B9DA5',
-                margin: 15
-            },
-            data: !!xAxis.length ? xAxis : defaultDay
-        },
-        yAxis: {
-            type: 'value',
-            splitNumber: 4,
-            name: name,
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLabel: {
-                color: '#9B9DA5',
-                margin: 15,
-                textStyle: {
-                    align: 'right',
-                    baseline: 'middle'
-                }
-            },
-            nameLocation: 'end',
-            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
-            splitLine: {
-                lineStyle: {
-                    type: 'dotted',
-                    width: 0.5
-                }
-            }
-        },
-        legend: {
-            show: false,
-            x: 'right',
-            icon: 'circle',
-            itemWidth: 8, // 图例图形宽度
-            itemHeight: 8,
-            itemGap: 20
+        });
+        el += `</div>`;
+        return el;
+      }
+    },
+    grid: {
+      top: 40,
+      left: 10,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params
         },
-        series: seriesConfiguration() || defaultData
-    };
-    return option;
-};
+        color: "#9B9DA5",
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultDay
+    },
+    yAxis: {
+      type: "value",
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#9B9DA5",
+        margin: 15,
+        textStyle: {
+          align: "right",
+          baseline: "middle"
+        }
+      },
+      nameLocation: "end",
+      nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: "dotted",
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: "circle",
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+}
 
 //柱状name  单柱状
-export const columnOptionsChartName = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
-    let defaultData = [
-        {
-            name: '',
-            type: 'bar',
-            data: []
-        }
-    ];
-    let defaultColor = [
-        ['#0EAEFF', '#85E9FF'],
-        ['#F0646C', '#F4994E']
+export const columnOptionsChartName = (
+  name = "",
+  xAxis = [],
+  series = [],
+  color = [],
+  barWidth = 6
+) => {
+  let defaultData = [{
+    name: '', type: 'bar', data: []
+  }]
+  let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
+  let seriesConfiguration = () => {
+    let seriesData = [
+      {
+        type: 'bar',
+        data: [],
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[0] || defaultColor[0]),
+          }
+        },
+        barGap: '100%'
+      }
     ];
-    let seriesConfiguration = () => {
-        let seriesData = [
-            {
-                type: 'bar',
-                data: [],
-                barWidth: barWidth,
-                itemStyle: {
-                    normal: {
-                        barBorderRadius: [15, 15, 0, 0],
-                        color: getColor(color[0] || defaultColor[0])
-                    }
-                },
-                barGap: '100%'
-            }
-        ];
-        series.map((item, index) => {
-            seriesData[0].data.push(item.data);
-        });
-        return seriesData;
-    };
-    let option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
-                            },
-                            {
-                                offset: 0.8,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 0.2,
-                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(31,207,245,0.05)'
-                            }
-                        ],
-                        global: false // 缺省为 false
-                    }
-                },
-                crossStyle: {
-                    shadowBlur: 30,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-            },
-            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
-            textStyle: {
-                fontSize: 12,
-                color: '#FFFFFF'
-            },
-            formatter(param) {
-                let el = ``;
-                param.forEach((item) => {
-                    el += `<p style="text-align: left;">
+    series.map((item, index) => {
+      seriesData[0].data.push(item.data)
+    })
+    return seriesData
+  }
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        shadowStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(31,207,245,0)" // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(31,207,245,0.05)"
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      extraCssText:
+        "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
+      textStyle: {
+        fontSize: 12,
+        color: "#FFFFFF"
+      },
+      formatter(param) {
+        let el = ``;
+        param.forEach(item => {
+          el += `<p style="text-align: left;">
           <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
             ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
                         <span>${item.name}：${item.value}${name}</span>
                       </p>`;
-                });
-                el += ``;
-                return el;
-            }
-        },
-        grid: {
-            top: 50,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            containLabel: true
-        },
-        xAxis: {
-            type: 'category',
-            axisLine: {
-                show: false // 不显示坐标轴
-            },
-            axisTick: {
-                show: false // 不显示坐标轴刻度
-            },
-            axisLabel: {
-                formatter: function (params, index) {
-                    return params;
-                },
-                color: '#9B9DA5',
-                margin: 15
-            },
-            data: !!xAxis.length ? xAxis : defaultName
-        },
-        yAxis: {
-            type: 'value',
-            splitNumber: 4,
-            name: name,
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLabel: {
-                color: '#9B9DA5',
-                margin: 15,
-                textStyle: {
-                    align: 'right',
-                    baseline: 'middle'
-                }
-            },
-            nameLocation: 'end',
-            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
-            splitLine: {
-                lineStyle: {
-                    type: 'dotted',
-                    width: 0.5
-                }
-            }
-        },
-        legend: {
-            show: false,
-            x: 'right',
-            icon: 'circle',
-            itemWidth: 8, // 图例图形宽度
-            itemHeight: 8,
-            itemGap: 20
+        });
+        el += ``;
+        return el;
+      }
+    },
+    grid: {
+      top: 50,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params
         },
-        series: seriesConfiguration() || defaultData
-    };
-    return option;
-};
+        color: "#9B9DA5",
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultName
+    },
+    yAxis: {
+      type: "value",
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#9B9DA5",
+        margin: 15,
+        textStyle: {
+          align: "right",
+          baseline: "middle"
+        }
+      },
+      nameLocation: "end",
+      nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: "dotted",
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: "circle",
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+}

commandCenter/src/views/videoSurveillance/index.vue

@@ -115,7 +115,6 @@ export default {
         },
 
         checkChange(nodeObj, SelectedObj) {
-            debugger;
             this.videoUrlList = [];
             this.$refs.tree.getCheckedNodes().map((item) => {
                 if (item.type == 'device') {