优化

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

@@ -1,5 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:22:18
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \commandCenter\src\views\communityAssets\assembly\householdGender.vue
+-->
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">住户性别占比</div>
     </div>
@@ -19,12 +27,13 @@
   </div>
 </template>
 <script>
-import { ringType } from './indexOptionChart';
+import { ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit'
 export default {
   mixins: [index],
   data () {
     return {
+      valueClass: '',
       mixins_query: {
         communityId: ''
       },
@@ -44,17 +53,43 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticUserGender', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0 && !!data.datas) {
-          this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          // this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          }
         } else {
-          this.clientOptions = ringType(
-            [],
-            [
-              { value: 0, name: '男' },
-              { value: 0, name: '女' }
-            ],
-            {},
-            { type: '%', total: 0 }
-          );
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(
+              [],
+              [
+                { value: 0, name: '男' },
+                { value: 0, name: '女' }
+              ],
+              {},
+              { type: '%', total: 0 }
+            );
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge(
+              [],
+              [
+                { value: 0, name: '男' },
+                { value: 0, name: '女' }
+              ],
+              {},
+              { type: '%', total: 0 }
+            );
+          }
+          // this.clientOptions = ringType(
+          //   [],
+          //   [
+          //     { value: 0, name: '男' },
+          //     { value: 0, name: '女' }
+          //   ],
+          //   {},
+          //   { type: '%', total: 0 }
+          // );
         }
       });
     },
@@ -75,10 +110,34 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(
+        [],
+        [
+          { value: 0, name: '男' },
+          { value: 0, name: '女' }
+        ],
+        {},
+        { type: '%', total: 0 }
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        [],
+        [
+          { value: 0, name: '男' },
+          { value: 0, name: '女' }
+        ],
+        {},
+        { type: '%', total: 0 }
+      );
+    }
     this.getData();
   }
 };
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">住户身份占比</div>
     </div>
@@ -19,7 +19,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit'
 const colors = [
   GradualChange('#22D8FF', '#00B2FF'),
@@ -32,6 +32,7 @@ export default {
   mixins: [index],
   data () {
     return {
+      valueClass: '',
       mixins_query: {
         communityId: ''
       },
@@ -54,20 +55,42 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticsUserIdentities', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0 && !!data.datas) {
-          this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         } else {
-          this.clientOptions = ringType(
-            colors,
-            [
-              { value: 0, name: '业主' },
-              { value: 0, name: '亲属' },
-              { value: 0, name: '租客' },
-              { value: 0, name: '租户管理员' },
-              { value: 0, name: '普通员工' }
-            ],
-            {},
-            { type: 'number', total: 0 }
-          );
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+
+            this.clientOptions = ringType(
+              colors,
+              [
+                { value: 0, name: '业主' },
+                { value: 0, name: '亲属' },
+                { value: 0, name: '租客' },
+                { value: 0, name: '承租人' },
+                { value: 0, name: '普通员工' }
+              ],
+              {},
+              { type: 'number', total: 0 }
+            );
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+
+            this.clientOptions = ringTypeEnlarge(
+              colors,
+              [
+                { value: 0, name: '业主' },
+                { value: 0, name: '亲属' },
+                { value: 0, name: '租客' },
+                { value: 0, name: '承租人' },
+                { value: 0, name: '普通员工' }
+              ],
+              {},
+              { type: 'number', total: 0 }
+            );
+          }
         }
       });
     },
@@ -91,6 +114,35 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(
+        colors,
+        [
+          { value: 0, name: '业主' },
+          { value: 0, name: '亲属' },
+          { value: 0, name: '租客' },
+          { value: 0, name: '承租人' },
+          { value: 0, name: '普通员工' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        colors,
+        [
+          { value: 0, name: '业主' },
+          { value: 0, name: '亲属' },
+          { value: 0, name: '租客' },
+          { value: 0, name: '承租人' },
+          { value: 0, name: '普通员工' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    }
     this.getData();
   }
 };
@@ -166,4 +218,75 @@ export default {
         }
     }
 }
+
+.modelBlock.enlarge {
+    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;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                line-height: 33px;
+            }
+        }
+    }
+}
 </style>

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">房屋租售率</div>
     </div>
@@ -19,17 +19,17 @@
   </div>
 </template>
 <script>
