部分首页组件

operationSupport/src/views/newWorkBench/EachartOptions.js

@@ -106,7 +106,7 @@ export const columnOptionsChart = (
       }
     },
     grid: {
-      top: 30,
+      top: 50,
       left: 0,
       bottom: 0,
       right: 0,

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

@@ -1,162 +1,103 @@
 <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">
+            <div class="model-title-text">投诉建议类型</div>
+            <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select" @change="getData">
                 <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
             </el-select>
+            <el-date-picker
+                value-format="yyyyMM"
+                v-model="mixins_query.date"
+                type="month"
+                placeholder="选择月"
+                class="saveColumn-select"
+                @change="getData"
+            >
+            </el-date-picker>
         </div>
         <div class="model-content">
             <zz-echart :option="clientOptions" class="chart"></zz-echart>
             <div class="totals">
-                <span>65191</span>
+                <span>{{ total }}</span>
                 <span class="numbers">总人数</span>
             </div>
         </div>
     </div>
 </template>
 <script>
+import { GradualChange, ringType } from './indexOptionChart';
 export default {
     data() {
         return {
-            communityList: [],
             mixins_query: {
-                communityId: ''
+                communityId: '',
+                date: ''
             },
-            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: '亲属' }
-                        ]
-                    }
+            total: 0,
+            clientOptions: ringType(
+                [
+                    GradualChange('#22D8FF', '#00B2FF'),
+                    GradualChange('#F0646C', '#F4994E'),
+                    GradualChange('#5EEDCC ', '#24C3F1'),
+                    GradualChange('#7178FF', '#D2A4FF'),
+                    GradualChange('#884DD2', '#DF63CC')
+                ],
+                [
+                    { value: 0, name: '扰民投诉' },
+                    { value: 0, name: '物业投诉' },
+                    { value: 0, name: '公共卫生' },
+                    { value: 0, name: '安全建议' },
+                    { value: 0, name: '其他' }
                 ]
-            }
+            )
         };
     },
+    computed: {
+        communityList() {
+            return this.$store.getters['getAreaSelect'];
+        }
+    },
     methods: {
-        communityNameList() {
-            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+        getData() {
+            this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0) {
-                    this.communityList = data;
+                    this.clientOptions = ringType(
+                        [
+                            GradualChange('#22D8FF', '#00B2FF'),
+                            GradualChange('#F0646C', '#F4994E'),
+                            GradualChange('#5EEDCC ', '#24C3F1'),
+                            GradualChange('#7178FF', '#D2A4FF'),
+                            GradualChange('#884DD2', '#DF63CC')
+                        ],
+                        this.eachartObj(data)
+                    );
                 }
             });
+        },
+        eachartObj(data) {
+            this.total = data.total;
+            let typeName = {
+                1: '扰民投诉',
+                2: '物业投诉',
+                3: '公共卫生',
+                4: '安全建议',
+                5: '其他'
+            };
+            let newData = [];
+            for (let a in data.datas) {
+                newData.push({
+                    value: data.datas[a],
+                    name: typeName[a]
+                });
+            }
+            return newData;
         }
     },
     created() {
-        this.communityNameList();
-        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
-        // this.mixins_query = {};
-        // this.mixins_search();
+        this.getData();
     }
 };
 </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);
-            }
-        }
-    }
-}
+@import './style.scss';
 </style>

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

@@ -1,76 +1,50 @@
 <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>
+    <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" @change="getData">
+                <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
             </el-select>
         </div>
-        <div class="flex">
+        <div class="model-content">
             <zz-echart :option="clientOptions" class="chart"></zz-echart>
         </div>
     </div>
 </template>
 <script>
-import { clientOptionsChart } from '../EachartOptions';
+import { discountedWave } from './indexOptionChart';
 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] }),
+            clientOptions: {},
+            mixins_query: {
+                communityId: ''
+            }
         };
     },
-    created() {},
-    mounted() {},
+    created() {
+        this.getData();
+    },
+    computed: {
+        communityList() {
+            return this.$store.getters['getAreaSelect'];
+        }
+    },
     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)
+                .get('/sc-community/statisticWarnTrend', this.mixins_query)
                 .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);
+                    if (status == 0) {
+                        console.log(data);
+                        let dateTime = [],
+                            valueArr = [];
+                        data.map((item) => {
+                            dateTime.push(item.date);
+                            valueArr.push(item.data);
                         });
-                        this.clientOptions = clientOptionsChart('', this.clientData.xAxis, [], [], this.clientData);
-                        this.equipmentCube = data[data.length - 1];
+                        this.clientOptions = discountedWave('(次)', dateTime, valueArr);
                     }
                 })
                 .catch((err) => {});
