圆环

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

@@ -1,138 +1,218 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <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>
-            <div class="model-content">
-                <process-circle
-                    class="item"
-                    :strokeWidth="strokeWidth"
-                    :strokeColor="strokeColor"
-                    :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>
-        </template>
-        <no-permission v-else tipsText="收款率分析"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <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>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+          style="top: 15px; width: 270px;"
+        ></zz-echart>
+        <!-- <process-circle
+            class="item"
+            :strokeWidth="strokeWidth"
+            :strokeColor="strokeColor"
+            :trailWidth="trailWidth"
+            :trailColor="trailColor"
+            :percent="(100-parseInt(dataObj.collectionRate))"
+          >
+            <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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="收款率分析"
+    ></no-permission>
+  </div>
 </template>
-<script>
+  <script>
 import processCircle from './circle'; // 环形进度条
+import { quantitativeAnalysisDashboard, quantitativeAnalysisDashboardEnlarge } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 export default {
-    mixins: [permissionComponent],
-    components: {
-        processCircle
-    },
-    data() {
-        return {
-            defaultModel: {
-                permissUrl: '14',
-                titleName: '收费管理'
-            },
-            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%'
-                    };
-                }
-            });
+  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: '水费'
+        },
+        {
+          value: 3,
+          name: '电费'
+        },
+        {
+          value: 4,
+          name: '车位费'
         },
-        changeTime(v) {
-            this.mixins_query.startTime = v;
-            this.mixins_query.endTime = v;
-            this.getData();
+        {
+          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');
-        this.getData();
+    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">
+  </script>
+  <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;
+                }
+            }
+        }
     }
 }
 
@@ -146,26 +226,6 @@ export default {
     }
 }
 
-.textAmount {
-    width: rem(100);
-    margin-top: rem(20);
-    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;
-            }
-        }
-    }
-}
 .item {
     margin-top: rem(25);
     margin-left: rem(25);
@@ -173,4 +233,27 @@ export default {
         opacity: 0.5;
     }
 }
+
+.modelBlock.enlarge {
+    .textAmount {
+        width: rem(100);
+        margin-top: rem(60);
+        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>

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

@@ -1,101 +1,132 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <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"
-                        @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>
-        </template>
-        <no-permission v-else tipsText="投诉建议类型"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <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"
+            @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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="投诉建议类型"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { ringType } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            mixins_query: {
-                communityId: '',
-                date: ''
-            },
-            defaultModel: {
-                permissUrl: 'propertyManagement/index',
-                titleName: '投诉建议'
-            },
-            date: '',
-            total: 0,
-            clientOptions: ringType(
-                [],
-                [
-                    { value: 0, name: '扰民投诉' },
-                    { value: 0, name: '物业投诉' },
-                    { value: 0, name: '公共卫生' },
-                    { value: 0, name: '安全建议' },
-                    { value: 0, name: '其他' }
-                ]
-            )
-        };
-    },
-    methods: {
-        getData() {
-            this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0) {
-                    this.clientOptions = ringType([], this.eachartObj(data));
-                }
-            });
-        },
-        changeTime(v) {
-            this.mixins_query.date = v + '-01';
-            this.getData();
-        },
-        eachartObj(data) {
-            this.total = data.total;
-            let typeName = {
-                1: '扰民投诉',
-                2: '物业投诉',
-                3: '公共卫生',
-                4: '安全建议',
-                5: '其他'
-            };
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
-                });
-            }
-            return newData;
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      mixins_query: {
+        communityId: '',
+        date: ''
+      },
+      defaultModel: {
+        permissUrl: 'propertyManagement/index',
+        titleName: '投诉建议'
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringType(
+        [],
+        [
+          { value: 0, name: '扰民投诉' },
+          { value: 0, name: '物业投诉' },
+          { value: 0, name: '公共卫生' },
+          { value: 0, name: '安全建议' },
+          { value: 0, name: '其他' }
+        ]
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community/statisticComplaint', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0) {
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType([], this.eachartObj(data));
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            // this.clientOptions = ringTypeEnlarge([], this.eachartObj(data));
+          }
         }
+      });
     },