-import { ringType } from './indexOptionChart';
+import { ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit'
 let defaultTitle = {
   text: `{a|租售率}`,
   left: 'center',
-  top: '30%',
+  top: '35%',
   left: '18%',
   subtextStyle: {
     rich: {
       b: {
-        fontSize: 30,
+        fontSize: 20,
         color: '#fff'
       }
     }
@@ -40,7 +40,34 @@ let defaultTitle = {
       a: {
         fontSize: 12,
         color: '#858892',
-        padding: [0, 0, 0, 3]
+        padding: [0, 0, 0, 3],
+        fontWeight: 'lighter'
+      }
+    }
+  }
+};
+
+let defaultTitleEnlarge = {
+  text: `{a|租售率}`,
+  left: 'center',
+  top: '40%',
+  left: '19%',
+  subtextStyle: {
+    rich: {
+      b: {
+        fontSize: 20,
+        color: '#fff'
+      }
+    }
+  },
+  textStyle: {
+    color: '#ccc',
+    rich: {
+      a: {
+        fontSize: 14,
+        color: '#858892',
+        padding: [0, 0, 0, 3],
+        fontWeight: 'lighter'
       }
     }
   }
@@ -52,6 +79,7 @@ export default {
       mixins_query: {
         communityId: ''
       },
+      valueClass: '',
       total: 0,
       defaultTitle: {
         text: `{a|租售率}`,
@@ -92,10 +120,21 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0) {
-          this.clientOptions = ringType([], this.eachartObj(data), {
-            subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
-            ...defaultTitle
-          });
+          // this.clientOptions = ringType([], this.eachartObj(data), {
+          //   subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
+          //   ...defaultTitle
+          // });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], this.eachartObj(data), {
+              subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
+              ...defaultTitle
+            });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {
+              subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
+              ...defaultTitleEnlarge
+            });
+          }
         }
       });
     },
@@ -117,10 +156,30 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType([],
+        [
+          { name: '待租售', value: 0 },
+          { name: '已售', value: 0 },
+          { name: '已租', value: 0 }
+        ],
+        { subtext: `{b|0%}`, ...defaultTitle })
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge([],
+        [
+          { name: '待租售', value: 0 },
+          { name: '已售', value: 0 },
+          { name: '已租', value: 0 }
+        ],
+        { subtext: `{b|0%}`, ...defaultTitleEnlarge });
+    }
     this.getData();
   }
 };
 </script>
 <style scoped lang="scss">
 @import '../style.scss';
+@import '../stylePc.scss';
 </style>

commandCenter/src/views/communityAssets/stylePc.scss

@@ -0,0 +1,77 @@
+@import '@assets/css/public-style.scss';
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
+.no-permission {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+}

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

@@ -1,145 +1,246 @@
 <template>
-    <div class="modelBlock">
-        <div class="model-title">
-            <div class="model-title-text">收款率分析</div>
-            <div class="model-title-right">
-                <el-date-picker
-                    value-format="yyyy-MM"
-                    v-model="date"
-                    type="month"
-                    placeholder="选择月"
-                    class="saveColumn-select saveColumn-select-time"
-                    @change="changeTime"
-                    :clearable="false"
-                >
-                </el-date-picker>
-                <el-select v-model="mixins_query.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
-                    <el-option
-                        :label="item.label"
-                        :value="item.value"
-                        v-for="(item, index) in $publicArray.chargeType()"
-                        :key="index"
-                    ></el-option>
-                </el-select>
-            </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template>
+      <div class="model-title">
+        <div class="model-title-text">收款率分析</div>
+        <div class="model-title-right">
+          <el-date-picker
+            value-format="yyyy-MM"
+            v-model="date"
+            type="month"
+            placeholder="选择月"
+            class="saveColumn-select saveColumn-select-time"
+            @change="changeTime"
+            :clearable="false"
+          >
+          </el-date-picker>
+          <el-select
+            v-model="mixins_query.chargeType"
+            placeholder="所有费用"
+            clearable
+            class="saveColumn-select"
+            @change="getData"
+          >
+            <el-option
+              v-for="(item, index) in amountType"
+              :label="item.name"
+              :value="item.value"
+              :key="index"
+            ></el-option>
+          </el-select>
         </div>
-        <div class="model-content">
-            <process-circle
-                class="item"
-                :strokeWidth="strokeWidth"
-                :trailWidth="trailWidth"
-                :trailColor="trailColor"
-                :percent="dataObj.receivableAmount == 0 ? 0 : 100 / (dataObj.receivableAmount / dataObj.receivedAmount)"
-            >
-                <span class="ashText" style="font-size: 14px">收款率</span>
-                <span> {{ dataObj.collectionRate }}</span>
-            </process-circle>
-            <div class="textAmount">
-                <div class="listAmount">
-                    <div class="listText">应收金额</div>
-                    <div class="listNumber">{{ dataObj.receivableAmount }}</div>
-                </div>
-                <div class="listAmount">
-                    <div class="listText">已收金额</div>
-                    <div class="listNumber">{{ dataObj.receivedAmount }}</div>
-                </div>
-                <div class="listAmount">
-                    <div class="listText">未收金额</div>
-                    <div class="listNumber">{{ dataObj.uncollected }}</div>
-                </div>
-            </div>
+      </div>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+          style="top: 15px; width: 270px;"
+        ></zz-echart>
+        <div class="textAmount">
+          <div class="listAmount">
+            <div class="listText">应收金额</div>
+            <div class="listNumber">{{ dataObj.receivableAmount }}</div>
+          </div>
+          <div class="listAmount">
+            <div class="listText">已收金额</div>
+            <div class="listNumber">{{ dataObj.receivedAmount }}</div>
+          </div>
+          <div class="listAmount">
+            <div class="listText">未收金额</div>
+            <div class="listNumber">{{ dataObj.uncollected }}</div>
+          </div>
         </div>
-    </div>
+      </div>
+    </template>
+  </div>
 </template>
