工作台重新绘制

operationSupport/src/assets/css/public-style.scss

@@ -49,4 +49,4 @@ $base_fontSize: 100;
 }
 /deep/ label[for="companyOrgId"] + .el-form-item__content {
   line-height: 0;
-}
+}

operationSupport/src/components/common/Header.vue

@@ -1,26 +1,22 @@
-<!--
- * @Author: zouwenying
- * @Date: 2020-10-26 10:32:32
- * @LastEditTime: 2021-04-30 14:34:19
- * @LastEditors: zwy
- * @Description: In User Settings Edit
- * @FilePath: \UMIS\src\components\others\Header.vue
--->
 <template>
     <div class="header" :class="[collapse ? 'collapse' : 'expand']">
         <div class="el-fl-left"><v-tags></v-tags></div>
         <div class="header-right">
             <div class="header-user-con">
+                <div class="formulation" @click="formulationToPage">
+                    <img src="@assets/img/formulation/icon_diygzt@2x.png" alt="" />
+                    工作台自拟定 <span class="border"></span>
+                </div>
                 <div>欢迎你,{{ cruUserInfo.username }}</div>
                 <!-- 用户头像 -->
                 <div class="user-avator" @click="editUserInfo">
-                    <i class="iconfont" v-show="!cruUserInfo.photo" v-bottom-txt-tip data-txt="编辑用户信息">&#xe6e8;</i>
+                    <el-tooltip v-show="!cruUserInfo.photo" placement="bottom" content="编辑用户信息">
+                        <img src="@assets/img/formulation/icon_avatar@2x.png" alt="" />
+                    </el-tooltip>
                     <img v-show="cruUserInfo.photo" :src="envConfig.baseImgApi + cruUserInfo.photo" style="object-fit: cover" />
                 </div>
-                <!-- <span style="width: 1px; height: 1rem(6); background: #FFFFFF; opacity: 0.5"></span> -->
                 <div class="message">
                     <span class="main" @click="goMessage('unread')">
-                        <!-- <i class="iconfont btn">&#xe6ea;</i> -->
                         <img src="@assets/img/btn_news.png" alt="" />
                         <span class="iconfont point" v-if="messageNumber"></span>
                     </span>
@@ -29,7 +25,6 @@
                         <ul>
                             <li v-for="(items, index) in messageList" :key="index" @click="toUrl(items.typeId)" style="cursor: pointer">
                                 <img :src="imgList[items.typeId]" style="width: 30px; height: 30px" />
-                                <!-- <img :src="imgList[items.typeId - 1]" style="width: 30px; height: 30px" /> -->
                                 <div>
                                     <span class="cont">【{{ items.shortName }}】{{ items.messageContent }}</span>
                                     <span class="time">{{ items.dateCreate }}</span>
@@ -46,14 +41,11 @@
                         <el-button type="text" class="more" disabled>查看更多</el-button>
                     </div>
                 </div>
-                <!-- <span style="width: 1px; height: 1rem(6); background: #FFFFFF; opacity: 0.5"></span> -->
                 <span class="border"></span>
                 <div class="logout" @click="logOut">
                     <el-tooltip placement="bottom" content="退出">
-                        <i  class="zoniot_font zoniot-icon-tuichu"></i>
-                        <!-- <img src="@/assets/img/btn_quit.png" class="tab_head-right" @click="logOut" /> -->
+                        <i class="zoniot_font zoniot-icon-tuichu"></i>
                     </el-tooltip>
-                    <!-- <i class="iconfont" v-bottom-txt-tip data-txt="退出">&#xe6e9;</i> -->
                 </div>
             </div>
         </div>
@@ -74,20 +66,6 @@ export default {
                 10: require('@/assets/img/icon_msg9.png'),
                 11: require('@/assets/img/icon_msg9.png'),
                 13: require('@/assets/img/icon_msg9.png')
-
-                //     [
-                //     require('@/assets/img/icon_msg1.png'),
-                //     require('@/assets/img/icon_msg2.png'),
-                //     require('@/assets/img/icon_msg3.png'),
-                //     require('@/assets/img/icon_msg4.png'),
-                //     require('@/assets/img/icon_msg5.png'),
-                //     require('@/assets/img/icon_msg6.png'),
-                //     require('@/assets/img/icon_msg7.png'),
-                //     require('@/assets/img/icon_msg8.png'),
-                //     require('@/assets/img/icon_msg9.png'),
-                //     require('@/assets/img/icon_msg9.png'),
-                //     require('@/assets/img/icon_msg9.png')
-                // ]
             }
         };
     },
@@ -110,6 +88,11 @@ export default {
                 path: '/msg'
             });
         },
