首页模块一二完成

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

@@ -6,16 +6,16 @@
                 <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.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 v-model="mixins_query.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
+                    <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
                 </el-select>
                 <el-date-picker
-                    value-format="yyyyMM"
-                    v-model="mixins_query.date"
+                    value-format="yyyy-MM"
+                    v-model="date"
                     type="month"
                     placeholder="选择月"
                     class="saveColumn-select"
-                    @change="getData"
+                    @change="changeTime"
                     :clearable="false"
                 >
                 </el-date-picker>
@@ -28,10 +28,10 @@
                 :strokeColor="strokeColor"
                 :trailWidth="trailWidth"
                 :trailColor="trailColor"
-                :percent="dataObj.received"
+                :percent="dataObj.receivedAmount"
             >
                 <span class="ashText" style="font-size: 14px">收款率</span>
-                <span> {{ (dataObj.received / dataObj.receivableAmount) * 100 }}%</span>
+                <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
             </process-circle>
             <div class="textAmount">
                 <div class="listAmount">
@@ -40,7 +40,7 @@
                 </div>
                 <div class="listAmount">
                     <div class="listText">已收金额</div>
-                    <div class="listNumber">{{ dataObj.received }}</div>
+                    <div class="listNumber">{{ dataObj.receivedAmount }}</div>
                 </div>
                 <div class="listAmount">
                     <div class="listText">未收金额</div>
@@ -66,10 +66,33 @@ export default {
                 chargeType: '',
                 date: ''
             },
+            date: '',
+            amountType: [
+                {
+                    value: 1,
+                    name: '物业费'
+                },
+                {
+                    value: 2,
+                    name: '水费'
+                },
+                {
+                    value: 3,
+                    name: '电费'
+                },
+                {
+                    value: 4,
+                    name: '车位费'
+                },
+                {
+                    value: 5,
+                    name: '二次供水费'
+                }
+            ],
             dataObj: {
-                received: 5,
-                receivableAmount: 100,
-                uncollected: 95
+                receivedAmount: 0,
+                receivableAmount: 0,
+                uncollected: 0
             }
         };
     },
@@ -81,14 +104,29 @@ export default {
     methods: {
         getData() {
             this.$http.get('/sc-community/statisticsCollectionRate', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0) {
-                    console.log(data);
+                if (status == 0 && !!data) {
+                    this.dataObj = {
+                        receivableAmount: data.receivableAmount,
+                        receivedAmount: data.receivedAmount,
+                        uncollected: data.receivableAmount - data.receivedAmount || 0
+                    };
+                } else {
+                    this.dataObj = {
+                        receivableAmount: 0,
+                        receivedAmount: 0,
+                        uncollected: 0
+                    };
                 }
             });
+        },
+        changeTime(v) {
+            this.mixins_query.date = v + '-01';
+            this.getData();
         }
     },
     created() {
-        this.mixins_query.date = this.$moment().format('YYYYMM');
+        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+        this.date = this.$moment().format('YYYY-MM');
         this.getData();
     }
 };

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

@@ -8,12 +8,12 @@
                     <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="yyyy"
-                    v-model="mixins_query.date"
+                    value-format="yyyy-MM"
+                    v-model="date"
                     type="month"
-                    placeholder="选择年月"
+                    placeholder="选择月"
                     class="saveColumn-select"
-                    @change="getData"
+                    @change="changeTime"
                     :clearable="false"
                 >
                 </el-date-picker>
@@ -26,7 +26,40 @@
 </template>
 <script>
 import { discountedWave } from './indexOptionChart';
-let timeDay = ['202201', '202202', '202203', '202204', '202205', '202206', '202207', '202208', '202209', '202210', '202211', '202212'];
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+let dataDay = [
+    '01-01',
+    '01-02',
+    '01-03',
+    '01-04',
+    '01-05',
+    '01-06',
+    '01-07',
+    '01-08',
+    '01-09',
+    '01-10',
+    '01-11',
+    '01-12',
+    '01-13',
+    '01-14',
+    '01-15',
+    '01-16',
+    '01-17',
+    '01-18',
+    '01-19',
+    '01-20',
+    '01-21',
+    '01-22',
+    '01-23',
+    '01-24',
+    '01-25',
+    '01-26',
+    '01-27',
+    '01-28',
+    '01-29',
+    '01-30',
+    '01-31'
+];
 export default {
     props: ['dataObj'],
     data() {
@@ -35,11 +68,13 @@ export default {
                 communityId: '',
                 date: ''
             },
-            clientOptions: discountedWave('(次)', timeDay, [0,10,11])
+            date: '',
+            clientOptions: discountedWave('(次)', dataDay, dataArr)
         };
     },
     created() {
-        this.mixins_query.date = this.$moment().format('YYYYMM');
+        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+        this.date = this.$moment().format('YYYY-MM');
         this.getData();
     },
     computed: {
@@ -63,6 +98,10 @@ export default {
                     }
                 })
                 .catch((err) => {});