-<script>
-import processCircle from './circle';
-import allcommunit from './allcommunit';
-export default {
-    mixins: [allcommunit],
-    components: {
-        processCircle
-    },
-    data() {
-        return {
-            strokeWidth: 15, // 线条宽度
-            trailWidth: 15, // 背景线条宽度
-            trailColor: '#2C3345', // 背景线条宽度
-            mixins_query: {
-                communityId: '',
-                chargeType: '',
-                startTime: '',
-                endTime: ''
-            },
-            date: '',
-            dataObj: {
-                receivedAmount: 0,
-                receivableAmount: 0,
-                uncollected: 0,
-                collectionRate: '0%'
-            }
-        };
-    },
 
-    methods: {
-        getData() {
-            this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0 && !!data) {
-                    this.dataObj = {
-                        receivableAmount: !!data.receivableAmount ? data.receivableAmount : 0,
-                        receivedAmount: !!data.receivedAmount ? data.receivedAmount : 0,
-                        uncollected: !!data.uncollectedAmount ? data.uncollectedAmount : 0,
-                        collectionRate: !!data.collectionRate ? data.collectionRate : '0%'
-                    };
-                } else {
-                    this.dataObj = {
-                        receivableAmount: 0,
-                        receivedAmount: 0,
-                        uncollected: 0,
-                        collectionRate: '0%'
-                    };
-                }
-            });
+
+
+    <script>
+// import processCircle from './circle'; // 环形进度条
+import { quantitativeAnalysisDashboard, quantitativeAnalysisDashboardEnlarge } from './indexOptionChart';
+// import permissionComponent from './permissionComponent';
+export default {
+  //   mixins: [permissionComponent],
+  //   components: {
+  //     processCircle
+  //   },
+  data () {
+    return {
+      valueClass: '',
+      defaultModel: {
+        permissUrl: '14',
+        titleName: '收费管理'
+      },
+      clientOptions: quantitativeAnalysisDashboard(
+        ['收款率'], [0], []
+      ),
+      strokeWidth: 15, // 线条宽度
+      trailWidth: 15, // 背景线条宽度
+      trailColor: '#2C3345', // 背景线条宽度
+      mixins_query: {
+        communityId: '',
+        chargeType: '',
+        startTime: '',
+        endTime: ''
+      },
+      date: '',
+      amountType: [
+        {
+          value: 1,
+          name: '物业费'
+        },
+        {
+          value: 2,
+          name: '水费'
         },
-        changeTime(v) {
-            this.mixins_query.startTime = v;
-            this.mixins_query.endTime = v;
-            this.getData();
+        {
+          value: 3,
+          name: '电费'
+        },
+        {
+          value: 4,
+          name: '车位费'
+        },
+        {
+          value: 6,
+          name: '卫生费'
+        },
+        {
+          value: 7,
+          name: '其他费用'
         }
+      ],
+      dataObj: {
+        receivedAmount: 0,
+        receivableAmount: 0,
+        uncollected: 0,
+        collectionRate: '0%'
+      }
+    };
+  },
+
+  methods: {
+    getData () {
+      this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && !!data) {
+          this.dataObj = {
+            receivableAmount: !!data.receivableAmount ? data.receivableAmount : 0,
+            receivedAmount: !!data.receivedAmount ? data.receivedAmount : 0,
+            uncollected: !!data.uncollectedAmount ? data.uncollectedAmount : 0,
+            collectionRate: !!data.collectionRate ? data.collectionRate : '0%'
+          };
+          let a = this.dataObj.collectionRate.indexOf('%');
+          let b = this.dataObj.collectionRate.substring(0, a);
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = quantitativeAnalysisDashboard(['收款率'], [b], []);
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = quantitativeAnalysisDashboardEnlarge(['收款率'], [b], []);
+          }
+
+        } else {
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = quantitativeAnalysisDashboard(['收款率'], [0], []);
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = quantitativeAnalysisDashboardEnlarge(['收款率'], [0], []);
+          }
+        }
+      });
     },
-    created() {
-        this.mixins_query.startTime = this.$moment().format('YYYY-MM');
-        this.mixins_query.endTime = this.$moment().format('YYYY-MM');
-        this.date = this.$moment().format('YYYY-MM');
+    changeTime (v) {
+      this.mixins_query.startTime = v;
+      this.mixins_query.endTime = v;
+      this.getData();
+    }
+  },
+  created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = quantitativeAnalysisDashboard(['收款率'], [0], []);
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = quantitativeAnalysisDashboardEnlarge(['收款率'], [0], []);
     }
+
+
+    this.mixins_query.startTime = this.$moment().format('YYYY-MM');
+    this.mixins_query.endTime = this.$moment().format('YYYY-MM');
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
 };
-</script>
-<style scoped lang="scss">
-@import './style.scss';
+    </script>
+
 
