BUG

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

@@ -70,7 +70,8 @@ export default {
         distributionSuggestion: (resolve) => require([`@views/${comUrl}workbenchMent/distributionSuggestion.vue`], resolve),
         scoringOperationPersonnel: (resolve) => require([`@views/${comUrl}workbenchMent/scoringOperationPersonnel.vue`], resolve),
         quantitativeAnalysis: (resolve) => require([`@views/${comUrl}quantitativeAnalysis.vue`], resolve),
-        PatrolProblem: (resolve) => require([`@views/${comUrl}PatrolProblem.vue`], resolve)
+        PatrolProblem: (resolve) => require([`@views/${comUrl}PatrolProblem.vue`], resolve),
+        patrolPointsTen: (resolve) => require([`@views/${comUrl}patrolPointsTen.vue`], resolve)
     },
     data() {
         return {
@@ -119,7 +120,8 @@ export default {
                 40: 'distributionSuggestion',
                 41: 'scoringOperationPersonnel',
                 42: 'quantitativeAnalysis',
-                43: 'PatrolProblem'
+                43: 'PatrolProblem',
+                44: 'patrolPointsTen'
             }
         };
     },

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

@@ -532,7 +532,6 @@ export const columnOptionsChartName = (name = '', xAxis = [], series = [], color
                 // interval: 0,
                 // rotate: 45,
                 formatter: function (params, index) {
-                    console.log('88888', params);
                     if (params.length > 5) {
                         return `${params.slice(0, 3)}...`;
                     } else {
@@ -693,7 +692,180 @@ export const columnOptionsChartNameTilt = (name = '', xAxis = [], series = [], c
                 // interval: 0,
                 rotate: 45,
                 formatter: function (params, index) {
-                    console.log('88888', params);
+                    if (params.length > 5) {
+                        return `${params.slice(0, 3)}...`;
+                    } else {
+                        return params;
+                    }
+                    // return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: false,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};
+
+//柱状name  单柱状  x轴倾斜   多条提示信息
+export const columnOptionsChartNameTiltes = (name = '', xAxis = [], series = [], color = [], barWidth = 6, name1 = [], name2 = []) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[0].data.push(item.data);
+        });
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    // console.log(item.dataIndex);
+                    el += `
+                    <p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>${item.name}：${item.value}${name}</span>
+                      </p>
+                      <p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>所属社区：${name1[item.dataIndex]}</span>
+                      </p>
+                      <p style="text-align: left;">
+                      <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+                        ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                                    <span>时间：${name2[item.dataIndex]}</span>
+                        </p>
+                      
+                      `;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 10,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                // interval: 0,
+                rotate: 45,
+                formatter: function (params, index) {
                     if (params.length > 5) {
                         return `${params.slice(0, 3)}...`;
                     } else {

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

@@ -0,0 +1,122 @@
+<!--
+ * @Author: 韩玮涛
+ * @Date: 2022-08-09 09:55:42
+ * @LastEditTime: 2022-08-09 10:58:33
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \operationSupport\src\views\newWorkBench\components\patrolPointsTen.vue
+-->
+<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>
+    </template>
+    <no-permission
+      v-else
+      tipsText="巡更点异常前十排行"
+    ></no-permission>
+  </div>
+</template>
+<script>
+import { columnOptionsChartNameTiltes } from './indexOptionChart';
+import permissionComponent from './permissionComponent';
+export default {
+  mixins: [permissionComponent],
+  data () {
+    return {
+      defaultModel: {
+        permissUrl: '19',
+        titleName: '安保巡更'
+      },
+      mixins_query: {
+        communityId: '',
+        date: ''
+      },
+      date: '',
+      clientOptions: columnOptionsChartNameTiltes(
+        '(个)',
+        ['name1', 'name2', 'name3'],
+        [
+          {
+            name: 'name1',
+            data: 0
+          },
+          {
+            name: 'name2',
+            data: 0
+          },
+          {
+            name: 'name3',
+            data: 0
+          }
+        ],
+        [],
+        10, ['测试', '测试', '测试'], ['测试', '测试', '测试']
+      )
+    };
+  },
+  methods: {
+    changeTime (v) {
+      this.mixins_query.date = v + '-01';
+      this.getData();
+    },
+    getData () {
+      this.$http.get('/czc-community/statisticTheTopTenPatrolPoints', this.mixins_query).then(({ data, msg, status }) => {
+        if (status == 0) {
+          let name = [];
+          let resDate = [];
+          let name1 = [];
+          let name2 = [];
+          data.map((item, index) => {
+            name1.push(item.communityName);
+            name2.push(item.date);
+            name.push(item.type)
+            resDate.push({
+              name: item.type,
+              data: item.nums
+            })
+          })
+          this.clientOptions = columnOptionsChartNameTiltes('(个)', name, resDate, [], 10, name1, name2);
+        }
+      })
+    }
+  },
+  created () {
+    this.date = this.$moment().format('YYYY-MM') + '-01';
+    this.mixins_query.date = this.$moment().format('YYYY-MM');
+    this.getData();
+  }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: rem(20);
+            }
+        }
+    }
+}
+</style>

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

@@ -489,6 +489,15 @@ export default {
           isPosition: '2x1',
           compatible: true
         },
+        {
+          data_id: 44,
+          title: '巡更点异常前十排行',
+          type: 8,
+          imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
+          imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
+          isPosition: '2x1',
+          compatible: true
+        },
 
       ],
       componentsValue: 0