-    created() {
-        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
-        this.date = this.$moment().format('YYYY-MM');
-        this.getData();
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    eachartObj (data) {
+      this.total = data.total;
+      let typeName = {
+        1: '扰民投诉',
+        2: '物业投诉',
+        3: '公共卫生',
+        4: '安全建议',
+        5: '其他'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: typeName[a]
+        });
+      }
+      return newData;
+    }
+  },
+  created () {
+    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: 20, name: '安全建议' },
+        { value: 10, 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: '公共卫生' },
+      //     { value: 0, name: '安全建议' },
+      //     { value: 0, name: '其他' }
+      //   ]);
     }
+    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
 };
 </script>
 <style lang="scss" scoped>
 @import './style.scss';
+@import './stylePc.scss';
 .model-title {
     .model-title-right {
         .saveColumn-select {

operationSupport/src/views/newWorkBench/components/facilityInspections/taskType.vue

@@ -1,109 +1,159 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <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"
-                        @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>
-        </template>
-        <no-permission v-else tipsText="巡检任务类型分布"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <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"
+            @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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="巡检任务类型分布"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { GradualChange, ringType } from '../indexOptionChart';
 import permissionComponent from '../permissionComponent';
 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')
 ];
 export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            defaultModel: {
-                permissUrl: 'ownerManagement/index',
-                titleName: '住户管理'
-            },
-            mixins_query: {
-                communityId: '',
-                date: ''
-            },
-            date: '',
-            total: 0,
-            clientOptions: ringType(
-                colors,
-                [
-                    { value: 0, name: 'name1' },
-                    { value: 0, name: 'name2' },
-                    { value: 0, name: 'name3' }
-                ],
-                {},
-                { type: 'number', total: 0 }
-            )
-        };
-    },
-    methods: {
-        getData() {
-            this.$http.get('/sc-community/statisticInspectionTaskType', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0 && Object.keys(data.datas).length !== 0) {
-                    this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
-                } else {
-                    this.clientOptions = ringType(
-                        colors,
-                        [
-                            { value: 0, name: 'name1' },
-                            { value: 0, name: 'name2' },
-                            { value: 0, name: 'name3' }
-                        ],
-                        {},
-                        { type: 'number', total: 0 }
-                    );
-                }
-            });
-        },
-        changeTime(v) {
-            this.mixins_query.date = v + '-01';
-            this.getData();
-        },
-        eachartObj(data) {
-            this.total = 0;
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: a
-                });
-                this.total += data.datas[a];
-            }
-            return newData;
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      defaultModel: {
+        permissUrl: 'ownerManagement/index',
+        titleName: '住户管理'
+      },
+      mixins_query: {
+        communityId: '',
+        date: ''
+      },
+      date: '',
+      total: 0,
+      clientOptions: ringType(
+        colors,
+        [
+          { value: 0, name: 'name1' },
+          { value: 0, name: 'name2' },
+          { value: 0, name: 'name3' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community/statisticInspectionTaskType', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && Object.keys(data.datas).length !== 0) {
+          //   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 {
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(
+              colors,
+              [
+                { value: 0, name: 'name1' },
+                { value: 0, name: 'name2' },
+                { value: 0, name: 'name3' }
+              ],
+              {},
+              { type: 'number', total: 0 }
+            );
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            // this.clientOptions = ringTypeEnlarge(
+            //   colors,
+            //   [
+            //     { value: 0, name: 'name1' },
+            //     { value: 0, name: 'name2' },
+            //     { value: 0, name: 'name3' }
+            //   ],
+            //   {},
+            //   { type: 'number', total: 0 }
+            // );
+          }
         }
+      });
     },