-.textAmount {
-    width: 100px;
-    margin-top: 20px;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    .listAmount {
-        font-size: 12px;
-        .listText {
-            opacity: 0.5;
+    <style scoped lang="scss">
+@import './style.scss';
+@import './stylePc.scss';
+.modelBlock {
+    .model-content {
+        height: calc(100% - #{rem(80)});
+        top: 10px !important;
+    }
+    .textAmount {
+        width: rem(100);
+        margin-top: rem(25);
+        display: flex;
+        // justify-content: space-between;
+        flex-direction: column;
+        .listAmount {
+            font-size: 12px;
+            .listText {
+                opacity: 0.5;
+            }
+            .listNumber {
+                font-size: rem(20);
+                // margin-bottom: rem(10);
+                &:first-child {
+                    margin: 0;
+                }
+            }
         }
-        .listNumber {
-            font-size: 20px;
-            &:first-child {
-                margin: 0;
+    }
+}
+
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: rem(10);
             }
         }
     }
 }
+
 .item {
-    margin-top: 25px;
-    margin-left: 40px;
+    margin-top: rem(25);
+    margin-left: rem(25);
     .ashText {
         opacity: 0.5;
     }
 }
+
+.modelBlock.enlarge {
+    .textAmount {
+        width: rem(100);
+        margin-top: 60px;
+        display: flex;
+        // justify-content: space-between;
+        flex-direction: column;
+        .listAmount {
+            font-size: 12px;
+            .listText {
+                opacity: 0.5;
+            }
+            .listNumber {
+                font-size: rem(20);
+                // margin-bottom: rem(10);
+                &:first-child {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
 </style>

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

@@ -1,107 +1,129 @@
 <template>
-    <div class="modelBlock">
-        <div class="model-title">
-            <div class="model-title-text">押金分析</div>
-            <div class="model-title-right">
-                <el-date-picker
-                    value-format="yyyy-MM"
-                    v-model="date"
-                    type="month"
-                    placeholder="选择月"
-                    class="saveColumn-select saveColumn-select-time"
-                    @change="changeTime"
-                    :clearable="false"
-                >
-                </el-date-picker>
-            </div>
-        </div>
-        <div class="model-content">
-            <zz-echart :option="clientOptions" class="chart"></zz-echart>
-            <div class="totals">
-                <span>{{ total }}</span>
-                <span class="numbers">押金总额</span>
-            </div>
-        </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <div class="model-title">
+      <div class="model-title-text">押金分析</div>
+      <div class="model-title-right">
+        <el-date-picker
+          value-format="yyyy-MM"
+          v-model="date"
+          type="month"
+          placeholder="选择月"
+          class="saveColumn-select saveColumn-select-time"
+          @change="changeTime"
+          :clearable="false"
+        >
+        </el-date-picker>
+      </div>
     </div>
+    <div class="model-content">
+      <zz-echart
+        :option="clientOptions"
+        class="chart"
+      ></zz-echart>
+      <div class="totals">
+        <span>{{ total }}</span>
+        <span class="numbers">押金总额</span>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
 const colors = [
-    GradualChange('#22D8FF', '#00B2FF'),
-    GradualChange('#F0646C', '#F4994E'),
-    GradualChange('#5EEDCC ', '#24C3F1'),
-    GradualChange('#7178FF', '#D2A4FF'),
-    GradualChange('#884DD2', '#DF63CC')
+  GradualChange('#22D8FF', '#00B2FF'),
+  GradualChange('#F0646C', '#F4994E'),
+  GradualChange('#5EEDCC ', '#24C3F1'),
+  GradualChange('#7178FF', '#D2A4FF'),
+  GradualChange('#884DD2', '#DF63CC')
 ];
 import allcommunit from './allcommunit';
 export default {
-    mixins: [allcommunit],
-    data() {
-        return {
-            mixins_query: {
-                communityId: '',
-                yearMonth: ''
-            },
-            date: '',
-            total: 0,
-            clientOptions: ringType(
-                colors,
-                [
-                    { value: 0, name: '装修押金' },
-                    { value: 0, name: '租赁押金' }
-                ],
-                {},
-                { type: 'number', total: 0 }
-            )
-        };
-    },
-    methods: {
-        getData() {
-            this.$http.get('/sc-charge/deposit/statistics/received', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0 && !!data.length) {
-                    this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
-                } else {
-                    this.total = 0;
-                    this.clientOptions = ringType(
-                        colors,
-                        [
-                            { value: 0, name: '装修押金' },
-                            { value: 0, name: '租赁押金' }
-                        ],
-                        {},
-                        { type: 'number', total: 0 }
-                    );
-                }
-            });
-        },
-        changeTime(v) {
-            this.mixins_query.yearMonth = v;
-            this.getData();
-        },
-        eachartObj(data) {
-            this.total = 0;
-            let typeName = {
-                1: '装修押金',
-                2: '租赁押金'
-            };
-            let newData = [];
-            data.map((item) => {
-                this.total += item.paymentAmount || 0;
-                newData.push({
-                    value: item.paymentAmount || 0,
-                    name: typeName[item.depositType]
-                });
-            });
-
-            return newData;
+  mixins: [allcommunit],
+  data () {
+    return {
+      valueClass: '',
+      mixins_query: {
+        communityId: '',
+        yearMonth: ''
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringType(
+        colors,
+        [
+          { value: 0, name: '装修押金' },
+          { value: 0, name: '租赁押金' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-charge/deposit/statistics/received', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && !!data.length) {
+          //   this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
+      });
     },
-    created() {
-        this.date = this.$moment().format('YYYY-MM');
-        this.mixins_query.yearMonth = this.$moment().format('YYYY-MM');
+    changeTime (v) {
+      this.mixins_query.yearMonth = v;
+      this.getData();
+    },
+    eachartObj (data) {
+      this.total = 0;
+      let typeName = {
+        1: '装修押金',
+        2: '租赁押金'
+      };
+      let newData = [];
+      data.map((item) => {
+        this.total += item.paymentAmount || 0;
+        newData.push({
+          value: item.paymentAmount || 0,
+          name: typeName[item.depositType]
+        });
+      });
+
+      return newData;
+    }
+  },
+  created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringTypes(
+        colors,
+        [
+          { value: 0, name: '装修押金' },
+          { value: 0, name: '租赁押金' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        colors,
+        [
+          { value: 0, name: '装修押金' },
+          { value: 0, name: '租赁押金' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      );
     }
+    this.date = this.$moment().format('YYYY-MM');
+    this.mixins_query.yearMonth = this.$moment().format('YYYY-MM');
+  }
 };
 </script>
 <style lang="scss" scoped>
 @import './style.scss';
+@import './stylePc.scss';
 </style>

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

@@ -1,123 +1,154 @@
 <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.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
-                    <el-option
-                        :label="item.label"
-                        :value="item.value"
-                        v-for="(item, index) in $publicArray.chargeType()"
-                        :key="index"
-                    ></el-option>
-                </el-select>
-                <el-date-picker
-                    value-format="yyyy-MM"
-                    v-model="date"
-                    type="month"
-                    placeholder="选择月"
-                    class="saveColumn-select saveColumn-select-time"
-                    @change="changeTime"
-                    :clearable="false"
-                >
-                </el-date-picker>
-            </div>
-        </div>
-        <div class="model-content">
-            <zz-echart :option="clientOptions" class="chart"></zz-echart>
-        </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <div class="model-title">
+      <div class="model-title-text">收入方式</div>
+      <div class="model-title-right">
+        <el-select
+          v-model="mixins_query.chargeType"
+          placeholder="所有费用"
+          clearable
+          class="saveColumn-select"
+          @change="getData"
+        >
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="(item, index) in $publicArray.chargeType()"
+            :key="index"
+          ></el-option>
+        </el-select>
+        <el-date-picker
+          value-format="yyyy-MM"
+          v-model="date"
+          type="month"
+          placeholder="选择月"
+          class="saveColumn-select saveColumn-select-time"
+          @change="changeTime"
+          :clearable="false"
+        >
+        </el-date-picker>
+      </div>
     </div>
+    <div class="model-content">
+      <zz-echart
+        :option="clientOptions"
+        class="chart"
+      ></zz-echart>
+    </div>
+  </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { GradualChange, ringTypes, ringTypeEnlarge } from './indexOptionChart';
 const colors = [
-    GradualChange('#22D8FF', '#00B2FF'),
-    GradualChange('#F0646C', '#F4994E'),
-    GradualChange('#5EEDCC ', '#24C3F1'),
-    GradualChange('#7178FF', '#D2A4FF'),
-    GradualChange('#884DD2', '#DF63CC')
+  GradualChange('#22D8FF', '#00B2FF'),
+  GradualChange('#F0646C', '#F4994E'),
+  GradualChange('#5EEDCC ', '#24C3F1'),
+  GradualChange('#7178FF', '#D2A4FF'),
+  GradualChange('#884DD2', '#DF63CC')
 ];
 import allcommunit from './allcommunit';
 export default {
-    mixins: [allcommunit],
-    data() {
-        return {
-            mixins_query: {
-                communityId: '',
-                date: '',
-                chargeType: ''
-            },
-            date: '',
-            total: 0,
-            clientOptions: ringType(
-                colors,
-                [
-                    { value: 0, name: '微信' },
-                    { value: 0, name: '支付宝' },
-                    { value: 0, name: '现金' },
-                    { value: 0, name: '预存' },
-                    { value: 0, name: '其他' }
-                ],
-                {},
-                { type: '%', total: 0 },
-                30
-            )
-        };
-    },
-    methods: {
-        getData() {
-            this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0 &&  !!data.datas && Object.keys(data.datas).length !==0) {
-                    this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
-                } else {
-                    this.clientOptions = ringType(
-                        colors,
-                        [
-                            { value: 0, name: '微信' },
-                            { value: 0, name: '支付宝' },
-                            { value: 0, name: '现金' },
-                            { value: 0, name: '预存' },
-                            { value: 0, name: '其他' }
-                        ],
-                        {},
-                        { type: '%', total: 0 },
-                        30
-                    );
-                }
-            });
-        },
-        changeTime(v) {
-            this.mixins_query.date = v + '-01';
-            this.getData();
-        },
-        eachartObj(data) {
-            this.total = data.total || 0;
-            let typeName = {
-                1: '微信在线',
-                2: '支付宝',
-                3: '现金',
-                4: '预存',
-                5: '其他',
-                6: '刷卡',
-                7: '微信扫码'
-            };
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
-                });
-                 this.total = this.total + data.datas[a];
-            }
-            return newData;
+  mixins: [allcommunit],
+  data () {
+    return {
+      valueClass: "",
+      mixins_query: {
+        communityId: '',
+        date: '',
+        chargeType: ''
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringTypes(
+        colors,
+        [
+          { value: 0, name: '微信' },
+          { value: 0, name: '支付宝' },
+          { value: 0, name: '现金' },
+          { value: 0, name: '预存' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: '%', total: 0 },
+        30
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && !!data.datas && Object.keys(data.datas).length !== 0) {
+          //   this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringTypes(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
+          }
         }
+      });
     },
-    created() {
-        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
-        this.date = this.$moment().format('YYYY-MM');
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    eachartObj (data) {
+      this.total = data.total || 0;
+      let typeName = {
+        1: '微信在线',
+        2: '支付宝',
+        3: '现金',
+        4: '预存',
+        5: '其他',
+        6: '刷卡',
+        7: '微信扫码'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: typeName[a]
+        });
+        this.total = this.total + data.datas[a];
+      }
+      return newData;
+    }
+  },
+  created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringTypes(
+        colors,
+        [
+          { value: 0, name: '微信' },
+          { value: 0, name: '支付宝' },
+          { value: 0, name: '现金' },
+          { value: 0, name: '预存' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: '%', total: 0 }
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        colors,
+        [
+          { value: 0, name: '微信' },
+          { value: 0, name: '支付宝' },
+          { value: 0, name: '现金' },
+          { value: 0, name: '预存' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: '%', total: 0 }
+      );
     }
+    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+    this.date = this.$moment().format('YYYY-MM');
+  }
 };
 </script>
 <style lang="scss" scoped>
 @import './style.scss';
+@import './stylePc.scss';
 </style>

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

@@ -1,4 +1,4 @@
-import echarts from "echarts";
+import echarts from 'echarts';
 
 //从左往右颜色渐变
 export const GradualChange = (color1, color2) => {
@@ -48,7 +48,7 @@ export const getItemStyle = (c1, c2) => {
     };
 };
 export const defaultMonth = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
-export const defaultmonthData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+export const defaultmonthData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 export const defaultName = ['name1', 'name2', 'name3'];
 
 const defaultColor = [
@@ -59,15 +59,181 @@ const defaultColor = [
     GradualChange('#884DD2', '#DF63CC')
 ];
 // 饼图
-export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}, tops = 80) => {
+export const ringTypes = (color = [], data = [], title = {}, legendFcuntion = {}) => {
     let legendFcuntionValue = (v) => {
         let val = '';
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}}{b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
-                    val = `{a|${v}}{b|${item.value}}`;
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 40,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['60%', '75%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 80,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['60%', '75%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+
+// 饼图  2560
+export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    if (v.length > 5 || v.length == 5) {
+                        let va = v.substr(0, 3) + '…';
+                        val = `{a|${va}} · · · · {b|${item.value}}`;
+                    } else if (item.value.length == 4 || item.value.length > 4) {
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${v}} · · · · {b|${itval}}`;
+                    } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+                        let va = v.substr(0, 3) + '…';
+                        let itval = item.value.substr(0, 4) + '…';
+                        val = `{a|${va}} · · · · {b|${itval}}`;
+                    } else {
+                        val = `{a|${v}} · · · · {b|${item.value}}`;
+                    }
                 }
             }
         });
@@ -79,8 +245,8 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         },
         legend: {
             orient: 'vertical',
-            right: 10,
-            top: tops,
+            right: 30,
+            top: 100,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
             itemHeight: 8,
@@ -135,7 +301,7 @@ export const discountedWave = (name = '', xAxis = [], series = [], legendShow =
             },
             formatter(param) {
                 let el = `<div class="dmp-echart-tooltip"><h4>${param[0].axisValue}月</h4>`;
-                param.forEach(item => {
+                param.forEach((item) => {
                     el += `<p>
                               <span class="marker" style="display:inline-block;margin-right:4px;border-radius:10px;width:12px;height:8px;background-image: linear-gradient(to left,
                                 ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
@@ -1231,3 +1397,187 @@ export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataser
     };
     return option;
 };
+
+// 仪表盘   1920
+export const quantitativeAnalysisDashboard = (name = [], data = [], color = []) => {
+    const percent = data[0]; // 数值
+    let option = {
+        // backgroundColor: 'rgba(8, 17, 67, 0.9)',
+        title: {
+            text: name,
+            left: '33%',
+            top: '30%',
+            textAlign: 'center',
+            textStyle: {
+                color: '#858892',
+                fontSize: 12,
+                fontWeight: 'lighter'
+            },
+            subtext: `${percent} %`,
+            subtextStyle: {
+                color: '#fff',
+                fontSize: 20
+            }
+        },
+        polar: {
+            radius: ['72%', '97%'],
+            center: ['35%', '50%']
+        },
+        // 极坐标角度轴
+        angleAxis: {
+            min: 0,
+            max: 100,
+            // startAngle: 0,
+            // endAngle: -0,
+            clockwise: true,
+            show: false // 隐藏刻度线
+        },
+        // 极坐标径向轴
+        radiusAxis: {
+            type: 'category',
+            // 隐藏极坐标轴线
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        tooltip: {
+            show: true,
+            formatter: (val) => {
+                return `${val.seriesName}: ${val.data}%`;
+            }
+            // backgroundColor: 'rgba(31, 196, 225, 0.2)',
+            // borderColor: 'rgba(31, 196, 225, 0.6)'
+        },
+        series: [
+            {
+                // 进度条
+                type: 'bar',
+                name: name,
+                coordinateSystem: 'polar',
+                // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
+                showBackground: true,
+                backgroundStyle: {
+                    // 外圈颜色
+                    // color: 'rgba(14, 61, 128,0.3)',
+                },
+                // 两端设置圆角
+                roundCap: true,
+                itemStyle: {
+                    color: {
+                        x: 0,
+                        y: 0,
+                        x1: 0,
+                        y1: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(94, 237, 204,0.65)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(36,195,241,0.8)'
+                            }
+                        ]
+                    }
+                },
+                data: [percent]
+            }
+        ]
+    };
+    return option;
+};
+
+// 仪表盘  2560
+export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color = []) => {
+    const percent = data[0]; // 数值
+    let option = {
+        // backgroundColor: 'rgba(8, 17, 67, 0.9)',
+        title: {
+            text: name,
+            left: '33%',
+            top: '35%',
+            textAlign: 'center',
+            textStyle: {
+                color: '#858892',
+                fontSize: 14,
+                fontWeight: 'lighter'
+            },
+            subtext: `${percent} %`,
+            subtextStyle: {
+                color: '#fff',
+                fontSize: 20
+            }
+        },
+        polar: {
+            radius: ['52%', '72%'],
+            center: ['35%', '45%']
+        },
+        // 极坐标角度轴
+        angleAxis: {
+            min: 0,
+            max: 100,
+            // startAngle: 0,
+            // endAngle: -0,
+            clockwise: true,
+            show: false // 隐藏刻度线
+        },
+        // 极坐标径向轴
+        radiusAxis: {
+            type: 'category',
+            // 隐藏极坐标轴线
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        tooltip: {
+            show: true,
+            formatter: (val) => {
+                return `${val.seriesName}: ${val.data}%`;
+            }
+            // backgroundColor: 'rgba(31, 196, 225, 0.2)',
+            // borderColor: 'rgba(31, 196, 225, 0.6)'
+        },
+        series: [
+            {
+                // 进度条
+                type: 'bar',
+                name: name,
+                coordinateSystem: 'polar',
+                // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
+                showBackground: true,
+                backgroundStyle: {
+                    // 外圈颜色
+                    // color: 'rgba(14, 61, 128,0.3)',
+                },
+                // 两端设置圆角
+                roundCap: true,
+                itemStyle: {
+                    color: {
+                        x: 0,
+                        y: 0,
+                        x1: 0,
+                        y1: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(94, 237, 204,0.65)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(36,195,241,0.8)'
+                            }
+                        ]
+                    }
+                },
+                data: [percent]
+            }
+        ]
+    };
+    return option;
+};

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

@@ -0,0 +1,77 @@
+@import '@assets/css/public-style.scss';
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
+.no-permission {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+}

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

@@ -1,7 +1,15 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:25:47
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \commandCenter\src\views\industrialInvestment\assembly\BusinessOpportunity.vue
+-->
 <!-- 暂无数据 -->
 
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">商机来源</div>
       <div class="model-title-right">
@@ -30,12 +38,13 @@
   </div>
 </template>
 <script>
-import { ringType } from './indexOptionChart';
+import { ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit';
 export default {
   mixins: [index],
   data () {
     return {
+      valueClass: "",
       mixins_query: {
         // companyOrgId: '',
         startDate: ''
@@ -66,7 +75,11 @@ export default {
               value: data[i].total
             })
           }
-          this.clientOptions = ringType([], newData);
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], newData);
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge([], newData);
+          }
         }
       });
     },