@@ -79,5 +53,5 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '../style.scss';
+@import './style.scss';
 </style>

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

@@ -1,12 +1,14 @@
 // map中间地图data_id:1,
 // commonFunctions常用功能data_id:1,
 // Columnar住户性别占比data_id:1,
-// complaintsSuggestions投诉建议类型分布data_id:1,
-// discount设备状态data_id:1,
+// complaintsSuggestions投诉建议类型分布data_id:1,  OK
+// discount设备状态data_id:1,OK
 // householdGender住户性别占比data_id:1,
 // householdIdentity住户身份占比data_id:1,
 // equipmentStatistics设备设施统计data_id:1,
-// rentalAndSaleRate房屋租售率data_id:1,
+// rentalAndSaleRate房屋租售率data_id:1, OK 百分率未完成
+// satisfaction 服务满意度趋势 data_id:1
+
 
 
 import maps from '@views/newWorkBench/components/map.vue';
@@ -18,6 +20,8 @@ import equipmentStatistics from '@views/newWorkBench/components/equipmentStatist
 import rentalAndSaleRate from '@views/newWorkBench/components/rentalAndSaleRate.vue';
 import discount from '@views/newWorkBench/components/discount.vue';
 import complaintsSuggestions from '@views/newWorkBench/components/complaintsSuggestions.vue';
+import satisfaction from '@views/newWorkBench/components/satisfaction.vue';
+
 
 
 export default {
@@ -32,6 +36,7 @@ export default {
     rentalAndSaleRate,
     discount,
     complaintsSuggestions,
+    satisfaction
   },
   data() {
     return {}

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

@@ -0,0 +1,249 @@
+//从左往右颜色渐变
+export const GradualChange = (color1, color2) => {
+  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+    { offset: 1, color: color1 + '' },
+    { offset: 0, color: color2 + '' || color1 + '' }
+  ]);
+};
+
+const dateType = (date) => {
+  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",
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: c1 // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: c2 // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    }
+  };
+}
+const defaultColor = [GradualChange('#22D8FF', '#00B2FF'),
+GradualChange('#F0646C', '#F4994E'),
+GradualChange('#5EEDCC ', '#24C3F1'),
+GradualChange('#7178FF', '#D2A4FF'),
+GradualChange('#884DD2', '#DF63CC')]
+export const ringType = (
+  color = [],
+  data = []
+) => {
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 80,
+      itemGap: 10,
+      itemWidth: 12, // 图例图形宽度
+      itemHeight: 8,
+      type: 'scroll',
+      formatter: (v) => { return `{a|${v}} · · · · · · {b|0}` },
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 12,
+            color: '#858892',
+            padding: [0, 5, 0, 0]
+          },
+          b: {
+            fontSize: 14,
+            color: '#fff',
+            padding: [0, 0, 0, 5]
+          }
+        }
+      }
+    },
+    color: 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.slice(5)
+        },
+        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: 4,
+      axisLine: {
+        show: false
+      },
+      name: name,
+      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.2
+        }
+      }
+    },
+    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;
+};

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

@@ -2,92 +2,89 @@
     <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-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select" @change="getData">
                 <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>{{ total }}</span>
                 <span class="numbers">房屋总数</span>
             </div>
         </div>
     </div>
 </template>
 <script>
+import { GradualChange, ringType } from './indexOptionChart';
 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: '亲属' }
-                        ]
-                    }
+            total: 0,
+            clientOptions: ringType(
+                [
+                    GradualChange('#22D8FF', '#00B2FF'),
+                    GradualChange('#F0646C', '#F4994E'),
+                    GradualChange('#5EEDCC ', '#24C3F1'),
+                    GradualChange('#7178FF', '#D2A4FF'),
+                    GradualChange('#884DD2', '#DF63CC')
+                ],
+                [
+                    { value: 0, name: '扰民投诉' },
+                    { value: 0, name: '物业投诉' },
+                    { value: 0, name: '公共卫生' },
+                    { value: 0, name: '安全建议' },
+                    { value: 0, name: '其他' }
                 ]
-            }
+            )
         };
     },
+    computed: {
+        communityList() {
+            return this.$store.getters['getAreaSelect'];
+        }
+    },
     methods: {
-        communityNameList() {
-            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+        getData() {
+            this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0) {
-                    this.communityList = data;
+                    this.clientOptions = ringType(
+                        [
+                            GradualChange('#22D8FF', '#00B2FF'),
+                            GradualChange('#F0646C', '#F4994E'),
+                            GradualChange('#5EEDCC ', '#24C3F1'),
+                            GradualChange('#7178FF', '#D2A4FF'),
+                            GradualChange('#884DD2', '#DF63CC')
+                        ],
+                        this.eachartObj(data)
+                    );
                 }
             });