-    created() {
-        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
-        this.date = this.$moment().format('YYYY-MM');
-        this.getData();
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    eachartObj (data) {
+      this.total = 0;
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: a
+        });
+        this.total += data.datas[a];
+      }
+      return newData;
+    }
+  },
+  created () {
+    if (window.screen.width == 1920 || window.screen.width < 1920) {
+      this.valueClass = 1;
+      this.clientOptions = ringType(
+        colors,
+        [
+          { value: 0, name: 'name1' },
+          { value: 0, name: 'name2' },
+          { value: 0, name: 'name3' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      );
+    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+      this.valueClass = 2;
+      //   this.clientOptions = ringTypeEnlarge(
+      //     colors,
+      //     [
+      //       { value: 0, name: 'name1' },
+      //       { value: 0, name: 'name2' },
+      //       { value: 0, name: 'name3' }
+      //     ],
+      //     {},
+      //     { type: 'number', total: 0 }
+      //   );
     }
+    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
+    this.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -137,6 +187,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -157,4 +208,55 @@ 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;
+        }
+    }
+    .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>

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

@@ -1,85 +1,140 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-08-24 11:40:11
+ * @LastEditTime: 2022-09-02 14:55:13
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \operationSupport\src\views\newWorkBench\components\householdGender.vue
+-->
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <div class="model-title">
-                <div class="model-title-text">住户性别占比</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>
-        </template>
-        <no-permission v-else tipsText="住户性别占比"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">住户性别占比</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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="住户性别占比"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { ringType } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            defaultModel: {
-                permissUrl: 'ownerManagement/index',
-                titleName: '住户管理'
-            },
-            mixins_query: {
-                communityId: ''
-            },
-            total: 0,
-            clientOptions: ringType(
-                [],
-                [
-                    { value: 0, name: '男' },
-                    { value: 0, name: '女' }
-                ],
-                {},
-                { type: '%', total: 0 }
-            )
-        };
-    },
-    methods: {
-        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 });
-                } else {
-                    this.clientOptions = ringType(
-                        [],
-                        [
-                            { value: 0, name: '男' },
-                            { value: 0, name: '女' }
-                        ],
-                        {},
-                        { type: '%', total: 0 }
-                    );
-                }
-            });
-        },
-        eachartObj(data) {
-            this.total = data.total;
-            let typeName = {
-                1: '男',
-                2: '女'
-            };
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
-                });
-            }
-            return newData;
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      defaultModel: {
+        permissUrl: 'ownerManagement/index',
+        titleName: '住户管理'
+      },
+      mixins_query: {
+        communityId: ''
+      },
+      total: 0,
+      clientOptions: ringType(
+        [],
+        [
+          { value: 0, name: '男' },
+          { value: 0, name: '女' }
+        ],
+        {},
+        { type: '%', total: 0 }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community/statisticUserGender', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0 && !!data.datas) {
+          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 {
+          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 }
+            // );
+          }
         }
+      });
     },
-    created() {
-        this.getData();
+    eachartObj (data) {
+      this.total = data.total;
+      let typeName = {
+        1: '男',
+        2: '女'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: typeName[a]
+        });
+      }
+      return newData;
+    }
+  },
+  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>

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

@@ -1,100 +1,158 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <div class="model-title">
-                <div class="model-title-text">住户身份占比</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>
-        </template>
-        <no-permission v-else tipsText="住户身份占比"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">住户身份占比</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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="住户身份占比"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import { GradualChange, ringType } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 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')
 ];
 export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            defaultModel: {
-                permissUrl: 'ownerManagement/index',
-                titleName: '住户管理'
-            },
-            mixins_query: {
-                communityId: ''
-            },
-            total: 0,
-            clientOptions: ringType(
-                colors,
-                [
-                    { value: 0, name: '业主' },
-                    { value: 0, name: '亲属' },
-                    { value: 0, name: '租客' },
-                    { value: 0, name: '租户管理员' },
-                    { value: 0, name: '普通员工' }
-                ],
-                {},
-                { type: 'number', total: 0 }
-            )
-        };
-    },
-    methods: {
-        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 });
-                } else {
-                    this.clientOptions = ringType(
-                        colors,
-                        [
-                            { value: 0, name: '业主' },
-                            { value: 0, name: '亲属' },
-                            { value: 0, name: '租客' },
-                            { value: 0, name: '租户管理员' },
-                            { value: 0, name: '普通员工' }
-                        ],
-                        {},
-                        { type: 'number', total: 0 }
-                    );
-                }
-            });
-        },
-        eachartObj(data) {
-            this.total = data.total;
-            let typeName = {
-                1: '业主',
-                2: '亲属',
-                3: '租客',
-                4: '租户管理员',
-                5: '普通员工'
-            };
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
-                });
-            }
-            return newData;
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      defaultModel: {
+        permissUrl: 'ownerManagement/index',
+        titleName: '住户管理'
+      },
+      mixins_query: {
+        communityId: ''
+      },
+      total: 0,
+      clientOptions: ringType(
+        colors,
+        [
+          { value: 0, name: '业主' },
+          { value: 0, name: '亲属' },
+          { value: 0, name: '租客' },
+          { value: 0, name: '租户管理员' },
+          { value: 0, name: '普通员工' }
+        ],
+        {},
+        { type: 'number', total: 0 }
+      )
+    };
+  },
+  methods: {
+    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 });
+          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 {
+          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 }
+            // );
+          }
         }