@@ -76,6 +89,27 @@ export default {
     },
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(
+        [],
+        [
+          { value: 0, name: '线上预约' },
+          { value: 0, name: '线上电话' },
+          { value: 0, name: '线下访问' },
+        ]
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        [],
+        [
+          { value: 0, name: '线上预约' },
+          { value: 0, name: '线上电话' },
+          { value: 0, name: '线下访问' },
+        ]
+      );
+    }
     this.mixins_query.startDate = this.$moment().format('YYYY-MM');
     this.date = this.$moment().format('YYYY-MM');
     this.getData();
@@ -84,6 +118,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .model-title {
     .model-title-right {
         .saveColumn-select {

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

@@ -1,5 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:30:18
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \commandCenter\src\views\industrialInvestment\assembly\enterpriseDistribution.vue
+-->
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">企业类型分布</div>
     </div>
@@ -16,7 +24,7 @@
   </div>
 </template>
 <script>
-import { ringType } from './indexOptionChart';
+import { ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit';
 export default {
   mixins: [index],
@@ -25,6 +33,7 @@ export default {
       mixins_query: {
         communityId: ''
       },
+      valueClass: "",
       total: 0,
       clientOptions: ringType(
         [],
@@ -43,7 +52,12 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticEnterpriseType', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0) {
-          this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '', total: data.total });
+          // this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {}, { type: '', total: data.total });
+          }
         }
       });
     },
