优化

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

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

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

@@ -19,7 +19,7 @@
   </div>
 </template>
 <script>
-import { ringType, ringTypeEnlarge } from './indexOptionChart';
+import { ringType, ringTypeEnlarge, ringTypeEnlarges } from './indexOptionChart';
 import index from './allcommunit'
 let defaultTitle = {
   text: `{a|租售率}`,
@@ -120,17 +120,13 @@ 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
-          // });
           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), {
+            this.clientOptions = ringTypeEnlarges([], this.eachartObj(data), {
               subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
               ...defaultTitleEnlarge
             });
@@ -167,7 +163,7 @@ export default {
         { subtext: `{b|0%}`, ...defaultTitle })
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarge([],
+      this.clientOptions = ringTypeEnlarges([],
         [
           { name: '待租售', value: 0 },
           { name: '已售', value: 0 },

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

@@ -1497,7 +1497,7 @@ export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color
         // backgroundColor: 'rgba(8, 17, 67, 0.9)',
         title: {
             text: name,
-            left: '33%',
+            left: '37%',
             top: '35%',
             textAlign: 'center',
             textStyle: {
@@ -1512,8 +1512,8 @@ export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color
             }
         },
         polar: {
-            radius: ['52%', '72%'],
-            center: ['35%', '45%']
+            radius: ['50%', '70%'],
+            center: ['38%', '45%']
         },
         // 极坐标角度轴
         angleAxis: {

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

@@ -28,7 +28,7 @@
   </div>
 </template>
 <script>
-import { GradualChange, ringType, ringTypeEnlarge } from './indexOptionChart';
+import { GradualChange, ringType, ringTypeEnlarges } from './indexOptionChart';
 import index from './allcommunit'
 // import permissionComponent from '../permissionComponent';
 const colors = [
@@ -76,7 +76,7 @@ export default {
           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 });
+            this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
         }
       })
@@ -115,7 +115,7 @@ export default {
       );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarge(
+      this.clientOptions = ringTypeEnlarges(
         colors,
         [
           { value: 0, name: '待派单' },

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

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

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

@@ -1,97 +1,118 @@
 <template>
-    <div class="modelBlock">
-        <div class="model-title">
-            <div class="model-title-text">今日任务</div>
-        </div>
-        <div class="model-contents">
-            <!-- @click="$router.push({ path: item.path })" -->
-            <!-- <div class="number">{{ houseData[item.fontObj] }}</div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <div class="model-title">
+      <div class="model-title-text">今日任务</div>
+    </div>
+    <div class="model-contents">
+      <!-- @click="$router.push({ path: item.path })" -->
+      <!-- <div class="number">{{ houseData[item.fontObj] }}</div>
         <div class="text">{{ item.name }}</div> -->
-            <div class="blockmuen" :style="item.style" v-for="(item, index) in blockArr" :key="index">
-                <div v-if="index == 1 ? true : index == 0 ? true : false">
-                    <span class="text" style="margin-right: 20px">{{ item.name }}</span>
-                    <span class="number" style="font-size: 30px; position: relative; top: 4px">{{ item.resData }}</span>
-                </div>
-                <div v-else>
-                    <div class="number" style="font-size: 20px; margin-bottom: 10px">{{ item.resData }}</div>
-                    <div class="text">{{ item.name }}</div>
-                </div>
-            </div>
+      <div
+        :class="valueClass == 1 ?  'blockmuen' : 'blockmuenEnlarge'"
+        :style="item.style"
+        v-for="(item, index) in blockArr"
+        :key="index"
+      >
+        <div v-if="index == 1 ? true : index == 0 ? true : false">
+          <span
+            class="text"
+            style="margin-right: 20px"
+          >{{ item.name }}</span>
+          <span
+            class="number"
+            style="font-size: 30px; position: relative; top: 4px"
+          >{{ item.resData }}</span>
+        </div>
+        <div v-else>
+          <div
+            class="number"
+            style="font-size: 20px; margin-bottom: 10px"
+          >{{ item.resData }}</div>
+          <div class="text">{{ item.name }}</div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 import index from './allcommunit';
 export default {
-    mixins: [index],
-    data() {
-        return {
-            houseData: [],
-            blockArr: [
-                {
-                    style: 'background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);width: 100%; grid-area: 1/1 / span 1 / span 2; height:80px',
-                    name: '工单',
-                    resData: ''
-                },
-                {
-                    style: 'background: linear-gradient(315deg, #884DD2 0%, #DF63CC  100%);width: 100%; grid-area: 1/3 / span 1 / span 2;height:80px',
-                    name: '投诉',
-                    resData: ''
-                },
-                {
-                    style: 'background: linear-gradient(135deg, #5EEDCC 0%, #24C3F1 100%);',
-                    name: '已完成',
-                    resData: ''
-                },
-                {
-                    style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
-                    name: '未完成',
-                    resData: ''
-                },
-                {
-                    style: 'background: linear-gradient(135deg, #5EEDCC  0%, #24C3F1 100%);',
-                    name: '已处理',
-                    resData: ''
-                },
-                {
-                    style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
-                    name: '未处理',
-                    resData: ''
-                }
-            ],
-            mixins_query: {
-                communityId: '',
-                date: ''
-            }
-        };
-    },
-    methods: {
-        // 获取房屋信息
-        getData() {
-            this.$http.get('/sc-community/statisticTodayTask', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0) {
-                    this.blockArr[0].resData = data.workOrder.total;
-                    this.blockArr[1].resData = data.feedback.total;
-                    this.blockArr[2].resData = data.workOrder.completeTotal;
-                    this.blockArr[3].resData = data.workOrder.unfinishedTotal;
-                    this.blockArr[4].resData = data.feedback.completeTotal;
-                    this.blockArr[5].resData = data.feedback.unfinishedTotal;
-                }
-            });
+  mixins: [index],
+  data () {
+    return {
+      valueClass: '',
+      houseData: [],
+      blockArr: [
+        {
+          style: 'background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);width: 100%; grid-area: 1/1 / span 1 / span 2; height:80px',
+          name: '工单',
+          resData: ''
+        },
+        {
+          style: 'background: linear-gradient(315deg, #884DD2 0%, #DF63CC  100%);width: 100%; grid-area: 1/3 / span 1 / span 2;height:80px',
+          name: '投诉',
+          resData: ''
+        },
+        {
+          style: 'background: linear-gradient(135deg, #5EEDCC 0%, #24C3F1 100%);',
+          name: '已完成',
+          resData: ''
+        },
+        {
+          style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
+          name: '未完成',
+          resData: ''
+        },
+        {
+          style: 'background: linear-gradient(135deg, #5EEDCC  0%, #24C3F1 100%);',
+          name: '已处理',
+          resData: ''
+        },
+        {
+          style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
+          name: '未处理',
+          resData: ''
+        }
+      ],
+      mixins_query: {
+        communityId: '',
+        date: ''
+      }
+    };
+  },
+  methods: {
+    // 获取房屋信息
+    getData () {
+      this.$http.get('/sc-community/statisticTodayTask', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0) {
+          this.blockArr[0].resData = data.workOrder.total;
+          this.blockArr[1].resData = data.feedback.total;
+          this.blockArr[2].resData = data.workOrder.completeTotal;
+          this.blockArr[3].resData = data.workOrder.unfinishedTotal;
+          this.blockArr[4].resData = data.feedback.completeTotal;
+          this.blockArr[5].resData = data.feedback.unfinishedTotal;
         }
-    },
-    created() {
-        var date = new Date();
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
-        let resdate = date.getDate();
-        this.mixins_query.date = year + '-' + month + '-' + resdate;
-        this.getData();
+      });
     }
+  },
+  created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+    } else if (window.screen.width <= 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+    }
+    var date = new Date();
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+    let resdate = date.getDate();
+    this.mixins_query.date = year + '-' + month + '-' + resdate;
+    this.getData();
+  }
 };
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .modelBlock {
     height: 280px;
     .model-contents {
@@ -121,4 +142,18 @@ export default {
         color: #ffffff;
     }
 }
+
+.modelBlock.enlarge {
+    .blockmuenEnlarge {
+        height: 105px !important;
+        border-radius: rem(10);
+        box-sizing: border-box;
+        padding-left: rem(20);
+        padding-top: rem(20);
+        // cursor: pointer;
+        .number {
+            font-size: rem(30);
+        }
+    }
+}
 </style>