巡更增加导出pdf,投诉分析

energyManagement/src/views/refrigeration/monitors/index.vue

@@ -53,9 +53,13 @@ export default {
                     prop: 'humidity'
                 },
                 {
-                    label: '用电量(kwh)',
+                    label: '用电量1(kwh)',
                     prop: 'electricEnergy'
                 },
+                {
+                    label: '用电量2(kwh)',
+                    prop: 'electricEnergySecond'
+                },
                 {
                     label: '累计冷量(kwh)',
                     prop: 'coolingCapacity'

operationSupport/package.json

@@ -18,6 +18,7 @@
     "bpmn-moddle": "5.1.6",
     "element-ui": "^2.11.0",
     "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
     "mavon-editor": "^2.6.17",
     "moment": "^2.29.1",
     "node-sass": "^4.14.1",

operationSupport/src/utils/pdf.js

@@ -0,0 +1,34 @@
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+// import modal from '../plugins/modal'
+
+export const downloadPDF = (page) => {
+    // modal.loading('pdf生成中，请稍后')
+    let dpi = 400
+    html2canvas(page, {
+        dpi: dpi, // 设置截图的分辨率
+        scale: dpi / 96, // 设置截图缩放比例，以适应pdf的dpi
+    }).then(function (canvas) {
+        canvas2PDF(canvas)
+    })
+}
+
+const canvas2PDF = (canvas) => {
+    // 第一个参数： l：横向  p：纵向
+    // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
+    let pdf = new jsPDF('l', 'pt')
+    let imgData = canvas.toDataURL('image/jpeg', 1.0)
+
+    // let image = new Image()
+    // image.src = imgData
+    // let w = window.open('')
+    // w.document.write(image.outerHTML)
+
+    const imgProps = pdf.getImageProperties(imgData)
+    const pdfWidth = pdf.internal.pageSize.getWidth()
+    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
+    pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight)
+
+    pdf.save('导出.pdf')
+    // modal.closeLoading()
+}

operationSupport/src/views/patrolManagement/popups/weekEdit.vue

@@ -12,6 +12,16 @@
         @change="weekChange"
       ></el-date-picker>
       <div class="search-icon">
+        <el-tooltip
+          effect="light"
+          placement="bottom"
+          content="导出pdf"
+        >
+          <i
+            class="zoniot_font zoniot-icon-daochu2"
+            @click="exportPdf()"
+          ></i>
+        </el-tooltip>
         <el-tooltip
           effect="light"
           placement="bottom"
@@ -24,7 +34,7 @@
         </el-tooltip>
       </div>
     </div>
-    <div class="scheduling-table">
+    <div class="scheduling-table" ref="schedulingRef">
       <div class="scheduling-table-head">
         <div class="head-week">周一 {{ $moment(timeObj.monday).format('M/DD') }}</div>
         <div class="head-week">周二 {{ $moment(timeObj.tuesday).format('M/DD') }}</div>
@@ -46,6 +56,7 @@
 </template>
 <script>
 import weekContent from '../components/weekContent.vue';
