<template> <div class="app-container homeA"> <div clss="div-row"> <!--<div class="div-col1"> <el-card> <div style="width: 50%;height: 100%;text-align: center;float: left;font-size: 15px;"> <img src="../assets/taskDistribution.png" width="15%" style="margin-top: 2.5rem;"> <p>车辆信息</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.taskTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/taskFeedback.png" width="15%" style="margin-top: 2.5rem;"> <p>气瓶追溯</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">0</div> </el-card> </div>--> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%;text-align: center;float: left;font-size: 15px;"> <img src="../assets/taskDistribution.png" width="15%" style="margin-top: 2.5rem;"> <p>巡检巡查任务</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.taskTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/taskFeedback.png" width="15%" style="margin-top: 2.5rem;"> <p>入户安检任务</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.taskFeedbackTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/complaint.png" width="15%" style="margin-top: 2.5rem;"> <p>投诉处置</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.complaintTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/complaintFeedback.png" width="15%" style="margin-top: 2.5rem;"> <p>投诉反馈</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.complaintFeedbackTotal}}</div> </el-card> </div> </div> <div clss="div-row"> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/video.png" width="15%" style="margin-top: 2.5rem;"> <p>视频监控</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.videoTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/equipment.png" width="15%" style="margin-top: 2.5rem;"> <p>安全装置</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.equipmentTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/trouble.png" width="15%" style="margin-top: 2.5rem;"> <p>燃气事故</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.troubleTotal}}</div> </el-card> </div> <div class="div-col1"> <el-card> <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;"> <img src="../assets/hidden.png" width="15%" style="margin-top: 2.5rem;"> <p>隐患整治</p> </div> <div style="width: 50%;height: 100%;text-align: center;line-height: 8rem;float: right;font-size: 2.5rem;font-family: 'UnidreamLED';">{{totalObj.hiddenTotal}}</div> </el-card> </div> </div> <div clss="div-row"> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/operationMonitor/monitorData')" v-if="'-2' == this.$store.state.user.enterpriseId"> <el-card> <img src="../assets/dataMonitor.png" width="20%"/> <p>数据监控</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/emergency/eventInfo')" v-if="'-2' == this.$store.state.user.enterpriseId"> <el-card> <img src="../assets/emergency.png" width="20%"/> <p>应急处置</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/regulation/info')" v-if="'-2' == this.$store.state.user.enterpriseId"> <el-card> <img src="../assets/enterprise.png" width="20%"/> <p>燃气企业</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/regulation/gasuser')"> <el-card> <img src="../assets/user.png" width="20%"/> <p>燃气用户</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/regulation/station')"> <el-card> <img src="../assets/station.png" width="20%"/> <p>场站信息</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/regulation/pipe')"> <el-card> <img src="../assets/pipe.png" width="20%"/> <p>管道信息</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/regulation/device')"> <el-card> <img src="../assets/device.png" width="20%"/> <p>设备信息</p> </el-card> </div> <div :class="'-2' == this.$store.state.user.enterpriseId?'div-col2':'div-col2-en'" @click="$router.push('/standingBook/equipment')"> <el-card> <img src="../assets/addDetector.png" width="20%"/> <p>用户加装安全装置</p> </el-card> </div> </div> <div class="div-row"> <div class="div-col3"> <el-card> <!--<div slot="header"> <span>任务下发</span> <span class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/operationMonitor/workOrder')">更多>></span> </div>--> <div slot="header"> <span>巡检巡查任务</span> <span v-if="'-2' == this.$store.state.user.enterpriseId" class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/inspectionWork/workOrderInspectionAndPatrol')">更多>></span> <span v-else class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/inspectionWork/PatrolTask')">更多>></span> </div> <div class="body"> <el-table v-loading="orderLoading" :data="orderList" height="354" style="width: 100%; border: 1px solid #e6ebf5;"> <!-- <el-table-column label="序号" type="index" align="center"/> <el-table-column label="任务类型" align="center" prop="workType" width="90"> <template slot-scope="scope"> <span v-if="scope.row.workType == '1'">入户安检</span> <span v-if="scope.row.workType == '2'">巡检</span> <span v-if="scope.row.workType == '3'">报警巡查</span> <span v-if="scope.row.workType == '4'">其他</span> </template> </el-table-column> <el-table-column label="任务名称" align="left" prop="workTitle"/> <el-table-column label="创建时间" align="center" prop="createTime" width="200"/> <el-table-column label="状态" align="center" prop="workStatus" width="100"> <template slot-scope="scope"> <span v-if="scope.row.workStatus == 0" style="color: #ff7272">派发中</span> <span v-if="scope.row.workStatus == 1" style="color: #ffba00">已接单</span> <span v-if="scope.row.workStatus == 2" style="color: #1890ff">已反馈</span> <span v-if="scope.row.workStatus == 3" style="color: #30B46B">已归档</span> </template> </el-table-column>--> <el-table-column label="任务标题" align="center" prop="taskTitle" width="200" :show-overflow-tooltip="true"/> <el-table-column label="任务类型" align="center" prop="taskType" :formatter="taskTypeFormatter"/> <el-table-column label="任务状态" align="center" prop="status" :formatter="taskStatusFormatter"/> <el-table-column label="所属单位" align="center" prop="createEnterpriseId" :formatter="enterpriseFormatter"/> <el-table-column label="开始时间" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="截止时间" align="center" prop="endTime" width="180"> <template slot-scope="scope"> <span v-if="scope.row.endTime">{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> </el-table> </div> </el-card> </div> <div class="div-col3"> <el-card> <div slot="header"> <span>投诉处置</span> <span class="div-header" style="cursor: pointer; float: right;" @click="$router.push('/complainDeal')">更多>></span> </div> <div class="body"> <el-table v-loading="complainLoading" :data="complainList" height="355" style="width: 100%; border: 1px solid #e6ebf5;"> <el-table-column label="序号" type="index" align="center"/> <el-table-column label="投诉事项" align="left" prop="complainMatter"/> <el-table-column label="投诉时间" align="center" prop="createTime" width="200"/> <el-table-column label="状态" align="center" prop="complainStatus" width="100"> <template slot-scope="scope"> <span v-if="scope.row.complainStatus == '1'" style="color: #ff7272">派发中</span> <span v-if="scope.row.complainStatus == '2'" style="color: #1890ff">已反馈</span> <span v-if="scope.row.complainStatus == '3'" style="color: #30B46B">已归档</span> </template> </el-table-column> </el-table> </div> </el-card> </div> </div> </div> </template> <script> import { homepageStatistic } from "@/api/statistic/statisticAnalysis"; import { listOrder } from "@/api/operationMonitor/order"; import { listComplainDeal } from "@/api/complainDeal/complainDeal"; import { listTask } from "@/api/inspectionWork/workTask"; import { enterpriseLists } from "@/api/regulation/info"; export default { name: "index", data() { return { // 遮罩层 orderLoading: true, complainLoading: true, // 统计数据 totalObj: {}, // 列表数据 orderList: [], complainList: [], // 总条数 orderTotal: 0, complainTotal: 0, // 查询参数 orderParams: { pageNum: 1, pageSize: 10, isDel: '0' }, complainParams: { pageNum: 1, pageSize: 10, isDel: '0' }, workTaskType: [], workTaskStatus: [] }; }, created(){ // 默认配置 console.log(this.$store.state.settings) }, mounted() { this.getEnterpriseLists(); this.getWorkTaskType(); this.getWorkTaskStatus(); this.getStatiData(); this.getOrderList(); this.getComplainDealList(); }, methods: { getStatiData() { homepageStatistic().then(response => { this.totalObj = response.data; console.log("this.totalObj",this.totalObj) }); }, getOrderList() { this.orderLoading = true; /*listOrder(this.orderParams).then(response => { this.orderList = response.rows.slice(0, 7); this.orderTotal = response.total; this.orderLoading = false; });*/ if('-2' != this.$store.state.user.enterpriseId){ this.orderParams.taskType = 1; } listTask(this.orderParams).then(res =>{ this.orderList = res.rows.slice(0, 7); this.orderTotal = res.total; this.orderLoading = false; }) }, getComplainDealList() { this.complainLoading = true; listComplainDeal(this.complainParams).then(response => { this.complainList = response.rows.slice(0, 7); this.complainTotal = response.total; this.complainLoading = false; }); }, goTarget(href) { window.open(href, "_blank"); }, getWorkTaskType(){ this.getDicts("t_work_task_type").then(response => { this.workTaskType = response.data; }); }, getWorkTaskStatus(){ this.getDicts("t_work_task_status").then(response => { this.workTaskStatus = response.data; }); }, //任务类型 taskTypeFormatter(row){ return this.selectDictLabel(this.workTaskType, row.taskType); }, //任务状态 taskStatusFormatter(row){ return this.selectDictLabel(this.workTaskStatus, row.status); }, enterpriseFormatter(row){ let info = this.enterprises.find(item => item.enterpriseId == row.createEnterpriseId); return info?info.enterpriseName:"-"; }, getEnterpriseLists(){ enterpriseLists().then(response => { this.enterprises = response.rows; this.enterprises.push({enterpriseId:-2,enterpriseName:"政府部门"}) }); }, }, }; </script> <style scoped lang="scss"> .homeA { div { color: #515a6e; } .col-item { margin-bottom: 20px; } padding: 10px; font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; overflow-x: hidden; p { margin: 0px; color: #515a6e; } .div-col1 { width: 25%; padding: 6px; float: left; } .div-col2 { width: 12.5%; padding: 9px 6px; float: left; text-align: center; cursor: pointer; } .div-col2-en { width: 20%; padding: 9px 6px; float: left; text-align: center; cursor: pointer; img{ width: 11%; } } .div-col3 { width: 50%; padding: 6px; float: left; } .div-header:hover { text-decoration:underline; color: #1890ff; } } </style>