+        },
+        changeTime(v) {
+            this.mixins_query.date = v + '-01';
+            this.getData();
         }
     }
 };

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

@@ -7,12 +7,13 @@
                     <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"
+                    value-format="yyyy-MM"
+                    v-model="date"
                     type="month"
                     placeholder="选择月"
                     class="saveColumn-select"
-                    @change="getData"
+                    @change="changeTime"
+                    :clearable="false"
                 >
                 </el-date-picker>
             </div>
@@ -27,7 +28,7 @@
     </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { ringType } from './indexOptionChart';
 export default {
     data() {
         return {
@@ -35,15 +36,10 @@ export default {
                 communityId: '',
                 date: ''
             },
+            date: '',
             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: '物业投诉' },
@@ -63,19 +59,14 @@ export default {
         getData() {
             this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0) {
-                    this.clientOptions = ringType(
-                        [
-                            GradualChange('#22D8FF', '#00B2FF'),
-                            GradualChange('#F0646C', '#F4994E'),
-                            GradualChange('#5EEDCC ', '#24C3F1'),
-                            GradualChange('#7178FF', '#D2A4FF'),
-                            GradualChange('#884DD2', '#DF63CC')
-                        ],
-                        this.eachartObj(data)
-                    );
+                    this.clientOptions = ringType([], this.eachartObj(data));
                 }
             });
         },
+        changeTime(v) {
+            this.mixins_query.date = v + '-01';
+            this.getData();
+        },
         eachartObj(data) {
             this.total = data.total;
             let typeName = {
@@ -96,6 +87,8 @@ export default {
         }
     },
     created() {
+        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+        this.date = this.$moment().format('YYYY-MM');
         this.getData();
     }
 };

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

@@ -13,10 +13,44 @@
 </template>
 <script>
 import { discountedWave } from './indexOptionChart';
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+let dataDay = [
+    '01-01',
+    '01-02',
+    '01-03',
+    '01-04',
+    '01-05',
+    '01-06',
+    '01-07',
+    '01-08',
+    '01-09',
+    '01-10',
+    '01-11',
+    '01-12',
+    '01-13',
+    '01-14',
+    '01-15',
+    '01-16',
+    '01-17',
+    '01-18',
+    '01-19',
+    '01-20',
+    '01-21',
+    '01-22',
+    '01-23',
+    '01-24',
+    '01-25',
+    '01-26',
+    '01-27',
+    '01-28',
+    '01-29',
+    '01-30',
+    '01-31'
+];
 export default {
     data() {
         return {
-            clientOptions: {},
+            clientOptions: discountedWave('(次)', dataDay, dataArr),
             mixins_query: {
                 communityId: ''
             }

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

@@ -42,57 +42,5 @@ export default {
 };
 </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;
-    }
-}
+@import './style.scss';
 </style>

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

@@ -16,14 +16,7 @@
     </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
-const colors = [
-    GradualChange('#22D8FF', '#00B2FF'),
-    GradualChange('#F0646C', '#F4994E'),
-    GradualChange('#5EEDCC ', '#24C3F1'),
-    GradualChange('#7178FF', '#D2A4FF'),
-    GradualChange('#884DD2', '#DF63CC')
-];
+import { ringType } from './indexOptionChart';
 export default {
     data() {
         return {
@@ -32,7 +25,7 @@ export default {
             },
             total: 0,
             clientOptions: ringType(
-                colors,
+                [],
                 [
                     { value: 0, name: '男' },
                     { value: 0, name: '女' }
@@ -51,10 +44,10 @@ export default {
         getData() {
             this.$http.get('/sc-community/statisticUserGender', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0 && !!data.datas) {
-                    this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: data.total });
+                    this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
                 } else {
                     this.clientOptions = ringType(
-                        colors,
+                        [],
                         [
                             { value: 0, name: '男' },
                             { value: 0, name: '女' }
@@ -88,74 +81,5 @@ export default {
 };
 </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);
-            }
-        }
-    }
-}
+@import './style.scss';
 </style>

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

@@ -1,16 +1,15 @@
 // map中间地图data_id:1,
 // commonFunctions常用功能data_id:1,
-// Columnar住户性别占比data_id:1,
 // complaintsSuggestions投诉建议类型分布data_id:1,  OK
 // complaintsAndSuggestions投诉建议数量趋势data_id:1,  OK
 
-// discount设备状态data_id:1,OK
-// householdGender住户性别占比data_id:1,
-// householdIdentity住户身份占比data_id:1,
+// discount设备告警趋势data_id:1,OK
+// householdGender住户性别占比data_id:1, OK
+// householdIdentity住户身份占比data_id:1, OK
 // equipmentStatistics设备设施统计data_id:1,
-// rentalAndSaleRate房屋租售率data_id:1, OK 百分率未完成
-// satisfaction 服务满意度趋势 data_id:1
-// collectionRate 收款率分析 data_id:1
+// rentalAndSaleRate房屋租售率data_id:1, OK
+// satisfaction 服务满意度趋势 data_id:1 OK
+// collectionRate 收款率分析 data_id:1 OK
 // ownerApproval 业主审批 data_id:1
 // pendingComplaints 待处理投诉 data_id:1
 

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

@@ -5,8 +5,15 @@ export const GradualChange = (color1, color2) => {
     { offset: 0, color: color2 + '' || color1 + '' }
   ]);
 };
+export const getColor = ([color1, color2]) => {
+  // 右 下 左 上
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: color1 + '' },
+    { offset: 1, color: color2 + '' || color1 + '' },
+  ])
+}
 