@@ -67,12 +81,40 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(
+        [],
+        [
+          { value: 0, name: '餐饮业' },
+          { value: 0, name: '互联网' },
+          { value: 0, name: '金融业' },
+          { value: 0, name: '服务业' },
+        ],
+        {},
+        { type: '', total: 0 }
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(
+        [],
+        [
+          { value: 0, name: '餐饮业' },
+          { value: 0, name: '互联网' },
+          { value: 0, name: '金融业' },
+          { value: 0, name: '服务业' },
+        ],
+        {},
+        { type: '', total: 0 }
+      );
+    }
     this.getData();
   }
 };
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .fonst-color {
     color: #fff;
 }

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

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

commandCenter/src/views/industrialInvestment/stylePc.scss

@@ -0,0 +1,77 @@
+@import '@assets/css/public-style.scss';
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
+.no-permission {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+}

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">投诉建议类型分布</div>
       <div class="model-title-right">
@@ -28,7 +28,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType } from './indexOptionChart';
+import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit'
 // import permissionComponent from '../permissionComponent';
 const colors = [
@@ -47,6 +47,7 @@ export default {
       //   permissUrl: '17',
       //   titleName: '运维工单'
       // },
+      valueClass: '',
       mixins_query: {
         communityId: '',
         date: '',
@@ -71,7 +72,12 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
         if (status == 0 && !!data.datas) {
-          this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          // this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
       })
     },
@@ -100,6 +106,31 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(colors,
+        [
+          { value: 0, name: '扰民投诉' },
+          { value: 0, name: '物业投诉' },
+          { value: 0, name: '公共卫生' },
+          { value: 0, name: '安全建议' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: 'number', total: 0 });
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge(colors,
+        [
+          { value: 0, name: '扰民投诉' },
+          { value: 0, name: '物业投诉' },
+          { value: 0, name: '公共卫生' },
+          { value: 0, name: '安全建议' },
+          { value: 0, name: '其他' }
+        ],
+        {},
+        { type: 'number', total: 0 });
+    }
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');
     this.getData();
@@ -160,4 +191,73 @@ export default {
         }
     }
 }
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
 </style>

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

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

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

