You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
593 lines
16 KiB
593 lines
16 KiB
<template>
|
|
<div class="m-jdjs">
|
|
<div class="m-jdjs-js">
|
|
<div class="m-table">
|
|
<table class="table" border="0" cellspacing="0" cellpadding="0">
|
|
<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
|
|
<thead>
|
|
<tr class="table-header">
|
|
<th class="table-header-th" v-for="item in header" :key="item">
|
|
{{ item }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<el-scrollbar :style="{maxHeight:treeHeight}" class="g-scrollar">
|
|
<table class="table" border="0" cellspacing="0" cellpadding="0">
|
|
<col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
|
|
<tbody class="table-body" style="width: 1886px;">
|
|
<!-- <tr class="table-body-tr">
|
|
<td class="td">
|
|
报警时间
|
|
</td>
|
|
<td class="td">
|
|
报警类型
|
|
</td>
|
|
<td class="td">
|
|
报警状态
|
|
</td>
|
|
<td class="td">
|
|
设备位置
|
|
</td>
|
|
<td class="td">
|
|
操作</td>
|
|
</tr> -->
|
|
<tr class="table-body-tr" v-for="(item, index) in list" :key="index" >
|
|
<td class="td">
|
|
<div>{{ item.date }}</div>
|
|
</td>
|
|
<td class="td">
|
|
<div>{{ item.baoxiu }}</div>
|
|
</td>
|
|
<td class="td">
|
|
<div>{{ item.type }}</div>
|
|
</td>
|
|
<td class="td">
|
|
<div>{{ item.address }}</div>
|
|
</td>
|
|
<td class="table-header-th" style="color: #007FF1;">
|
|
<div @click="getWaring(item)">查看</div> </td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
<!-- </div> -->
|
|
</table>
|
|
</el-scrollbar>
|
|
<!-- <el-table :data="tableData" stripe style="width: 428px">
|
|
<el-table-column prop="date" label="日期">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名">
|
|
</el-table-column>
|
|
<el-table-column prop="address" label="地址">
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table> -->
|
|
</div>
|
|
|
|
<!-- <video src="../image/123.mp4" />
|
|
<video src="../image/123.mp4" />
|
|
<video src="../image/123.mp4" />
|
|
<video src="../image/123.mp4" /> -->
|
|
</div>
|
|
<warning :showInfo="showInfo" :warnItem="warnItem" @close="close" @handleCancle="showInfo = false"></warning>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import warning from "@/views/dataBoard/IoTPerception/more/warning.vue";
|
|
import { mapGetters} from "vuex";
|
|
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
|
|
import * as echarts from "echarts";
|
|
import resiCategoryMap from "@/views/business/resi-category-map.js";
|
|
import {requestPost} from "@/js/dai/request";
|
|
|
|
export default {
|
|
name: "jdjs",
|
|
props: {
|
|
currentLevelData: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
colList: [
|
|
{
|
|
align: "left",
|
|
width: "20%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "20%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "20%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "25%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "15%",
|
|
},
|
|
|
|
],
|
|
header: [
|
|
"保修时间",
|
|
"保修类型",
|
|
"报警状态",
|
|
"设备位置",
|
|
"操作",
|
|
],
|
|
list: [],
|
|
equipmentListType: [],
|
|
equipmentType: '',
|
|
orgId: this.$store.state.chooseArea.chooseName,
|
|
report: "",
|
|
overview: "",
|
|
loading: false,
|
|
rffxDate:'',
|
|
event12345Num:"",
|
|
provinceSatisfactionNum:"",
|
|
selfInspectNum:"",
|
|
typeConditionList: [
|
|
{
|
|
label: "本月",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "上月",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "近三月",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "近半年",
|
|
value: 4,
|
|
},
|
|
{
|
|
label: "近一年",
|
|
value: 5,
|
|
},
|
|
],
|
|
typeCondition:5,
|
|
endTime:"",
|
|
startTime:"",
|
|
showInfo:false,
|
|
warnItem:{},
|
|
};
|
|
},
|
|
watch: {
|
|
currentLevelData(val) {
|
|
if (val.orgId) {
|
|
this.getReport(val);
|
|
this.getData();
|
|
this.getChartData(val);
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
treeHeight() {
|
|
return this.$store.state.inIframe ? this.clientHeight - 385 + this.iframeHeight + "px" : this
|
|
.clientHeight - 385 + "px";
|
|
},
|
|
treeWidth() {
|
|
return document.documentElement.clientWidth;
|
|
},
|
|
...mapGetters(["clientHeight", "iframeHeight"]),
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
components: {
|
|
titleSmall,warning
|
|
},
|
|
methods: {
|
|
async getList(){
|
|
let {data,code} = await requestPost('/actual/base/equipmentInspectRecord/page',{agencyId:this.$store.state.user.agencyId})
|
|
if(code === 0){
|
|
this.list = data.list.map(item=>({date:item.inspectTime,baoxiu:item.inspectName,type:item.status,address:'东明社区160号',inspectCode:item.inspectCode?item.inspectCode:'',id:item.id}))
|
|
}
|
|
},
|
|
close(){this.showInfo=false},
|
|
getWaring(item){
|
|
|
|
this.warnItem = item;
|
|
|
|
this.showInfo=true
|
|
|
|
},
|
|
|
|
getReport({ orgId, orgLevel }) {
|
|
this.$http
|
|
.get(
|
|
"/actual/base/streetOverview/communityOverview?orgId=" +
|
|
orgId +
|
|
"&level=" +
|
|
orgLevel
|
|
)
|
|
.then(({ data: { data } }) => {
|
|
this.overview = data;
|
|
});
|
|
this.$http
|
|
.get(
|
|
"/actual/base/streetOverview/summaryReport?orgId=" +
|
|
orgId +
|
|
"&level=" +
|
|
orgLevel
|
|
)
|
|
.then(({ data: { data } }) => {
|
|
this.report = data;
|
|
});
|
|
},
|
|
getChartData({ orgId, orgLevel }) {
|
|
this.loading = true
|
|
this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
|
|
orgId +
|
|
"&level=" +
|
|
orgLevel
|
|
).then(({data: {data}}) => {
|
|
this.initCharts(data)
|
|
})
|
|
},
|
|
initCharts(data) {
|
|
let div = document.getElementById('zdgz');
|
|
this.myChart = echarts.init(div);
|
|
let chartData = data.categoryList.map((item) => {
|
|
return {
|
|
name: resiCategoryMap[item.categoryName] || "",
|
|
count: item.categoryCount,
|
|
};
|
|
}).slice(0,8);
|
|
let xData = chartData.map(item=>item.name);
|
|
let yData = chartData.map(item=>item.count)
|
|
let color = [[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
|
|
}
|
|
]]
|
|
let num = yData
|
|
const max = Math.max(...num)
|
|
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
|
|
var option = {
|
|
title: {
|
|
show: false,
|
|
text: '',
|
|
x: 'center',
|
|
top: '18px',
|
|
textStyle: {
|
|
color: '#333333',
|
|
fontWeight: 500,
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(13,33,71,0.5)',
|
|
borderColor: 'rgba(143,174,252,0.6)',
|
|
padding: 8,
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
formatter: function (params) {
|
|
var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>'
|
|
return res;
|
|
},
|
|
},
|
|
/* dataZoom: [
|
|
{
|
|
"type": "slider",
|
|
"start": 0,
|
|
"end": parseInt((5 / xData.length) * 10) / 10 * 100,
|
|
"height": 10,
|
|
"bottom": 0,
|
|
"showDetail": false,
|
|
"showDataShadow": false,
|
|
"borderColor": "transparent"
|
|
}
|
|
],*/
|
|
grid: {
|
|
top: '18%',
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#323c41'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
align: 'center',
|
|
interval: 0,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#A3B9DA'
|
|
}
|
|
},
|
|
boundaryGap: true,
|
|
data: xData,
|
|
}, {
|
|
type: 'category',
|
|
data: xData,
|
|
axisLine: {show: false},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
boundaryGap: true,
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '单位：人',
|
|
nameLocation: 'end',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(4,187,255,0.18)',
|
|
type: 'dashed'
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: '#A3B9DA',
|
|
textStyle: {
|
|
fontSize: 12
|
|
},
|
|
align: 'right',
|
|
padding: [0, 5, -5, 5],
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#A3B9DA',
|
|
textStyle: {
|
|
fontSize: 12
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
opacity: 1,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
color[0],
|
|
false
|
|
)
|
|
},
|
|
data: yData,
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 40,
|
|
barGap: '-60%',
|
|
data: barArray,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(22,153,152, 0.1)'
|
|
}
|
|
},
|
|
zlevel: -1,
|
|
xAxisIndex: 1,
|
|
}
|
|
],
|
|
};
|
|
this.myChart.setOption(option);
|
|
window.addEventListener("resize", () => this.myChart.resize());
|
|
this.loading = false
|
|
},
|
|
getData() {
|
|
this.loading = true;
|
|
let {startTime,endTime } = this
|
|
let params = {
|
|
level: this.currentLevelData.orgLevel,
|
|
orgId: this.currentLevelData.orgId,
|
|
startTime,
|
|
endTime,
|
|
};
|
|
this.$http
|
|
.get(
|
|
"/governance/satisfactionOverview/satisfactionFollowGroup?" +
|
|
this.$paramsFormat(params)
|
|
)
|
|
.then(({ data: { data } }) => {
|
|
this.event12345Num = data.event12345Num;
|
|
this.provinceSatisfactionNum = data.provinceSatisfactionNum;
|
|
this.selfInspectNum = data.selfInspectNum;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
timeChange() {
|
|
let startTime = "",
|
|
endTime = "";
|
|
if (this.typeCondition === 1) {
|
|
startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
|
|
}
|
|
if (this.typeCondition === 2) {
|
|
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
|
|
}
|
|
if (this.typeCondition === 3) {
|
|
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
|
|
}
|
|
if (this.typeCondition === 4) {
|
|
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
|
|
}
|
|
if (this.typeCondition === 5) {
|
|
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
|
|
}
|
|
if (this.typeCondition === 2) {
|
|
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
|
|
} else {
|
|
endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
|
|
}
|
|
this.startTime = startTime;
|
|
this.endTime = endTime;
|
|
this.getData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" src="./index.scss" scoped />
|
|
<style lang="scss" scoped>
|
|
.el-table .thead{
|
|
color: #c0c4cd !important;
|
|
background: #0d2b57 !important;
|
|
}
|
|
/deep/ .el-input__inner {
|
|
width: 110px !important;
|
|
height: 32px !important;
|
|
background: #021c49 !important;
|
|
border: 1px solid #125aaa !important;
|
|
// border-radius: 12px !important;
|
|
color: #a0cdff;
|
|
}
|
|
/deep/ .el-input__icon {
|
|
line-height: 24px !important;
|
|
color: #a0cdff;
|
|
}
|
|
.f-hflex{
|
|
width: 100px;
|
|
}
|
|
.f-flex{
|
|
margin-top: 20px;
|
|
}
|
|
.f-darkGray{
|
|
margin-top: 10px;
|
|
}
|
|
.event-statistics {
|
|
margin-bottom: 27px;
|
|
}
|
|
.m-table {
|
|
margin-top: 5px;
|
|
// overflow: hidden;
|
|
min-height: 200px;
|
|
.table {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border: none;
|
|
table-layout: fixed;
|
|
&-header {
|
|
width: 100%;
|
|
// height: 56px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
line-height: 20px;
|
|
&-th {
|
|
text-align: left;
|
|
border: none;
|
|
padding: 10px 5px 10px 24px;
|
|
// width: calc(100% / 5);
|
|
}
|
|
}
|
|
&-body {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 20px;
|
|
&-tr {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
.td {
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
border: none;
|
|
padding: 18px 5px 18px 24px;
|
|
>div {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal;
|
|
}
|
|
a {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1a95ff;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
&-tr:nth-child(2n-1) {
|
|
background: rgba(26, 149, 255, 0.15);
|
|
}
|
|
// &-tr:hover {
|
|
// background: url("../../../../assets/img/modules/visual/hover-bac.png")
|
|
// no-repeat center;
|
|
// background-size: 100% 100%;
|
|
// }
|
|
}
|
|
/deep/ .el-scrollbar__wrap {
|
|
width: 100% !important;
|
|
// overflow-x: hidden !important;
|
|
}
|
|
}
|
|
.g-scrollar {
|
|
width: 100%;
|
|
// overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.orange {
|
|
color: #FFAA00
|
|
}
|
|
.green {
|
|
color: #04C790
|
|
}
|
|
.table-status {
|
|
position: relative;
|
|
height: 300px;
|
|
// 暂无数据
|
|
.no-data {
|
|
&-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 120px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|