+      });
     },
-    created() {
-        this.getData();
+    eachartObj (data) {
+      this.total = data.total;
+      let typeName = {
+        1: '业主',
+        2: '亲属',
+        3: '租客',
+        4: '租户管理员',
+        5: '普通员工'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: typeName[a]
+        });
+      }
+      return newData;
+    }
+  },
+  created () {
+    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();
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -148,6 +206,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -168,4 +227,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>

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

@@ -62,9 +62,24 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         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}%}`;
+                    // val = `{a|${v}}{b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
-                    val = `{a|${v}}{b|${item.value}}`;
+                    // val = `{a|${v}}{b|${item.value}}`;
+                    // 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}}`;
+                    }
                 }
             }
         });
@@ -76,7 +91,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         },
         legend: {
             orient: 'vertical',
-            right: 10,
+            right: 0,
             top: 80,
             itemGap: 10,
             itemWidth: 12, // 图例图形宽度
@@ -105,7 +120,7 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {})
         series: [
             {
                 type: 'pie',
-                radius: ['55%', '70%'],
+                radius: ['60%', '75%'],
                 avoidLabelOverlap: false,
                 center: ['25%', '50%'],
                 label: {
@@ -1235,3 +1250,185 @@ 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: 'rgba(245, 247, 247,0.6)',
+                fontSize: 12
+            },
+            subtext: `${percent} %`,
+            subtextStyle: {
+                color: 'rgba(245, 247, 247,1)',
+                fontSize: 20
+            }
+        },
+        polar: {
+            radius: ['75%', '100%'],
+            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: '40%',
+            textAlign: 'center',
+            textStyle: {
+                color: 'rgba(245, 247, 247,0.6)',
+                fontSize: 14
+            },
+            subtext: `${percent} %`,
+            subtextStyle: {
+                color: 'rgba(245, 247, 247,1)',
+                fontSize: 26
+            }
+        },
+        polar: {
+            radius: ['60%', '75%'],
+            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;
+};

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

@@ -1,129 +1,187 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <div class="model-title">
-                <div class="model-title-text">房屋租售率</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>
-        </template>
-        <no-permission v-else tipsText="房屋租售率"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <div class="model-title">
+        <div class="model-title-text">房屋租售率</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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="房屋租售率"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { ringType } from './indexOptionChart';
 import permissionComponent from './permissionComponent';
 let defaultTitle = {
-    text: `{a|租售率}`,
-    left: 'center',
-    top: '30%',
-    left: '18%',
-    subtextStyle: {
-        rich: {
+  text: `{a|租售率}`,
+  left: 'center',
+  top: '35%',
+  left: '18%',
+  subtextStyle: {
+    rich: {
+      b: {
+        fontSize: 20,
+        color: '#fff'
+      }
+    }
+  },
+  textStyle: {
+    color: '#ccc',
+    rich: {
+      a: {
+        fontSize: 12,
+        color: '#858892',
+        padding: [0, 0, 0, 3]
+      }
+    }
+  }
+};
+
+let defaultTitleEnlarge = {
+  text: `{a|租售率}`,
+  left: 'center',
+  top: '50%',
+  left: '19%',
+  subtextStyle: {
+    rich: {
+      b: {
+        fontSize: 20,
+        color: '#fff'
+      }
+    }
+  },
+  textStyle: {
+    color: '#ccc',
+    rich: {
+      a: {
+        fontSize: 14,
+        color: '#858892',
+        padding: [0, 0, 0, 3]
+      }
+    }
+  }
+};
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      mixins_query: {
+        communityId: ''
+      },
+      defaultModel: {
+        permissUrl: '11',
+        titleName: '房产管理'
+      },
+      total: 0,
+      defaultTitle: {
+        text: `{a|租售率}`,
+        left: 'center',
+        top: '35%',
+        left: '18%',
+        subtextStyle: {
+          rich: {
             b: {
-                fontSize: 30,
-                color: '#fff'
+              fontSize: 20,
+              color: '#fff'
             }
-        }
-    },
-    textStyle: {
-        color: '#ccc',
-        rich: {
+          }
+        },
+        textStyle: {
+          color: '#ccc',
+          rich: {
             a: {
-                fontSize: 12,
-                color: '#858892',
-                padding: [0, 0, 0, 3]
+              fontSize: 12,
+              color: '#858892',
+              padding: [0, 0, 0, 3]
             }
+          }
         }
-    }
-};
-export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            mixins_query: {
-                communityId: ''
-            },
-            defaultModel: {
-                permissUrl: '11',
-                titleName: '房产管理'
-            },
-            total: 0,
-            defaultTitle: {
-                text: `{a|租售率}`,
-                left: 'center',
-                top: '30%',
-                left: '18%',
-                subtextStyle: {
-                    rich: {
-                        b: {
-                            fontSize: 30,
-                            color: '#fff'
-                        }
-                    }
-                },
-                textStyle: {
-                    color: '#ccc',
-                    rich: {
-                        a: {
-                            fontSize: 12,
-                            color: '#858892',
-                            padding: [0, 0, 0, 3]
-                        }
-                    }
-                }
-            },
-            clientOptions: ringType(
-                [],
-                [
-                    { name: '待租售', value: 0 },
-                    { name: '已售', value: 0 },
-                    { name: '已租', value: 0 }
-                ],
-                { subtext: `{b|0%}`, ...defaultTitle }
-            )
-        };
-    },
-    methods: {
-        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
-                    });
-                }
+      },
+      clientOptions: ringType(
+        [],
+        [
+          { name: '待租售', value: 0 },
+          { name: '已售', value: 0 },
+          { name: '已租', value: 0 }
+        ],
+        { subtext: `{b|0%}`, ...defaultTitle }
+      )
+    };
+  },
+  methods: {
+    getData () {
+      this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0) {
+          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
             });