-const dateType = (date) => {
+export const dateType = (date) => {
   let val = '';
   if (date) {
     val = `${date.slice(0, 4)}年${date.slice(4)}月`
@@ -38,6 +45,8 @@ export const getItemStyle = (c1, c2) => {
     }
   };
 }
+export const defaultMonth = ['01', "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+
 const defaultColor = [GradualChange('#22D8FF', '#00B2FF'),
 GradualChange('#F0646C', '#F4994E'),
 GradualChange('#5EEDCC ', '#24C3F1'),
@@ -92,7 +101,7 @@ export const ringType = (
       }
     },
     title,
-    color: color || defaultColor,
+    color: !!color.length ? color : defaultColor,
     series: [
       {
         type: 'pie',
@@ -263,4 +272,163 @@ export const discountedWave = (
 
   };
   return option;
-};
+};
+
+
+//柱状  
+export const columnOptionsChart = (
+  name = "",
+  xAxis = [],
+  series = [],
+  color = [],
+  barWidth = 6
+) => {
+  let defaultData = [{
+    name: '', type: 'bar', data: []
+  }]
+  let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
+  let seriesConfiguration = () => {
+    let seriesData = [];
+    series.map((item, index) => {
+      seriesData.push({
+        name: item.name,
+        type: 'bar',
+        data: item.data,
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[index] || defaultColor[index]),
+          }
+        },
+        barGap: '100%'
+      })
+    })
+
+    return seriesData
+  }
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        shadowStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(31,207,245,0)" // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: "rgba(31,207,245,0.15)" // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(31,207,245,0.05)"
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      extraCssText:
+        "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
+      textStyle: {
+        fontSize: 12,
+        color: "#FFFFFF"
+      },
+      formatter(param) {
+        let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${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: 50,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          if (params.length == 2) {
+            return params + '月';
+          } else {
+            return params.slice(5) + '月';
+          }
+
+        },
+        color: "#9B9DA5",
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultMonth
+    },
+    yAxis: {
+      type: "value",
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#9B9DA5",
+        margin: 15,
+        textStyle: {
+          align: "right",
+          baseline: "middle"
+        }
+      },
+      nameLocation: "end",
+      nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: "dotted",
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: "circle",
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+}

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

@@ -16,7 +16,31 @@
     </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { ringType } from './indexOptionChart';
