2K

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

@@ -214,6 +214,83 @@ 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: 0,
+            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%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+
 // 折现波浪
 export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
     let option = {
@@ -1428,21 +1505,21 @@ export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color
         title: {
             text: name,
             left: '33%',
-            top: '40%',
+            top: '35%',
             textAlign: 'center',
             textStyle: {
-                color: 'rgba(245, 247, 247,0.6)',
+                color: '#858892',
                 fontSize: 14
             },
             subtext: `${percent} %`,
             subtextStyle: {
-                color: 'rgba(245, 247, 247,1)',
-                fontSize: 26
+                color: '#fff',
+                fontSize: 20
             }
         },
         polar: {
-            radius: ['60%', '75%'],
-            center: ['35%', '50%']
+            radius: ['55%', '75%'],
+            center: ['35%', '45%']
         },
         // 极坐标角度轴
         angleAxis: {

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

@@ -52,7 +52,7 @@ let defaultTitle = {
 let defaultTitleEnlarge = {
   text: `{a|租售率}`,
   left: 'center',
-  top: '50%',
+  top: '40%',
   left: '19%',
   subtextStyle: {
     rich: {

operationSupport/src/views/newWorkBench/components/workbenchMent/completionMaintenanceOrder.vue

@@ -82,7 +82,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 = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
           }
         }
       })
@@ -121,7 +121,7 @@ export default {
       );
     } else if (window.screen.width == 2560 || window.screen.width > 1920) {
       this.valueClass = 2;
-      this.clientOptions = ringTypeEnlarges(
+      this.clientOptions = ringTypeEnlarge(
         colors,
         [
           { value: 0, name: '待派单' },

operationSupport/src/views/newWorkBench/components/workbenchMent/orderClassification.vue

@@ -34,7 +34,7 @@
   </div>
 </template>
 <script>
-import { ringType, ringTypeEnlarge } from '../indexOptionChart';
+import { ringType, ringTypeEnlarges } from '../indexOptionChart';
 import permissionComponent from '../permissionComponent';
 export default {
   mixins: [permissionComponent],
@@ -74,7 +74,7 @@ export default {
           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 });
+            this.clientOptions = ringTypeEnlarges([], this.eachartObj(data), {}, { type: '%', total: data.total });
           }
         }
       });

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

@@ -14,7 +14,7 @@
     </el-select>
     <div class="componentsBlock">
       <div
-        class="moveBlock"
+        :class="valueClass == 1 ? 'moveBlock' : 'moveBlockEnlarge'"
         :data-id="item.data_id"
         v-for="(item, index) in putCompArr"
         :key="index"
@@ -473,7 +473,8 @@ export default {
         },
 
       ],
-      componentsValue: 0
+      componentsValue: 0,
+      valueClass: ''
     };
   },
   computed: {
@@ -507,7 +508,13 @@ export default {
     }
   },
   destroyed () { },
-  created () { }
+  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;
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -588,6 +595,46 @@ $BackColor: #171f32;
                 }
             }
         }
+        .moveBlockEnlarge {
+            font-size: 12px;
+            // width: rem(132);
+            width: 100%;
+            height: auto;
+            // height: rem(132);
+            background: rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: rem(10);
+            margin-bottom: rem(20);
+            text-align: center;
+            position: relative;
+            cursor: move;
+            .moveBlock_titles {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                width: 100%;
+            }
+            .moveBlock_img {
+                width: rem(60);
+                margin: auto;
+                img {
+                    width: 100%;
+                    margin-top: rem(20);
+                }
+            }
+            .moveBlock_icon {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                height: rem(20);
+                img {
+                    width: rem(28);
+                    height: rem(20);
+                }
+            }
+        }
     }
 }
 </style>