+        formulationToPage() {
+            this.$router.push({
+                path: '/editWorkbench'
+            });
+        },
         // 退出登录
         logOut() {
             var access_token = localStorage.getItem('SC_token');
@@ -323,6 +306,22 @@ export default {
 .header-right {
     padding-right: rem(20);
     color: rgba(255, 255, 255, 0.6);
+    display: flex;
+    .formulation {
+        height: rem(46);
+        line-height: rem(46);
+        cursor: pointer;
+        img {
+            width: rem(20);
+            height: rem(20);
+            vertical-align: middle;
+            margin-right: rem(10);
+        }
+        .border {
+            margin: 0 rem(20);
+            display: inline-block;
+        }
+    }
     .name-txt {
         font-size: rem(12);
         font-family: PingFangSC-Regular, PingFang SC;
@@ -336,10 +335,10 @@ export default {
 }
 .logout {
     margin-left: rem(20);
-   i{
-       color: white;
-       font-size: rem(20);
-   }
+    i {
+        color: white;
+        font-size: rem(20);
+    }
 }
 .iconfont {
     font-size: rem(20);

operationSupport/src/components/common/Home.vue

@@ -11,7 +11,7 @@
         <v-sidebar></v-sidebar>
         <div class="dmp-content" :style="{ width: collapse ? 'calc(100% - 85px)' : 'calc(100% - 220px)' }">
             <v-head></v-head>
-            <div class="main-wrap">
+            <div class="main-wrap" :class="routePath ? 'newWorkBench' : ''">
                 <transition name="move" mode="out-in">
                     <!-- <keep-alive :include="tagsList">
                             <router-view></router-view>
@@ -51,6 +51,9 @@ export default {
         },
         popupsList() {
             return this.$store.getters.getPopups;
+        },
+        routePath() {
+            return this.$route.path == '/newWorkBench/index' ||  this.$route.path ==  '/editWorkbench';
         }
     },
     methods: {
@@ -90,22 +93,6 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-// .dmp-content{
-//     flex-direction: column;
-//     .dmp-main{
-//         background-color: #f4f7f9;
-//         position: relative;
-//         overflow: hidden;
-//         padding: 0;
-//         .main-wrap{
-//             width: 100%;
-// 			height: 100%;
-// 			position: absolute;
-// 			overflow: auto;
-// 			padding: 20px;
-//         }
-//     }
-// }
 .dmp-content {
     flex: 1;
     display: flex;
@@ -120,4 +107,8 @@ export default {
     padding: 20px 20px 10px 20px;
     height: 100%;
 }
+.newWorkBench {
+    background-color: #2c354a;
+    overflow: hidden;
+}
 </style>

operationSupport/src/components/common/echart.vue

@@ -0,0 +1,67 @@
+<template>
+    <div :id="'echarts-' + _uid"></div>
+</template>
+<script>
+// import echarts from "echarts";
+export default {
+    name: 'zz-echart',
+    props: ['option'],
+    data() {
+        return {
+            echart: ''
+        };
+    },
+    mounted() {
+        this.initEchart();
+    },
+
+    computed: {
+        resize() {
+            // 通过scale值来判断窗口是变化
+            return this.$store.getters['getScale'];
+        },
+        collapse() {
+            return this.$store.getters['getCollapse'];
+        }
+    },
+    methods: {
+        initEchart() {
+           this.echart = echarts.init(document.getElementById('echarts-' + this._uid));
+            if (this.option) {
+                this.echart.setOption(this.option);
+                this.echart.on('rendered', () => {
+                    this.$emit('finish', this.echart);
+                });
+                this.echart.on('mouseover', (p) => {
+                    this.$emit('mouseover', this.echart, p);
+                });
+            }
+        }
+    },
+    watch: {
+        resize() {
+            this.echart.resize();
+        },
+        collapse(){
+           this.echart.resize();
+        },
+        option: {
+            deep: true,
+            handler(n) {
+                this.echart.dispose();
+                // this.echart.setOption(n);
+                this.initEchart();
+            }
+        }
+    },
+    destroyed() {
+      this.echart.dispose();
+    }
+};
+</script>
+<style lang="stylus" scoped>
+[id^='echarts-'] {
+  width: 100%;
+  height: calc(100% - 2px);
+}
+</style>

operationSupport/src/components/common/index.js

@@ -20,6 +20,7 @@ import xkUpload from './XKUpload';
 import select from './select';
 import buildingTree from './buildingTree';
 import treeHouse from './treeHouse.vue';
+import echart from "./echart";
 // 注册全局组件
 export default {
     install() {
@@ -37,7 +38,8 @@ export default {
             xkUpload,
             select,
             buildingTree,
-            treeHouse
+            treeHouse,
+            echart
         ];
         _.each(components, (v) => {
             Vue.component(v.name, v);

operationSupport/src/main.js

@@ -45,6 +45,10 @@ Vue.use(directived);
 Vue.use(ElementUI, {
     size: 'small'
 });
+window.onresize = () => {
+    let size = document.body.clientWidth / 1920;
+    store.commit("setScale", size);
+};
 let defaultPath = '';
 Vue.prototype.routerLoad = {
     findOne(arr) {

operationSupport/src/router/dynamicMuen.js

@@ -55,6 +55,12 @@ const staticMuen = [
         meta: { title: '测试' },
         name: 'shannon-transfer'
     },
+    {
+        path: '/editWorkbench',
+        component: () => import(/* webpackChunkName: "404" */ '@views/newWorkBench/editWorkbench.vue'),
+        meta: { title: '编辑工作台' },
+        name: 'editWorkbench'
+    },
     {
         path: '*',
         redirect: '/404'

operationSupport/src/store/store.js

@@ -46,7 +46,9 @@ const store = new Vuex.Store({
         //公司部门
         companyArray: [],
         departmentArray: [],
-        communityArray: []
+        communityArray: [],
+        // 当前缩放比
+        scale: document.body.clientWidth / 1920,
     },
     getters: {
         getTheme(state) {
@@ -106,7 +108,10 @@ const store = new Vuex.Store({
         },
         getCommunityArray(state) {
             return state.communityArray;
-        }
+        },
+        getScale(state) {
+            return state.scale;
+        },
     },
     mutations: {
         setSearchPointInfo(state, data) {
@@ -168,7 +173,10 @@ const store = new Vuex.Store({
         },
         setCommunityArray(state, data) {
             state.communityArray = data;
-        }
+        },
+        setScale(state, data) {
+            state.scale = data;
+        },
     },
     actions: {
         tags(ctx, data) {

operationSupport/src/views/newWorkBench/EachartOptions.js

@@ -0,0 +1,417 @@
+const getColor = ([color1, color2]) => {
+  // 右 下 左 上
+  let colorVa =
+    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: color1 + '' },
+      { offset: 1, color: color2 + '' || color1 + '' },
+    ])
+  return colorVa
+}
+const defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
+
+const dateType = (date) => {
+  let val = '';
+  if (date) {
+    val = `${date.slice(0, 4)}年${date.slice(4)}月`
+  } else {
+    val = date
+  }
+  return val
+}
+export const columnOptionsChart = (
+  name = "",
+  xAxis = [],
+  series = [],
+  color = [],
+  barWidth = 6
+) => {
+  let defaultData = [{
+    name: '', type: 'bar', data: []
+  }]
+  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>${dateType(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.seriesName == '环比增长' ? (item.value * 100 || 0) + '%' : item.value || 0}</span>
+                      </p>`;
+        });
+        el += `</div>`;
+        return el;
+      }
+    },
+    grid: {
+      top: 30,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params.slice(4) + '月';
+        },
+        color: "#9B9DA5",
+        margin: 15
+      },
+      data: xAxis
+    },
+    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: {
+      x: 'right',
+      icon: "circle",
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+}
+
+
+function getItemStyle(c1, c2) {
+  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 clientOptionsChart = (
+  title = "",
+  xAxis = [],
+  series = [],
+  color = [],
+  data = ""
+) => {
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      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"><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: 40,
+      left: 0,
+      bottom: 6,
+      right: 0,
+      containLabel: true
+    },
+    legend: {
+      icon: "circle",
+      data: ["正常", "异常", "未启用", "报废"],
+      x: "right", // 可设定图例在左、右、居中
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params.slice(4) + '月';
+        },
+        color: "#9B9DA5",
+        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: 6,
+      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, -50] },
+      splitLine: {
+        lineStyle: {
+          type: "dotted",
+          width: 0.2
+        }
+      }
+    },
+    series: [
+      {
+        name: "正常",
+        type: "line",
+        smooth: true,
+        symbol: "circle", // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle("#5EEDCC", "#24C3F1"),
+        data: data.normal,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(36,121,253,0.08)"
+              },
+              {
+                offset: 1,
+                color: "rgba(19,194,247,0.05)"
+              }
+            ])
+          }
+        },
+        lineStyle: {
+          width: 1
+        }
+      },
+      {
+        name: "异常",
+        type: "line",
+        smooth: true,
+        symbol: "circle", // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle("#FE9156", "#FE5760"),
+        data: data.abnormal,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(254,87,96,0.08)"
+              },
+              {
+                offset: 1,
+                color: "rgba(254,145,86,0.05)"
+              }
+            ])
+          }
+        },
+        lineStyle: {
+          width: 1
+        }
+      },
+      {
+        name: "未启用",
+        type: "line",
+        smooth: true,
+        symbol: "circle", // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle("#7178FF", "#D2A4FF"),
+        data: data.unused,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(133,65,249,0.08)"
+              },
+              {
+                offset: 1,
+                color: "rgba(227,79,153,0.05)"
+              }
+            ])
+          }
+        },
+        lineStyle: {
+          width: 1
+        }
+      },
+      {
+        name: "报废",
+        type: "line",
+        smooth: true,
+        symbol: "circle", // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle("#E34F99", "#8541F9"),
+        data: data.scrap,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(133,65,249,0.08)"
+              },
+              {
+                offset: 1,
+                color: "rgba(227,79,153,0.05)"
+              }
+            ])
+          }
+        },
+      }
+    ]
+  };
+  return option;
+};

operationSupport/src/views/newWorkBench/components/Columnar.vue

@@ -0,0 +1,106 @@
+
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">住户性别占比</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { clientOptionsChart } from '../EachartOptions.js';
+let timeDay = ['202201', '202202', '202203', '202204', '202205', '202206', '202207', '202208', '202209', '202210', '202211', '202212'];
+export default {
+    props: ['dataObj'],
+    data() {
+        return {
+            typeTableArr: [
+                {
+                    label: '全部',
+                    value: ''
+                },
+                {
+                    label: '房间表',
+                    value: 1
+                },
+                {
+                    label: '公摊表',
+                    value: 2
+                }
+            ],
+            mixins_query: {
+                communityId: ''
+            },
+           clientOptions: clientOptionsChart('555', timeDay, [], [], { xAxis: [], normal: [10], abnormal: [], unused: [], scrap: [10,20,15,30,20,5] }),
+            clientData: {
+                xAxis: [],
+                series: []
+            },
+        };
+    },
+    created() {},
+    mounted() {},
+    computed: {},
+    methods: {}
+};
+</script>
+<style scoped lang="scss">
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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);
+        margin-bottom: rem(15);
+        .saveColumn-select {
+            width: rem(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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.text {
+                // float: left;
+            }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                display: inline-block;
+                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;
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/commonFunctions.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">常用功能</div>
+            <div class="buttons"><span class="text">自拟定</span> <span class="triangle"></span></div>
+        </div>
+        <div class="model-content">
+            <div class="blockItem" v-for="(item, index) in blockArr" :key="index">
+                <img :src="item.imgPng" />
+                <span>{{ item.lableTitle }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            blockArr: [
+                {
+                    id: 'cheweiguanli',
+                    imgPng: require('@assets/img/homePage/icon_cheweiguanli@2x.png'),
+                    lableTitle: '车位管理'
+                },
+                {
+                    id: 'shequguanli',
+                    imgPng: require('@assets/img/homePage/icon_shequguanli@2x.png'),
+                    lableTitle: '社区管理'
+                },
+                {
+                    id: 'loudongguanli',
+                    imgPng: require('@assets/img/homePage/icon_loudongguanli@2x.png'),
+                    lableTitle: '楼栋管理'
+                },
+                {
+                    id: 'fangwuguanli',
+                    imgPng: require('@assets/img/homePage/icon_fangwuguanli@2x.png'),
+                    lableTitle: '房屋管理'
+                }
+            ]
+        };
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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);
+        .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.text {
+                // float: left;
+            }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                display: inline-block;
+                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;
+        padding-top: rem(43);
+        font-size: 12px;
+        .blockItem {
+            text-align: center;
+            cursor: pointer;
+            img {
+                width: rem(54);
+                height: rem(54);
+            }
+            span {
+                display: block;
+                margin-top: rem(20);
+                opacity: 0.5;
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/complaintsSuggestions.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">投诉建议类型分布</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+            <div class="totals">
+                <span>65191</span>
+                <span class="numbers">总人数</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            communityList: [],
+            mixins_query: {
+                communityId: ''
+            },
+            clientOptions: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 10,
+                    top: 80,
+                    itemGap: 10,
+                    itemWidth: 12, // 图例图形宽度
+                    itemHeight: 8,
+                    formatter: (v) => {
+                        return `{a|${v}} · · · · · · {b|555}`;
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 12,
+                                color: '#858892',
+                                padding: [0, 5, 0, 0]
+                            },
+                            b: {
+                                fontSize: 14,
+                                color: '#fff',
+                                padding: [0, 0, 0, 5]
+                            }
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '50%'],
+                        avoidLabelOverlap: false,
+                        center: ['20%', '50%'],
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: 1048, name: '业主' },
+                            { value: 735, name: '亲属' }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                }
+            });
+        }
+    },
+    created() {
+        this.communityNameList();
+        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
+        // this.mixins_query = {};
+        // this.mixins_search();
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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;
+        .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);
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/discount.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="echart-block">
+        <div class="echart_title">
+            <div>设备状态</div>
+            <el-select v-model="equipmentStatus" clearable @change="changeSelect">
+                <el-option v-for="(item, index) in tableArr" :key="index" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="flex">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { clientOptionsChart } from '../EachartOptions';
+let timeDay = ['202201', '202202', '202203', '202204', '202205', '202206', '202207', '202208', '202209', '202210', '202211', '202212'];
+export default {
+    components: {},
+    data() {
+        return {
+            strokeWidth: 15, // 线条宽度
+            trailWidth: 15, // 背景线条宽度
+            trailColor: '#F5F7F7', // 背景线条宽度
+
+            equipmentStatus: '',
+            tableArr: [
+                {
+                    label: '全部',
+                    value: ''
+                },
+                {
+                    label: '水表',
+                    value: 1
+                },
+                {
+                    label: '电表',
+                    value: 2
+                }
+            ],
+            clientOptions: clientOptionsChart('555', timeDay, [], [], { xAxis: [], normal: [10], abnormal: [], unused: [], scrap: [10] }),
+        };
+    },
+    created() {},
+    mounted() {},
+    methods: {
+        changeSelect() {
+            this.getData();
+        },
+        getData() {
+            let seachData = {
+                categoryId: this.equipmentStatus,
+                communityId: this.$parent.communityId
+            };
+            this.clientData = {
+                xAxis: [],
+                normal: [],
+                abnormal: [],
+                unused: [],
+                scrap: []
+            };
+            this.$http
+                .post('/sc-energy/overview/deviceState', seachData)
+                .then(({ status, data, msg }) => {
+                    if (status === 0 && data.length !== 0) {
+                        data.map((item, index) => {
+                            this.clientData.xAxis.push(item.date);
+                            this.clientData.normal.push(item.normal);
+                            this.clientData.abnormal.push(item.abnormal);
+                            this.clientData.unused.push(item.unused);
+                            this.clientData.scrap.push(item.scrap);
+                        });
+                        this.clientOptions = clientOptionsChart('', this.clientData.xAxis, [], [], this.clientData);
+                        this.equipmentCube = data[data.length - 1];
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+</style>

operationSupport/src/views/newWorkBench/components/equipmentStatistics.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">设备设施统计</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { columnOptionsChart } from '../EachartOptions.js';
+let timeDay = ['202201', '202202', '202203', '202204', '202205', '202206', '202207', '202208', '202209', '202210', '202211', '202212'];
+export default {
+    props: ['dataObj'],
+    data() {
+        return {
+            communityList: [],
+            mixins_query: {
+                communityId: ''
+            },
+            clientOptions: columnOptionsChart('(分)', timeDay, [{ data: [10] }], [], 10)
+        };
+    },
+    created() {
+        this.communityNameList();
+    },
+    mounted() {},
+    computed: {},
+    methods: {
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                }
+            });
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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);
+        margin-bottom: rem(15);
+        .saveColumn-select {
+            width: rem(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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.text {
+                // float: left;
+            }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                display: inline-block;
+                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;
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/householdGender.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">住户性别占比</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+            <div class="totals">
+                <span>65191</span>
+                <span class="numbers">总人数</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            communityList: [],
+            mixins_query: {
+                communityId: ''
+            },
+            clientOptions: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 10,
+                    top: 80,
+                    itemGap: 10,
+                    itemWidth: 12, // 图例图形宽度
+                    itemHeight: 8,
+                    formatter: (v) => {
+                        return `{a|${v}} · · · · · · {b|555}`;
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 12,
+                                color: '#858892',
+                                padding: [0, 5, 0, 0]
+                            },
+                            b: {
+                                fontSize: 14,
+                                color: '#fff',
+                                padding: [0, 0, 0, 5]
+                            }
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '50%'],
+                        avoidLabelOverlap: false,
+                        center: ['20%', '50%'],
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: 1048, name: '业主' },
+                            { value: 735, name: '亲属' }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                }
+            });
+        }
+    },
+    created() {
+        this.communityNameList();
+        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
+        // this.mixins_query = {};
+        // this.mixins_search();
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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.text {
+                // float: left;
+            }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                display: inline-block;
+                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;
+        .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);
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/householdIdentity.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">住户身份占比</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+            <div class="totals">
+                <span>65191</span>
+                <span class="numbers">总人数</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            communityList: [],
+            mixins_query: {
+                communityId: ''
+            },
+            clientOptions: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 10,
+                    top: 80,
+                    itemGap: 10,
+                    itemWidth: 12, // 图例图形宽度
+                    itemHeight: 8,
+                    formatter: (v) => {
+                        return `{a|${v}} · · · · · · {b|555}`;
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 12,
+                                color: '#858892',
+                                padding: [0, 5, 0, 0]
+                            },
+                            b: {
+                                fontSize: 14,
+                                color: '#fff',
+                                padding: [0, 0, 0, 5]
+                            }
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '50%'],
+                        avoidLabelOverlap: false,
+                        center: ['20%', '50%'],
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: 1048, name: '业主' },
+                            { value: 735, name: '亲属' },
+                            { value: 580, name: '租客' }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                }
+            });
+        }
+    },
+    created() {
+        this.communityNameList();
+        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
+        // this.mixins_query = {};
+        // this.mixins_search();
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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.text {
+                // float: left;
+            }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                display: inline-block;
+                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;
+        .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);
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/index.js

@@ -0,0 +1,39 @@
+// map中间地图data_id:1,
+// commonFunctions常用功能data_id:1,
+// Columnar住户性别占比data_id:1,
+// complaintsSuggestions投诉建议类型分布data_id:1,
+// discount设备状态data_id:1,
+// householdGender住户性别占比data_id:1,
+// householdIdentity住户身份占比data_id:1,
+// equipmentStatistics设备设施统计data_id:1,
+// rentalAndSaleRate房屋租售率data_id:1,
+
+
+import maps from '@views/newWorkBench/components/map.vue';
+import commonFunctions from '@views/newWorkBench/components/commonFunctions.vue';
+import householdIdentity from '@views/newWorkBench/components/householdIdentity.vue';
+import householdGender from '@views/newWorkBench/components/householdGender.vue';
+import Columnar from '@views/newWorkBench/components/Columnar.vue';
+import equipmentStatistics from '@views/newWorkBench/components/equipmentStatistics.vue';
+import rentalAndSaleRate from '@views/newWorkBench/components/rentalAndSaleRate.vue';
+import discount from '@views/newWorkBench/components/discount.vue';
+import complaintsSuggestions from '@views/newWorkBench/components/complaintsSuggestions.vue';
+
+
+export default {
+  components: {
+    //小组件模块
+    maps,
+    commonFunctions,
+    householdIdentity,
+    householdGender,
+    Columnar,
+    equipmentStatistics,
+    rentalAndSaleRate,
+    discount,
+    complaintsSuggestions,
+  },
+  data() {
+    return {}
+  }
+};

operationSupport/src/views/newWorkBench/components/map.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="mapItems">
+        <div class="topSelect">
+            <div></div>
+        </div>
+        <div class="mapInit" id="mapInit"></div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            map: '',
+            placeSearch: '',
+            marker: '',
+            addressName: '', //地址查询名称
+            poisArray: [],
+            thisMapPot: {}
+        };
+    },
+    mounted() {},
+    computed: {},
+    methods: {
+        init() {
+            let _this = this;
+            this.map = new AMap.Map('mapInit', {
+                // center: this.params.communityLoc.length == 2 ? this.params.communityLoc : '',
+                resizeEnable: true, //是否监控地图容器尺寸变化
+                zoom: 16, //初始化地图层级
+                mapStyle: 'amap://styles/darkblue'
+            });
+            // this.map.on('complete', () => {
+            //     if (!!_this.params.location) {
+            //         let arr = this.params.location.split(',');
+            //         this.addIcon({ lng: arr[0], lat: arr[1] });
+            //     }
+            // });
+
+            // this.map.on('click', this.mapClick);
+            // this.placeSearch = new AMap.PlaceSearch({
+            //     map: _this.map,
+            //     city: '广东', //020
+            //     citylimit: true, //定点范围
+            //     autoFitView: true
+            // });
+            // AMap.event.addListener(this.placeSearch, 'markerClick', (e) => {
+            //     this.thisMapPot = e.event.lnglat;
+            //     this.$message.success('选择成功');
+            // });
+        },
+        addIcon(e) {
+            if (!!this.marker) {
+                this.map.remove(this.marker);
+                this.marker = '';
+            }
+            this.thisMapPot = e;
+            let loc = [e.lng, e.lat];
+            this.marker = new AMap.Marker({
+                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+                position: loc,
+                map: this.map
+            });
+            this.marker.setLabel({
+                offset: new AMap.Pixel(-50, 35),
+                content: !!this.params.data.pointName ? `巡更名称：${this.params.data.pointName}` : `巡更经纬度：${e.lng}，${e.lat}`
+            });
+            this.map.setFitView();
+        }
+    },
+    destroyed() {
+        this.map && this.map.destroy();
+        this.marker = '';
+    },
+    created() {
+        this.$nextTick(() => {
+            this.init();
+        });
+    }
+};
+</script>
+<style scoped lang="scss">
+@import '@assets/css/public-style.scss';
+.mapItems {
+    height: 100%;
+    position: relative;
+    .topSelect {
+        position: absolute;
+        top: rem(15);
+        left: 0;
+        padding: 0 rem(15);
+        width: 100%;
+    }
+}
+#mapInit {
+    width: 100%;
+    height: 100%;
+    /deep/ .amap-marker-label {
+        border: 0 none;
+        background-color: #fff;
+        white-space: nowrap;
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+    }
+    /deep/ .amap-logo {
+        display: none !important;
+    }
+}
+.my-autocomplete {
+    li {
+        line-height: normal;
+        padding: 7px;
+
+        .name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            span {
+                font-size: 12px;
+                color: #b4b4b4;
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/components/rentalAndSaleRate.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">房屋租售率</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+            </el-select>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+            <div class="totals">
+                <span>65191</span>
+                <span class="numbers">房屋总数</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            communityList: [],
+            mixins_query: {
+                communityId: ''
+            },
+            clientOptions: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 10,
+                    top: 80,
+                    itemGap: 10,
+                    itemWidth: 12, // 图例图形宽度
+                    itemHeight: 8,
+                    formatter: (v) => {
+                        return `{a|${v}} · · · · · · {b|555}`;
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 12,
+                                color: '#858892',
+                                padding: [0, 5, 0, 0]
+                            },
+                            b: {
+                                fontSize: 14,
+                                color: '#fff',
+                                padding: [0, 0, 0, 5]
+                            }
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '50%'],
+                        avoidLabelOverlap: false,
+                        center: ['20%', '50%'],
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: 1048, name: '业主' },
+                            { value: 735, name: '亲属' }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                }
+            });
+        }
+    },
+    created() {
+        this.communityNameList();
+        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
+        // this.mixins_query = {};
+        // this.mixins_search();
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    .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(120);
+            margin-left: rem(20);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                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;
+        .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);
+                white-space: nowrap;
+            }
+        }
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="workbench">
+        <div class="ComponentSave">
+            <div class="saveColumn">
+                <span class="title">工作台-自拟定</span>
+                <el-select v-model="model" clearable @change="changeSelect" class="saveColumn-select">
+                    <el-option v-for="(item, index) in modelSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
+                </el-select>
+            </div>
+            <div class="saveColumn-buttons">
+                <el-button>取消</el-button>
+                <el-button type="primary">保存并使用</el-button>
+            </div>
+        </div>
+        <div class="operation">
+            <div class="leftAssembly">
+                <el-select v-model="componentsValue" clearable @change="changeSelect" class="saveColumn-select">
+                    <el-option
+                        v-for="(item, index) in componentsSelect"
+                        :key="index"
+                        :label="item.lable"
+                        :value="item.model_id"
+                    ></el-option>
+                </el-select>
+                <div class="componentsBlock">
+                    <template v-for="(item, index) in componentsArrar">
+                        <div class="moveBlock" :data-id="item.data_id" @mousedown="moveBlock($event, item.data_id)" :key="index">
+                            <div class="moveBlock_titles">{{ item.title }}</div>
+                            <div class="moveBlock_img">
+                                <img :src="item.imgPng" :alt="item.title" />
+                            </div>
+                            <div class="moveBlock_icon">
+                                <img :src="item.imgIcon" :alt="item.title" />
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <model-one v-if="model == 1"></model-one>
+            <model-two v-if="model == 2"></model-two>
+            <model-three v-if="model == 3"></model-three>
+            <model-four v-if="model == 4"></model-four>
+        </div>
+    </div>
+</template>
+        
+<script>
+import workcommonFcuntion from './template/index.js';
+export default {
+    mixins: [workcommonFcuntion],
+    data() {
+        return {
+            model: 1,
+            modelSelect: [
+                {
+                    model_id: 1,
+                    lable: '模板一'
+                },
+                {
+                    model_id: 2,
+                    lable: '模板二'
+                },
+                {
+                    model_id: 3,
+                    lable: '模板三'
+                },
+                {
+                    model_id: 4,
+                    lable: '模板四'
+                }
+            ],
+            componentsSelect: [
+                {
+                    model_id: 0,
+                    lable: '全部'
+                }
+            ],
+            componentsArrar: [
+                {
+                    data_id: 1,
+                    title: '高德地图',
+                    imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
+                },
+                {
+                    data_id: 2,
+                    title: '社区总体情况统计',
+                    imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 3,
+                    title: '常用功能',
+                    imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+                {
+                    data_id: 4,
+                    title: '运维人员评分系统',
+                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 5,
+                    title: '巡更任务完成率',
+                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+                {
+                    data_id: 6,
+                    title: '设备告警趋势',
+                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                },
+                {
+                    data_id: 7,
+                    title: '销售漏斗',
+                    imgPng: require('@assets/img/formulation/img_loudou@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
+                },
+                {
+                    data_id: 8,
+                    title: '待收款账户',
+                    imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
+                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
+                }
+            ],
+            componentsValue: 0,
+            isEdit: false,
+            dataId: null
+        };
+    },
+    watch: {
+        $route(to, from) {
+            if (to.query.editWorkbench) {
+                this.isEdit = true;
+            }
+        }
+    },
+    methods: {
+        moveBlock(e, num) {
+            this.dataId = num;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+$BackColor: #171f32;
+.overflowHidden {
+    overflow: hidden;
+}
+.list_border {
+    border: 1px solid $BackColor;
+    border-radius: 4px;
+}
+.mr10 {
+    margin: rem(10);
+}
+.workbench {
+    background: #2c354a;
+    height: 100%;
+    min-height: rem(700);
+    overflow: auto;
+    color: white;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .ComponentSave {
+        height: rem(60);
+        min-height: 60px;
+        background: $BackColor;
+        border-radius: 4px;
+        margin-bottom: rem(20);
+        padding: 0 rem(20);
+        display: flex;
+        justify-content: space-between;
+        .saveColumn {
+            display: flex;
+            align-items: center;
+            .saveColumn-select {
+                margin-left: rem(20);
+                /deep/ .el-input__inner {
+                    background: transparent;
+                    color: white;
+                }
+            }
+        }
+        .saveColumn-buttons {
+            display: flex;
+            align-items: center;
+            /deep/ .el-button {
+                padding: rem(8) rem(20);
+            }
+            /deep/ .el-button--default {
+                background: transparent;
+                border-color: #0eaeff;
+                color: white;
+                &:active {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+    .operation {
+        height: rem(794);
+        min-height: 794px;
+        display: flex;
+        justify-content: space-between;
+        .leftAssembly {
+            width: 174px;
+            background: $BackColor;
+            border-radius: 4px;
+            padding: rem(20) rem(8) rem(20) rem(20);
+            .saveColumn-select {
+                margin-bottom: rem(30);
+                margin-right: rem(12);
+                /deep/ .el-input__inner {
+                    background: transparent;
+                    color: white;
+                    border-color: rgba(255, 255, 255, 0.2);
+                }
+            }
+            // 块级模块
+            .componentsBlock {
+                height: calc(100% - #{rem(62)});
+                overflow-y: auto;
+                overflow-x: hidden;
+                &::-webkit-scrollbar {
+                    z-index: 11;
+                    width: rem(4);
+                }
+                &::-webkit-scrollbar-track,
+                &::-webkit-scrollbar-corner {
+                    background: transparent;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    width: rem(4);
+                    background: rgba(250, 250, 250, 0.09);
+                }
+                &::-webkit-scrollbar-track-piece {
+                    background: transparent;
+                    width: rem(4);
+                }
+                .moveBlock {
+                    font-size: 12px;
+                    width: rem(132);
+                    height: rem(132);
+                    background: rgba(0, 0, 0, 0.1);
+                    box-sizing: border-box;
+                    border-radius: 4px;
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    padding: rem(10);
+                    margin-bottom: rem(20);
+                    text-align: center;
+                    position: relative;
+                    cursor: move;
+                    .moveBlock_titles {
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        width: 100%;
+                    }
+                    .moveBlock_img {
+                        width: rem(60);
+                        margin: auto;
+                        img {
+                            width: 100%;
+                            margin-top: rem(20);
+                        }
+                    }
+                    .moveBlock_icon {
+                        position: absolute;
+                        right: 0;
+                        bottom: 0;
+                        height: rem(20);
+                        img {
+                            width: rem(28);
+                            height: rem(20);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
+      

operationSupport/src/views/newWorkBench/index.vue

@@ -1,34 +1,85 @@
 <template>
     <div class="workbench">
         <div class="list_1x1"></div>
+        <div class="list_2x2"></div>
+        <div class="list_1x1"></div>
+        <div class="list_1x1"></div>
+        <div class="list_1x1"></div>
+        <div class="list_1x2"></div>
+        <!-- <using ref="waterusing" :dataObj="dataWater" /> -->
+        <!-- <discount ref="waterusing" /> -->
     </div>
 </template>
         
 <script>
-export default {};
+import using from './components/Columnar.vue';
+import discount from './components/discount.vue';
+
+export default {
+    components: {
+        using,
+        discount
+    },
+    data() {
+        return {
+            dataWater: {
+                type: 1,
+                title: '服务满意度趋势',
+                block: ['水表总数(个)', '本月用水量(吨)'],
+                echartText: {
+                    unitName: '(吨)',
+                    typeName: '用水量'
+                }
+            },
+            isEdit: false
+        };
+    },
+    watch: {
+        $route(to, from) {
+            if (to.query.editWorkbench) {
+                this.isEdit = true;
+            }
+        }
+    }
+};
 </script>
 <style lang="scss" scoped>
 @import '@assets/css/public-style.scss';
+@mixin inline_block {
+    display: inline-block;
+    background: #171f32;
+    border-radius: rem(4);
+}
+//宽度 间距 $mr 平均分布 $speed倍速
+@mixin average($mr: 20, $speed: 2) {
+    width: calc((100% - #{rem($mr)}) / #{$speed});
+}
 .workbench {
     background: #2c354a;
     height: 100%;
+    height: rem(874);
+    display: flex;
+    flex-flow: wrap;
+    align-content: flex-start;
+    column-gap: rem(20);
+    row-gap: rem(20);
     .list_1x1 {
-        width: calc((100% - #{rem(60)}) / 4);
-        height: rem(238);
-        display: inline-block;
-        background: #171f32;
+        @include average(60, 4);
+        max-height: rem(278);
+        @include inline_block;
+        height: calc((100% - #{rem(40)}) / 3);
     }
     .list_1x2 {
-        width: calc(100% - #{rem(20)});
-        height: rem(238);
-        display: inline-block;
-        background: #171f32;
+        @include average(20, 2);
+        max-height: rem(278);
+        @include inline_block;
+        height: calc((100% - #{rem(40)}) / 3);
     }
     .list_2x2 {
-        width: calc(100% - #{rem(20)});
-        height: rem(794);
-        display: inline-block;
-        background: #171f32;
+        @include average(20, 2);
+        max-height: rem(576);
+        @include inline_block;
+        height: calc((100% - #{rem(40)}) / 3 * 2);
     }
 }
 </style>

operationSupport/src/views/newWorkBench/style.scss

@@ -0,0 +1,50 @@
+@import "@assets/css/public-style.scss";
+$totalColor: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+$normalColor: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+$abnormalColor: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+$unusedColor: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+$scrapColor: linear-gradient(135deg, #884dd2 0%, #df63cc 100%);
+.totalBack {
+  background: $totalColor !important;
+  color: white;
+}
+.normalBack {
+  background: $normalColor !important;
+  color: white;
+}
+.abnormalBack {
+  background: $abnormalColor !important;
+  color: white;
+}
+.unusedBack {
+  background: $unusedColor !important;
+  color: white;
+}
+.scrapBack {
+  background: $scrapColor !important;
+  color: white;
+}
+.echart-block {
+  width: 100%;
+  height: 100%;
+  padding: rem(15) rem(20) rem(20) rem(20);
+  box-sizing: border-box;
+  border-radius: rem(4);
+  .echart_title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+    line-height: 32px;
+    box-sizing: border-box;
+    color: #ffffff80;
+    /deep/ .el-input__inner{
+      background: transparent;
+      border-color: #ffffff80;
+    }
+  }
+  .flex{
+    margin-top: rem(20);
+    height: calc(100% - #{rem(70)});
+  }
+}

operationSupport/src/views/newWorkBench/template/index.js

@@ -0,0 +1,16 @@
+import modelOne from '@views/newWorkBench/template/styleOne.vue';
+import modelTwo from '@views/newWorkBench/template/styleTwo.vue';
+import modelThree from '@views/newWorkBench/template/styleThree.vue';
+import modelFour from '@views/newWorkBench/template/styleFour.vue';
+
+export default {
+  components: {
+    modelOne,
+    modelTwo,
+    modelThree,
+    modelFour
+  },
+  data() {
+    return {}
+  }
+};

operationSupport/src/views/newWorkBench/template/style.scss

@@ -0,0 +1,10 @@
+@import '@assets/css/public-style.scss';
+$BackColor: #171f32;
+@mixin moveHover {
+    box-shadow: inset 0px 1px 50px 0px rgba(14, 174, 255, 0.5);
+    border: 1px dashed #1396dc;
+}
+.moveHover {
+    box-shadow: inset 0px 1px 50px 0px rgba(14, 174, 255, 0.5);
+    border: 1px dashed #1396dc;
+}

operationSupport/src/views/newWorkBench/template/styleFour.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="contentShow" @mouseover="mousemove">
+        <div class="list_1-1 overflowHidden list_border mr10">
+            <common-functions></common-functions>
+        </div>
+        <div class="list_1_2-2 overflowHidden list_border mr10" data-id="1">
+           <maps></maps>
+        </div>
+        <div class="list_1-3 overflowHidden list_border mr10">
+            <equipment-statistics></equipment-statistics>
+        </div>
+        <div class="list_2-1 overflowHidden list_border mr10">
+            <household-Identity></household-Identity>
+        </div>
+        <div class="list_2-3 overflowHidden list_border mr10">
+            <rental-and-sale-rate></rental-and-sale-rate>
+        </div>
+        <div class="list_3-1 overflowHidden list_border mr10">
+            <household-gender></household-gender>
+        </div>
+        <div class="list_3-2 overflowHidden list_border mr10">
+            <columnar></columnar>
+        </div>
+        <div class="list_3-3 overflowHidden list_border mr10"></div>
+    </div>
+</template>
+<script>
+import comp from '@views/newWorkBench/components/index.js';
+export default {
+    mixins: [comp],
+    data() {
+        return {};
+    },
+    // watch:{
+    //   dataId(va){
+    //     console.log(va)
+    //   }
+    // },
+    created() {},
+    mounted() {},
+    computed: {},
+    methods: {
+        mousemove(e) {
+            // console.log(e.target);
+            // console.log(this.dataId);
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.contentShow {
+    border: 1px solid $BackColor;
+    width: calc(100% - 194px);
+    border-radius: 4px;
+    padding: rem(10);
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 0px;
+    height: 100%;
+    .list_1-1 {
+        grid-area: 1 / 1 / 1 / 1;
+    }
+    .list_1_2-2 {
+        grid-area: 1 / 2 / span 2 / 2;
+        // @include moveHover;
+    }
+    .list_1-3 {
+        grid-area: 1 / 3 / 1 / 3;
+    }
+    .list_2-1 {
+        grid-area: 2 / 1 / 2 / 1;
+    }
+    .list_2-3 {
+        grid-area: 2 / 3 / 2 / 3;
+    }
+    .list_3-1 {
+        grid-area: 3 / 1 / 3 / 1;
+    }
+    .list_3-2 {
+        grid-area: 3 / 2 / 3 / 2;
+    }
+    .list_3-3 {
+        grid-area: 3 / 3 / 3 / 3;
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/template/styleOne.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="contentShow">
+        <div class="twoBottoms">
+            <div class="list_1-1 overflowHidden list_border mr10">
+                <common-functions></common-functions>
+            </div>
+            <div class="list_2-1 overflowHidden list_border mr10"></div>
+            <div class="list_1_2-2 overflowHidden list_border mr10">
+                <maps></maps>
+            </div>
+            <div class="list_1-3 overflowHidden list_border mr10"></div>
+            <div class="list_2-3 overflowHidden list_border mr10">
+                <rental-and-sale-rate></rental-and-sale-rate>
+            </div>
+        </div>
+        <div class="bottoms" style="display: flex">
+            <div class="list_3-1 overflowHidden list_border mr10">
+                <equipment-statistics></equipment-statistics>
+            </div>
+            <div class="list_3-2 overflowHidden list_border mr10">
+                <columnar></columnar>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// import mapInit from '@views/newWorkBench/components/map.vue';
+// import commonFunctions from '@views/newWorkBench/components/commonFunctions.vue';
+// import householdIdentity from '@views/newWorkBench/components/householdIdentity.vue';
+// import householdGender from '@views/newWorkBench/components/householdGender.vue';
+// import Columnar from '@views/newWorkBench/components/Columnar.vue';
+// import equipmentStatistics from '@views/newWorkBench/components/equipmentStatistics.vue';
+// import rentalAndSaleRate from '@views/newWorkBench/components/rentalAndSaleRate.vue';
+
+import comp from '@views/newWorkBench/components/index.js';
+export default {
+    mixins: [comp],
+    // components: {
+    //     mapInit,
+    //     commonFunctions,
+    //     householdIdentity,
+    //     householdGender,
+    //     Columnar,
+    //     equipmentStatistics,
+    //     rentalAndSaleRate
+    // },
+    data() {
+        return {};
+    },
+    created() {},
+    mounted() {},
+    computed: {},
+    methods: {}
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.contentShow {
+    border: 1px solid $BackColor;
+    width: calc(100% - 194px);
+    border-radius: 4px;
+    padding: rem(10);
+    height: 100%;
+    .twoBottoms {
+        height: calc(calc(100% / 3) * 2);
+        display: grid;
+        grid-template-columns: 1fr 3fr 1fr;
+        grid-template-rows: 1fr 1fr;
+    }
+    .list_1-1 {
+        grid-area: 1 / 1 / 1 / 1;
+    }
+    .list_1_2-2 {
+        grid-area: 1 / 2 / span 2 / 2;
+    }
+    .list_1-3 {
+        grid-area: 1 / 3 / 1 / 3;
+    }
+    .list_2-1 {
+        grid-area: 2 / 1 / 2 / 1;
+    }
+    .list_2-3 {
+        grid-area: 2 / 3 / 2 / 3;
+    }
+    .bottoms {
+        height: calc(calc(100% / 3) * 1 - 20px);
+    }
+    .list_3-1 {
+        width: calc(50% - #{rem(20)});
+        height: 100%;
+    }
+    .list_3-2 {
+        width: calc(50% - #{rem(20)});
+        height: 100%;
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/template/styleThree.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="contentShow" @mouseover="mousemove">
+        <div class="list_1-1 overflowHidden list_border mr10">
+            <common-functions></common-functions>
+        </div>
+        <div class="list_1_2-2 overflowHidden list_border mr10" data-id="1">
+          <maps></maps>
+        </div>
+        <div class="list_1-3 overflowHidden list_border mr10">
+            <equipment-statistics></equipment-statistics>
+        </div>
+        <div class="list_2-1 overflowHidden list_border mr10">
+            <household-Identity></household-Identity>
+        </div>
+        <div class="list_2-3 overflowHidden list_border mr10">
+            <rental-and-sale-rate></rental-and-sale-rate>
+        </div>
+        <div class="list_3-1 overflowHidden list_border mr10">
+            <household-gender></household-gender>
+        </div>
+        <div class="list_3-2 overflowHidden list_border mr10">
+            <columnar></columnar>
+        </div>
+        <div class="list_3-3 overflowHidden list_border mr10"></div>
+    </div>
+</template>
+<script>
+import comp from '@views/newWorkBench/components/index.js';
+export default {
+    mixins: [comp],
+    data() {
+        return {};
+    },
+
+    created() {},
+    mounted() {},
+    computed: {},
+    methods: {
+        mousemove(e) {}
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.contentShow {
+    border: 1px solid $BackColor;
+    width: calc(100% - 194px);
+    border-radius: 4px;
+    padding: rem(10);
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 0px;
+    height: 100%;
+    .list_1-1 {
+        grid-area: 1 / 1 / 1 / 1;
+    }
+    .list_1_2-2 {
+        grid-area: 1 / 2 / span 2 / 2;
+        // @include moveHover;
+    }
+    .list_1-3 {
+        grid-area: 1 / 3 / 1 / 3;
+    }
+    .list_2-1 {
+        grid-area: 2 / 1 / 2 / 1;
+    }
+    .list_2-3 {
+        grid-area: 2 / 3 / 2 / 3;
+    }
+    .list_3-1 {
+        grid-area: 3 / 1 / 3 / 1;
+    }
+    .list_3-2 {
+        grid-area: 3 / 2 / 3 / 2;
+    }
+    .list_3-3 {
+        grid-area: 3 / 3 / 3 / 3;
+    }
+}
+</style>

operationSupport/src/views/newWorkBench/template/styleTwo.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="contentShow" @mouseover="mousemove">
+        <div class="list_1-1 overflowHidden list_border mr10">
+            <common-functions></common-functions>
+        </div>
+        <div class="list_1_2-2 overflowHidden list_border mr10">
+            <maps></maps>
+        </div>
+        <div class="list_1-3 overflowHidden list_border mr10">
+            <equipment-statistics></equipment-statistics>
+        </div>
+        <div class="list_2-1 overflowHidden list_border mr10">
+            <household-Identity></household-Identity>
+        </div>
+        <div class="list_2-3 overflowHidden list_border mr10">
+            <rental-and-sale-rate></rental-and-sale-rate>
+        </div>
+        <div class="list_3-1 overflowHidden list_border mr10">
+            <household-gender></household-gender>
+        </div>
+        <div class="list_3-2 overflowHidden list_border mr10">
+            <columnar></columnar>
+        </div>
+        <div class="list_3-3 overflowHidden list_border mr10"></div>
+    </div>
+</template>
+<script>
+import comp from '@views/newWorkBench/components/index.js';
+export default {
+    mixins: [comp],
+    data() {
+        return {};
+    },
+    created() {},
+    mounted() {},
+    computed: {},
+    methods: {
+        mousemove(e) {
+            // console.log(e.target);
+            // console.log(this.dataId);
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+
+.contentShow {
+    border: 1px solid $BackColor;
+    width: calc(100% - 194px);
+    border-radius: 4px;
+    padding: rem(10);
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 0px;
+    height: 100%;
+    .list_1-1 {
+        grid-area: 1 / 1 / 1 / 1;
+    }
+    .list_1_2-2 {
+        grid-area: 1 / 2 / span 2 / 2;
+        // @include moveHover;
+    }
+    .list_1-3 {
+        grid-area: 1 / 3 / 1 / 3;
+    }
+    .list_2-1 {
+        grid-area: 2 / 1 / 2 / 1;
+    }
+    .list_2-3 {
+        grid-area: 2 / 3 / 2 / 3;
+    }
+    .list_3-1 {
+        grid-area: 3 / 1 / 3 / 1;
+    }
+    .list_3-2 {
+        grid-area: 3 / 2 / 3 / 2;
+    }
+    .list_3-3 {
+        grid-area: 3 / 3 / 3 / 3;
+    }
+}
+</style>