+        },
+        eachartObj(data) {
+            this.total = data.total;
+            let typeName = {
+                1: '已租',
+                2: '未租'
+            };
+            let newData = [];
+            for (let a in data.datas) {
+                if (a !== '0') {
+                    newData.push({
+                        value: data.datas[a],
+                        name: typeName[a]
+                    });
+                }
+            }
+            return newData;
         }
     },
     created() {
-        this.communityNameList();
-        // this.mixins_dataUrl = '/sc-community/assets/garage/page';
-        // this.mixins_query = {};
-        // this.mixins_search();
+        // this.mixins_query.date = this.$moment().format('YYYY');
+        this.getData();
     }
 };
 </script>

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

@@ -0,0 +1,75 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">服务满意度趋势</div>
+            <div class="model-title-right">
+                <el-select v-model="mixins_query.communityId" placeholder="全部社区" clearable class="saveColumn-select" @change="getData">
+                    <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+                </el-select>
+                <el-select v-model="mixins_query.type" placeholder="所有服务" class="saveColumn-select">
+                    <el-option label="运维工单" :value="1"></el-option>
+                    <el-option label="投诉建议" :value="2"></el-option>
+                </el-select>
+                <el-date-picker
+                    value-format="yyyy"
+                    v-model="mixins_query.date"
+                    type="year"
+                    placeholder="选择年"
+                    class="saveColumn-select"
+                    @change="getData"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </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 {
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                date: '',
+                type: ''
+            },
+            clientOptions: columnOptionsChart('(分)', timeDay, [{ data: [10] }], [], 10)
+        };
+    },
+    computed: {
+        communityList() {
+            return this.$store.getters['getAreaSelect'];
+        }
+    },
+    methods: {
+        getData() {
+            this.$http.get('/sc-community/statisticServiceTrends', this.mixins_query).then(({ data, msg, status }) => {
+                if (status == 0) {
+                    console.log(data);
+                }
+            });
+        }
+    },
+    created() {
+        this.mixins_query.date = this.$moment().format('YYYY');
+        this.getData();
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: rem(20);
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,67 @@
+@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(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;
+    .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);
+      }
+    }
+  }
+}

operationSupport/src/views/newWorkBench/editWorkbench.vue

@@ -140,7 +140,17 @@ export default {
     methods: {
         moveBlock(e, num) {
             this.dataId = num;
+        },
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.$store.commit('setAreaSelect', data);
+                }
+            });
         }
+    },
+    created() {
+        this.communityNameList();
     }
 };
 </script>

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

@@ -1,5 +1,12 @@
-@import '@assets/css/public-style.scss';
+@import "@assets/css/public-style.scss";
 $BackColor: #171f32;
+.list_border {
+    border: 1px solid $BackColor;
+    border-radius: 4px;
+}
+.mr10 {
+    margin: rem(10);
+}
 @mixin moveHover {
     box-shadow: inset 0px 1px 50px 0px rgba(14, 174, 255, 0.5);
     border: 1px dashed #1396dc;
@@ -7,4 +14,4 @@ $BackColor: #171f32;
 .moveHover {
     box-shadow: inset 0px 1px 50px 0px rgba(14, 174, 255, 0.5);
     border: 1px dashed #1396dc;
-}
+}

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

@@ -4,7 +4,9 @@
             <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_2-1 overflowHidden list_border mr10">
+                <complaints-suggestions></complaints-suggestions>
+            </div>
             <div class="list_1_2-2 overflowHidden list_border mr10">
                 <maps></maps>
             </div>
@@ -15,35 +17,18 @@
         </div>
         <div class="bottoms" style="display: flex">
             <div class="list_3-1 overflowHidden list_border mr10">
-                <equipment-statistics></equipment-statistics>
+                <satisfaction></satisfaction>
             </div>
             <div class="list_3-2 overflowHidden list_border mr10">
-                <columnar></columnar>
+                <discount></discount>
             </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 {};
     },
@@ -64,7 +49,7 @@ export default {
     .twoBottoms {
         height: calc(calc(100% / 3) * 2);
         display: grid;
-        grid-template-columns: 1fr 3fr 1fr;
+        grid-template-columns: 2fr 4fr 2fr;
         grid-template-rows: 1fr 1fr;
     }
     .list_1-1 {