+import { downloadPDF } from '@/utils/pdf.js'
 export default {
   components: {
     weekContent
@@ -93,6 +104,9 @@ export default {
     }
   },
   methods: {
+    exportPdf() {
+      downloadPDF(this.$refs.schedulingRef)
+    },
     goback () {
       this.$emit('initPage');
     },

operationSupport/src/views/propertyManagement/complaintAnalysis.vue

@@ -0,0 +1,271 @@
+<template>
+    <div>
+        <div class="search">
+            <el-select placeholder="请选择所属社区" v-model="communityId" clearable>
+                <el-option v-for="(item, index) in communityList" :key="index" :label="item.communityName" :value="item.id"></el-option>
+            </el-select>
+            <el-date-picker
+                v-model="pickerTime"
+                value-format="yyyyMM"
+                type="monthrange"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                @change="timeToggle"
+                :editable="false"
+            ></el-date-picker>
+            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search" v-preventReClick>查询 </el-button>
+        </div>
+        <div class="chart-wrap">
+            <zz-echart :option="complaintOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            //社区列表
+            communityList: [],
+            communityId: '',
+            pickerTime: ['', ''],
+            complaintOptions: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#283b56'
+                        }
+                    }
+                },
+                toolbox: {
+                    feature: {
+                        dataView: { show: true, readOnly: false },
+                        magicType: { show: true, type: ['line', 'bar'] },
+                        restore: { show: true },
+                        saveAsImage: { show: true }
+                    }
+                },
+                legend: {
+                    data: ['扰民投诉', '其他', '物业服务', '公共卫生', '服务质量', '安全建议', '总数']
+                },
+                grid: {
+                    top: 80,
+                    left: 40,
+                    bottom: 40,
+                    right: 40,
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: [],
+                        axisLine: {
+                            show: false // 不显示坐标轴
+                        },
+                        axisTick: {
+                            show: false // 不显示坐标轴刻度
+                        },
+                        axisLabel: {
+                            formatter: function (params, index) {
+                                return params.slice(4) + '月';
+                            },
+                            color: '#9B9DA5',
+                            margin: 15
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '次数',
+                        min: 0,
+                        axisLabel: {
+                            formatter: '{value} 次'
+                        },
+                        axisLine: {
+                            show: false //y轴线消失
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed' //虚线
+                            },
+                            show: true //隐藏
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '总数',
+                        min: 0,
+                        axisLabel: {
+                            formatter: '{value} 次'
+                        },
+                        axisLine: {
+                            show: false //y轴线消失
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed' //虚线
+                            },
+                            show: true //隐藏
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '扰民投诉',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '其他',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '物业服务',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '公共卫生',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '服务质量',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '安全建议',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '总数',
+                        type: 'line',
+                        smooth: true,
+                        yAxisIndex: 1,
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' 次';
+                            }
+                        },
+                        data: []
+                    }
+                ]
+            }
+        };
+    },
+
+    created() {
+        let nowDate = new Date();
+        let nowYear = this.$moment(nowDate).format('YYYYMM');
+        let lasteYear = this.$moment(nowDate).subtract(1, 'years').format('YYYYMM');
+        this.pickerTime = [lasteYear, nowYear];
+        this.getCommunityList();
+        this.mixins_search();
+    },
+
+    methods: {
+        mixins_search() {
+            this.statisticComplaintCategory();
+        },
+
+        updateChart(data) {
+            let xAxisData = [];
+            let complaintData = [];
+            let otherData = [];
+            let propertyServiceData = [];
+            let publicHealthData = [];
+            let qualityServiceData = [];
+            let securityData = [];
+            let totalData = [];
+            data.forEach((item) => {
+                xAxisData.push(item.month);
+                complaintData.push(item.complaint);
+                otherData.push(item.other);
+                propertyServiceData.push(item.propertyService);
+                publicHealthData.push(item.publicHealth);
+                qualityServiceData.push(item.qualityService);
+                securityData.push(item.security);
+                totalData.push(item.total);
+            });
+            this.complaintOptions.xAxis[0].data = xAxisData;
+            this.complaintOptions.series[0].data = complaintData;
+            this.complaintOptions.series[1].data = otherData;
+            this.complaintOptions.series[2].data = propertyServiceData;
+            this.complaintOptions.series[3].data = publicHealthData;
+            this.complaintOptions.series[4].data = qualityServiceData;
+            this.complaintOptions.series[5].data = securityData;
+            this.complaintOptions.series[6].data = totalData;
+        },
+
+        statisticComplaintCategory() {
+            this.$http
+                .get('/sc-community/feedback/statisticComplaintCategory', {
+                    communityId: this.communityId,
+                    startMonth: this.pickerTime[0],
+                    endMonth: this.pickerTime[1]
+                })
+                .then(({ data, msg, status }) => {
+                    if (status == 0) {
+                        this.updateChart(data);
+                    }
+                });
+        },
+
+        /** 获取社区列表*/
+        getCommunityList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                    this.$store.commit('setAreaSelect', data);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+  .chart-wrap {
+    width: 100%;
+    height: 700px;
+    background: white;
+    padding-top: 20px;
+  }
+</style>