+let defaultTitle = {
+    text: `{a|租售率}`,
+    left: 'center',
+    top: '30%',
+    left: '18%',
+    subtextStyle: {
+        rich: {
+            b: {
+                fontSize: 30,
+                color: '#fff'
+            }
+        }
+    },
+    textStyle: {
+        color: '#ccc',
+        rich: {
+            a: {
+                fontSize: 12,
+                color: '#858892',
+                padding: [0, 0, 0, 3]
+            }
+        }
+    }
+};
 export default {
     data() {
         return {
@@ -24,7 +48,39 @@ export default {
                 communityId: ''
             },
             total: 0,
-            clientOptions: {}
+            defaultTitle: {
+                text: `{a|租售率}`,
+                left: 'center',
+                top: '30%',
+                left: '18%',
+                subtextStyle: {
+                    rich: {
+                        b: {
+                            fontSize: 30,
+                            color: '#fff'
+                        }
+                    }
+                },
+                textStyle: {
+                    color: '#ccc',
+                    rich: {
+                        a: {
+                            fontSize: 12,
+                            color: '#858892',
+                            padding: [0, 0, 0, 3]
+                        }
+                    }
+                }
+            },
+            clientOptions: ringType(
+                [],
+                [
+                    { name: '待租售', value: 0 },
+                    { name: '已售', value: 0 },
+                    { name: '已租', value: 0 }
+                ],
+                { subtext: `{b|0%}`, ...defaultTitle }
+            )
         };
     },
     computed: {
@@ -36,58 +92,26 @@ export default {
         getData() {
             this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
                 if (status == 0) {
-                    this.clientOptions = ringType(
-                        [
-                            GradualChange('#22D8FF', '#00B2FF'),
-                            GradualChange('#F0646C', '#F4994E'),
-                            GradualChange('#5EEDCC ', '#24C3F1'),
-                            GradualChange('#7178FF', '#D2A4FF'),
-                            GradualChange('#884DD2', '#DF63CC')
-                        ],
-                        this.eachartObj(data),
-                        {
-                            text: `{a|租售率}`,
-                            subtext: `{b|${(data.datas[1] / data.total) * 100 || 0 * 100}%}`,
-                            left: 'center',
-                            top: '30%',
-                            left: '18%',
-                            subtextStyle: {
-                                rich: {
-                                    b: {
-                                        fontSize: 30,
-                                        color: '#fff'
-                                    }
-                                }
-                            },
-                            textStyle: {
-                                color: '#ccc',
-                                rich: {
-                                    a: {
-                                        fontSize: 12,
-                                        color: '#858892',
-                                        padding: [0, 0, 0, 3]
-                                    }
-                                }
-                            }
-                        }
-                    );
+                    this.clientOptions = ringType([], this.eachartObj(data), {
+                        subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
+                        ...defaultTitle
+                    });
                 }
             });
         },
         eachartObj(data) {
             this.total = data.total;
             let typeName = {
-                1: '已租',
-                2: '未租'
+                0: '待租售',
+                1: '已售',
+                2: '已租'
             };
             let newData = [];
             for (let a in data.datas) {
-                if (a !== '0') {
-                    newData.push({
-                        value: data.datas[a],
-                        name: typeName[a]
-                    });
-                }
+                newData.push({
+                    value: data.datas[a],
+                    name: typeName[a]
+                });
             }
             return newData;
         }

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

@@ -6,17 +6,17 @@
                 <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-select v-model="mixins_query.type" placeholder="所有服务" clearable class="saveColumn-select" @change="getData">
                     <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"
+                    v-model="date"
                     type="year"
                     placeholder="选择年"
                     class="saveColumn-select"
-                    @change="getData"
+                    @change="changeTime"
                     :clearable="false"
                 >
                 </el-date-picker>
@@ -28,8 +28,8 @@
     </div>
 </template>
 <script>
-import { columnOptionsChart } from '../EachartOptions.js';
-let timeDay = ['202201', '202202', '202203', '202204', '202205', '202206', '202207', '202208', '202209', '202210', '202211', '202212'];
+import { columnOptionsChart } from './indexOptionChart';
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 export default {
     data() {
         return {
@@ -38,7 +38,8 @@ export default {
                 date: '',
                 type: ''
             },
-            clientOptions: columnOptionsChart('(分)', timeDay, [{ data: [10] }], [], 10)
+            date: '',
+            clientOptions: columnOptionsChart('(分)', [], [{ data: dataArr, name: '服务满意度' }], [], 10)
         };
     },
     computed: {
@@ -49,14 +50,25 @@ export default {
     methods: {
         getData() {
             this.$http.get('/sc-community/statisticServiceTrends', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0) {
-                    console.log(data);
+                if (status == 0 && !!data) {
+                    let timeDay = [],
+                        datas = [];
+                    data.map((item) => {
+                        timeDay.push(item.date);
+                        datas.push(item.data);
+                    });
+                    this.clientOptions = columnOptionsChart('(分)', timeDay, [{ data: datas, name: '服务满意度' }], [], 10);
                 }
             });
+        },
+        changeTime(v) {
+            this.mixins_query.date = v + '-01-01';
+            this.getData();
         }
     },
     created() {
-        this.mixins_query.date = this.$moment().format('YYYY');
+        this.date = this.$moment().format('YYYY');
+        this.mixins_query.date = this.$moment().format('YYYY') + '-01-01';
         this.getData();
     }
 };