@@ -1,5 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-10-10 12:24:37
+ * @LastEditTime: 2022-10-10 14:38:27
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \commandCenter\src\views\operationalServices\assembly\orderClassification.vue
+-->
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <div class="model-title">
       <div class="model-title-text">运维工单分类</div>
       <div class="model-title-right">
@@ -28,7 +36,7 @@
   </div>
 </template>
 <script>
-import { ringType } from './indexOptionChart';
+import { ringType, ringTypeEnlarge } from './indexOptionChart';
 import index from './allcommunit'
 export default {
   mixins: [index],
@@ -38,6 +46,7 @@ export default {
         communityId: '',
         date: '',
       },
+      valueClass: '',
       total: 0,
       date: '',
       clientOptions: ringType(
@@ -58,8 +67,13 @@ export default {
     },
     getData () {
       this.$http.get('/sc-community/statisticWorkOrderCategory', this.mixins_query).then(({ data, msg, status }) => {
-        if (status == 0 && !!data.datas) { 
-          this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+        if (status == 0 && !!data.datas) {
+          // this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          }
         }
       });
     },
@@ -80,6 +94,25 @@ export default {
     }
   },
   created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType([],
+        [
+          { value: 0, name: '业主报修' },
+          { value: 0, name: '内部报修' }
+        ],
+        {},
+        { type: '%', total: 0 });
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      this.clientOptions = ringTypeEnlarge([],
+        [
+          { value: 0, name: '业主报修' },
+          { value: 0, name: '内部报修' }
+        ],
+        {},
+        { type: '%', total: 0 });
+    }
     this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
     this.date = this.$moment().format('YYYY-MM');
     this.getData();
@@ -88,6 +121,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .size-color {
     color: #fff;
 }

commandCenter/src/views/operationalServices/stylePc.scss

@@ -0,0 +1,77 @@
+@import '@assets/css/public-style.scss';
+.modelBlock.enlarge {
+    height: 100%;
+    padding: rem(15) rem(20) rem(20);
+    background: #171f32;
+    position: relative;
+    .model-title {
+        line-height: rem(30);
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: rem(15);
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: rem(100);
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                padding-right: rem(20);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+        .buttons {
+            width: rem(120);
+            padding-left: rem(10);
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            cursor: pointer;
+
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        top: 15px;
+        .totals {
+            position: absolute;
+            right: rem(10);
+            top: rem(26);
+            width: rem(120);
+            height: rem(40);
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: rem(8) rem(10);
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                // line-height: rem(32);
+                line-height: 32px;
+            }
+        }
+    }
+}
+.no-permission {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+}