-        },
-        eachartObj(data) {
-            this.total = data.total;
-            let typeName = {
-                0: '待租售',
-                1: '已售',
-                2: '已租'
-            };
-            let newData = [];
-            for (let a in data.datas) {
-                newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
-                });
-            }
-            return newData;
+          } 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
+            // });
+          }
         }
+      });
     },
-    created() {
-        // this.mixins_query.date = this.$moment().format('YYYY');
-
-        this.getData();
+    eachartObj (data) {
+      this.total = data.total;
+      let typeName = {
+        0: '待租售',
+        1: '已售',
+        2: '已租'
+      };
+      let newData = [];
+      for (let a in data.datas) {
+        newData.push({
+          value: data.datas[a],
+          name: typeName[a]
+        });
+      }
+      return newData;
+    }
+  },
+  created () {
+    // this.mixins_query.date = this.$moment().format('YYYY');
+    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>

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

@@ -1,75 +1,76 @@
-@import "@assets/css/public-style.scss";
+@import '@assets/css/public-style.scss';
 .modelBlock {
-  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;
+    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);
-      }
+            span.triangle {
+                margin-top: rem(10);
+                float: right;
+                margin-right: rem(5);
+                border: 4px solid transparent;
+                border-left: 4px solid rgba(255, 255, 255, 0.5);
+            }
+        }
     }
-  }
-  .model-content {
-    height: calc(100% - #{rem(45)});
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-    position: relative;
-    .totals {
-      position: absolute;
-      right: rem(10);
-      top: rem(26);
-      width: rem(120);
-      height: rem(40);
-      background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
-      border-radius: 5px;
-      font-size: 20px;
-      padding: rem(8) rem(10);
-      display: flex;
-      justify-content: space-between;
-      .numbers {
+    .model-content {
+        height: calc(100% - #{rem(45)});
+        display: flex;
+        justify-content: space-between;
         font-size: 12px;
-        opacity: 0.5;
-        line-height: rem(32);
-      }
+        position: relative;
+        top: 10px;
+        .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);
+            }
+        }
     }
-  }
 }
 .no-permission {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
 }

operationSupport/src/views/newWorkBench/components/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;
+}

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

@@ -1,7 +1,7 @@
 <!-- 暂无数据 -->
 
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">商机来源</div>
@@ -42,6 +42,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '21',
         titleName: '商业管理'
@@ -76,7 +77,12 @@ export default {
               value: data[i].total
             })
           }
-          this.clientOptions = ringType([], newData);
+          // 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);
+          }
         }
       });
     },
@@ -86,6 +92,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();
@@ -94,6 +121,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .model-title {
     .model-title-right {
         .saveColumn-select {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">运维工单完成率</div>
@@ -47,6 +47,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '17',
         titleName: '运维工单'
@@ -77,7 +78,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 = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
       })
     },
@@ -99,6 +105,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 = ringTypeEnlarges(
+      //   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();
@@ -136,6 +171,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -156,4 +192,55 @@ 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;
+        }
+    }
+    .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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">投诉建议类型分布</div>
@@ -47,6 +47,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '17',
         titleName: '运维工单'
@@ -75,7 +76,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 > 1920 || window.screen.width <= 2560) {
+            this.clientOptions = ringTypeEnlarge(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
       })
     },
@@ -104,6 +110,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();
@@ -144,6 +179,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -164,4 +200,55 @@ 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;
+        }
+    }
+    .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>

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

@@ -1,5 +1,13 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-08-24 11:40:11
+ * @LastEditTime: 2022-09-02 15:26:12
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \operationSupport\src\views\newWorkBench\components\workbenchMent\enterpriseDistribution.vue
+-->
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">企业类型分布</div>
@@ -28,6 +36,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '21',
         titleName: '商业管理'
@@ -53,7 +62,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 = ringTypeEnlarges([], this.eachartObj(data), {}, { type: '', total: data.total });
+          }
         }
       });
     },
@@ -77,12 +91,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 = ringTypeEnlarges(
+      //   [],
+      //   [
+      //     { 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;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">运维工单分类</div>
@@ -40,6 +40,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '17',
         titleName: '运维工单'
@@ -69,7 +70,12 @@ 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 });
+          // 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 = ringTypeEnlarges([], this.eachartObj(data), {}, { type: '%', total: data.total });
+          }
         }
       });
     },
@@ -90,6 +96,30 @@ 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 = ringTypeEnlarges(
+      //   [],
+      //   [
+      //     { 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();
@@ -98,4 +128,5 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">巡检任务完成率</div>
@@ -47,6 +47,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '18',
         titleName: '设备巡检'
@@ -75,7 +76,12 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticInspectionTaskCompletionRate', 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 = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
       })
     },
@@ -103,6 +109,36 @@ 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 = ringTypeEnlarges(
+      //   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();
@@ -140,6 +176,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -160,4 +197,55 @@ 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;
+        }
+    }
+    .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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="modelBlock">
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
     <template v-if="permissionFiltering">
       <div class="model-title">
         <div class="model-title-text">巡更任务完成率</div>
@@ -47,6 +47,7 @@ export default {
   mixins: [permissionComponent],
   data () {
     return {
+      valueClass: '',
       defaultModel: {
         permissUrl: '19',
         titleName: '安保巡更'
@@ -75,7 +76,12 @@ export default {
     getData () {
       this.$http.get('/sc-community/statisticPatrolCompletionRate', 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 = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
+          }
         }
       })
     },
@@ -103,6 +109,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 = ringTypeEnlarges(
+      //   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();
@@ -140,6 +175,7 @@ export default {
         justify-content: space-between;
         font-size: 12px;
         position: relative;
+        top: 10px;
         .totals {
             position: absolute;
             right: rem(10);
@@ -160,4 +196,55 @@ 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;
+        }
+    }
+    .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>

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

@@ -1,171 +1,202 @@
 <template>
-    <div class="modelBlock">
-        <template v-if="permissionFiltering">
-            <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"
-                        @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>
-            <div class="model-content">
-                <zz-echart :option="clientOptions" class="chart"></zz-echart>
-                <div class="totals">
-                    <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ total }}</span>
-                    <span class="numbers" style="white-space: nowrap">总收入</span>
-                </div>
-            </div>
-        </template>
-        <no-permission v-else tipsText="收入方式占比"></no-permission>
-    </div>
+  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
+    <template v-if="permissionFiltering">
+      <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"
+            @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>
+      <div class="model-content">
+        <zz-echart
+          :option="clientOptions"
+          class="chart"
+        ></zz-echart>
+        <div class="totals">
+          <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ total }}</span>
+          <span
+            class="numbers"
+            style="white-space: nowrap"
+          >总收入</span>
+        </div>
+      </div>
+    </template>
+    <no-permission
+      v-else
+      tipsText="收入方式占比"
+    ></no-permission>
+  </div>
 </template>
 <script>
 import { GradualChange, ringType } from '../indexOptionChart';
 import permissionComponent from '../permissionComponent';
 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')
 ];
 export default {
-    mixins: [permissionComponent],
-    data() {
-        return {
-            defaultModel: {
-                permissUrl: '14',
-                titleName: '收费管理'
-            },
-            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: 'number', total: 0 }
-            )
-        };
+  mixins: [permissionComponent],
+  data () {
+    return {
+      valueClass: '',
+      defaultModel: {
+        permissUrl: '14',
+        titleName: '收费管理'
+      },
+      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: 'number', total: 0 }
+      )
+    };
+  },
+  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: 'number', total: this.total });
+          if (window.screen.width == 1920 || window.screen.width < 1920) {
+            this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: this.total });
+          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
+            // this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: 'number', total: this.total });
+          }
+        }
+      });
     },
-    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: 'number', total: this.total });
-                } else {
-                    this.clientOptions = ringType(
-                        colors,
-                        [
-                            { value: 0, name: '微信' },
-                            { value: 0, name: '支付宝' },
-                            { value: 0, name: '现金' },
-                            { value: 0, name: '预存' },
-                            { value: 0, name: '其他' }
-                        ],
-                        {},
-                        { type: '%', total: 0 },
-                        30
-                    );
-                    this.total = 0;
-                }
-            });
-        },
-        changeTime(v) {
-            this.mixins_query.date = v + '-01';
-            this.getData();
-        },
-        unitConvert(num) {
-            var moneyUnits = ['元', '万元', '亿元', '万亿'];
-            var dividend = 10000;
-            var curentNum = num;
-            //转换数字
-            var curentUnit = moneyUnits[0];
-            //转换单位
-            for (var i = 0; i < 4; i++) {
-                curentUnit = moneyUnits[i];
-                if (this.strNumSize(curentNum) < 5) {
-                    break;
-                }
-                curentNum = curentNum / dividend;
-            }
-            var m = { num: '', unit: '' };
-            m.num = curentNum.toFixed(2);
-            m.unit = curentUnit;
-            return m;
-        },
-        strNumSize(tempNum) {
-            var stringNum = tempNum.toString();
-            var index = stringNum.indexOf('.');
-            var newNum = stringNum;
-            if (index != -1) {
-                newNum = stringNum.substring(0, index);
-            }
-            return newNum.length;
-        },
-        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;
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    unitConvert (num) {
+      var moneyUnits = ['元', '万元', '亿元', '万亿'];
+      var dividend = 10000;
+      var curentNum = num;
+      //转换数字
+      var curentUnit = moneyUnits[0];
+      //转换单位
+      for (var i = 0; i < 4; i++) {
+        curentUnit = moneyUnits[i];
+        if (this.strNumSize(curentNum) < 5) {
+          break;
         }
+        curentNum = curentNum / dividend;
+      }
+      var m = { num: '', unit: '' };
+      m.num = curentNum.toFixed(2);
+      m.unit = curentUnit;
+      return m;
+    },
+    strNumSize (tempNum) {
+      var stringNum = tempNum.toString();
+      var index = stringNum.indexOf('.');
+      var newNum = stringNum;
+      if (index != -1) {
+        newNum = stringNum.substring(0, index);
+      }
+      return newNum.length;
     },
-    created() {
-        this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
-        this.date = this.$moment().format('YYYY-MM');
-        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 = 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 = ringTypeEnlarges(
+      //     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();
+  }
 };
 </script>
 <style lang="scss" scoped>
 @import '../style.scss';
+@import '../stylePc.scss';
 .model-title {
     .model-title-right {
         .saveColumn-select {