|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="router-main-box"> |
|
|
|
|
<AmapBg :reliData="reliData" /> |
|
|
|
|
<AmapBg :reliData="reliData" :active="active" /> |
|
|
|
|
<!-- <div class="zoom-box"> --> |
|
|
|
|
<!-- <div class="bg-mask" v-if="$ifIframe()"> |
|
|
|
|
<div class="top"></div> |
|
|
|
|
@ -17,29 +17,30 @@ |
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="time_box">{{ date }} {{ time }}</div> |
|
|
|
|
<!-- <div class="wea_box"> |
|
|
|
|
<img src="" alt=""> |
|
|
|
|
<img src="@/assets/img/wea.png" alt=""> |
|
|
|
|
<div><span>26℃</span>青岛</div> |
|
|
|
|
</div> --> |
|
|
|
|
<div class="center_box"> |
|
|
|
|
<div class="sb_box"> |
|
|
|
|
<div style="margin-right: 8px">今日上报数</div> |
|
|
|
|
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> |
|
|
|
|
<div style="margin-right: 8px;font-family:ZHJT">今日上报数</div> |
|
|
|
|
<div style="font-weight:bold"><span class="number_txt">{{dayValue}}</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box cen"> |
|
|
|
|
<div style="margin-right: 8px">本周上报数</div> |
|
|
|
|
<div><span class="number_txt">25</span> <span class="num_name">件</span></div> |
|
|
|
|
<div style="margin-right: 8px;font-family:ZHJT">本周上报数</div> |
|
|
|
|
<div style="font-weight:bold"><span class="number_txt">{{weekValue}}</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box cen"> |
|
|
|
|
<div style="margin-right: 8px">本月上报数</div> |
|
|
|
|
<div><span class="number_txt">32</span> <span class="num_name">件</span></div> |
|
|
|
|
<div style="margin-right: 8px;font-family:ZHJT">本月上报数</div> |
|
|
|
|
<div style="font-weight:bold"><span class="number_txt">{{monValue}}</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box last"> |
|
|
|
|
<div style="margin-right: 8px">本年上报数</div> |
|
|
|
|
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> |
|
|
|
|
<div style="margin-right: 8px;font-family:ZHJT">本年上报数</div> |
|
|
|
|
<div style="font-weight:bold"><span class="number_txt">{{yearValue}}</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_box"> |
|
|
|
|
<div class="hj_box"> |
|
|
|
|
<div class="title">矛盾纠纷化解统计</div> |
|
|
|
|
<div class="title left_top">矛盾纠纷化解统计</div> |
|
|
|
|
<div class="top_con"> |
|
|
|
|
<div class="con_box day"> |
|
|
|
|
<div class="con_txt"> |
|
|
|
|
@ -86,8 +87,8 @@ |
|
|
|
|
<div class="con_txt" v-for="(item, index) in listData" :key="index"> |
|
|
|
|
<div class="con_text">{{ item.disputeName }}</div> |
|
|
|
|
<div class="con_text">{{ item.street }}</div> |
|
|
|
|
<div class="con_text">{{ item.firstRegTime }}</div> |
|
|
|
|
<div class="con_text">{{ item.statusName }}</div> |
|
|
|
|
<div class="con_text">{{ item.firstRegTime.slice(0,-9) }}</div> |
|
|
|
|
<div class="con_text" :class="item.status == 0 ? 'ready_txt' : item.status == 1 ? 'now_rea_txt' : ''">{{ item.status == 0 ? '待处理' : item.status == 1 ? '正在处理' : item.status == 2 ? '达成协议' : item.status == 3 ? '调解成功' : '' }}</div> |
|
|
|
|
</div> |
|
|
|
|
</vueSeamless> |
|
|
|
|
</div> |
|
|
|
|
@ -104,9 +105,21 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="right_box"> |
|
|
|
|
<div class="rig_box"> |
|
|
|
|
<div class="title">镇街矛调实况</div> |
|
|
|
|
<div class="title">镇街矛调实况 |
|
|
|
|
<div class="video_pause_box" @click="changeVideo" v-show="isShowLogin"> |
|
|
|
|
<img v-show="isShowVideo" src="@/assets/img/pause.png" alt=""> |
|
|
|
|
<img v-show="!isShowVideo" src="@/assets/img/start.png" alt=""> |
|
|
|
|
<span class="pause_txt">{{isShowVideo ? '播放' : '暂停'}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="video_box"> |
|
|
|
|
<div class="video" id="video"></div> |
|
|
|
|
<div v-show="isShowLogin && !isShowVideo" class="video" id="video"></div> |
|
|
|
|
<div class="ispause_box" v-show="isShowVideo && isShowLogin"> |
|
|
|
|
<img src="@/assets/img/video_pause.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="ispause_box" v-show="!isShowVideo && !isShowLogin"> |
|
|
|
|
<img src="@/assets/img/video_bag.jpg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="rig_ph"> |
|
|
|
|
@ -120,7 +133,9 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom_box"> |
|
|
|
|
<div class="sele_box"> |
|
|
|
|
<el-select v-model="timeFrame" class="slect_box" popper-class="select_time"> |
|
|
|
|
<el-select v-model="timeFrame" class="slect_box" popper-class="select_time" |
|
|
|
|
:disabled="isDis" |
|
|
|
|
@change="changeFrame"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in timeData" |
|
|
|
|
:key="item.value" |
|
|
|
|
@ -138,6 +153,9 @@ |
|
|
|
|
range-separator="-" |
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
format="yyyy-MM-dd" |
|
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
|
@change="changeTime" |
|
|
|
|
> |
|
|
|
|
</el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
@ -165,7 +183,8 @@ import AmapBg from "@/components/map.vue"; |
|
|
|
|
import { getZoom } from "@/libs/util"; |
|
|
|
|
import { selected_area$ } from "@/subjects/sub"; |
|
|
|
|
import vueSeamless from "vue-seamless-scroll"; |
|
|
|
|
import { queryResolve } from "@/api/home"; |
|
|
|
|
import { queryResolve,querySubmit,queryList,queryTrend,queryType,querySort,queryResolveList |
|
|
|
|
,querySubmitList,queryImmediateList,queryOverList } from "@/api/home"; |
|
|
|
|
export default { |
|
|
|
|
name: "", |
|
|
|
|
components: { |
|
|
|
|
@ -178,8 +197,11 @@ export default { |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
pieData:[], |
|
|
|
|
isDis:false, |
|
|
|
|
reliData: [], |
|
|
|
|
timeFrame: 1, |
|
|
|
|
isShowVideo:false, |
|
|
|
|
ob: null, |
|
|
|
|
selectedArea: null, |
|
|
|
|
zoom: 1, |
|
|
|
|
@ -187,7 +209,7 @@ export default { |
|
|
|
|
time: "", |
|
|
|
|
calssOption: { |
|
|
|
|
step: 0.2, // 数值越大速度滚动越快 |
|
|
|
|
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length |
|
|
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length |
|
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop |
|
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右 |
|
|
|
|
openWatch: true, // 开启数据实时监控刷新dom |
|
|
|
|
@ -200,77 +222,21 @@ export default { |
|
|
|
|
{ label: "季", value: 2 }, |
|
|
|
|
{ label: "年", value: 3 }, |
|
|
|
|
], |
|
|
|
|
dayValue:'', |
|
|
|
|
weekValue:'', |
|
|
|
|
monValue:'', |
|
|
|
|
yearValue:'', |
|
|
|
|
trendChart: null, |
|
|
|
|
pieChart: null, |
|
|
|
|
phChart: null, |
|
|
|
|
deptChart: null, |
|
|
|
|
listData: [ |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-31", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "合同纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "婚姻纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "里岔镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "邻里纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
disputeName: "矛盾纠纷", |
|
|
|
|
street: "洋河镇", |
|
|
|
|
firstRegTime: "2022-05-30", |
|
|
|
|
statusName: "办结", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
xData: ["一月", "二月", "三月", "四月", "五月", "六月"], |
|
|
|
|
yData1: [20, 40, 32, 12, 43, 12], |
|
|
|
|
yData2: [25, 42, 30, 15, 23, 32], |
|
|
|
|
listData: [], |
|
|
|
|
xData: [], |
|
|
|
|
yData1: [], |
|
|
|
|
yData2: [], |
|
|
|
|
activePanel: "key1", |
|
|
|
|
isLogin: false, |
|
|
|
|
isShowLogin:false, |
|
|
|
|
loginType: "1", |
|
|
|
|
loginIp: "112.6.205.8", |
|
|
|
|
userName: "system", |
|
|
|
|
@ -295,19 +261,21 @@ export default { |
|
|
|
|
crtHeight: 400, |
|
|
|
|
domId: "dom1", |
|
|
|
|
mixedVideoDisplayMode: 2, |
|
|
|
|
active: "1", |
|
|
|
|
timePicker: "", |
|
|
|
|
active: 1, |
|
|
|
|
timePicker: [], |
|
|
|
|
monReso: "", |
|
|
|
|
quaReso: "", |
|
|
|
|
yearReso: "", |
|
|
|
|
allReso: "", |
|
|
|
|
streetPh:[], |
|
|
|
|
deptPh:[] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
mounted() { |
|
|
|
|
this.ws = this.DHWs.getInstance(); |
|
|
|
|
// console.log(ws) |
|
|
|
|
this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; |
|
|
|
|
// this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; |
|
|
|
|
|
|
|
|
|
this.ob = selected_area$.subscribe((obj) => { |
|
|
|
|
this.selectedArea = obj; |
|
|
|
|
@ -319,7 +287,7 @@ export default { |
|
|
|
|
}); |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.getTime(); |
|
|
|
|
this.createChart(); |
|
|
|
|
this.getSubmitList() |
|
|
|
|
this.createPieChart(); |
|
|
|
|
this.createPhChart(); |
|
|
|
|
this.createDeptChart(); |
|
|
|
|
@ -336,27 +304,159 @@ export default { |
|
|
|
|
handleReli(val) { |
|
|
|
|
this.active = val; |
|
|
|
|
if (val == 1) { |
|
|
|
|
this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; |
|
|
|
|
this.getSubmitList() |
|
|
|
|
// this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; |
|
|
|
|
} else if (val == 2) { |
|
|
|
|
this.reliData = [{ 里岔镇: 20, 胶西街道: 80, 中云街道: 90, 九龙街道: 40 }]; |
|
|
|
|
// this.reliData = [{ 里岔镇: 20, 胶西街道: 80, 中云街道: 90, 九龙街道: 40 }]; |
|
|
|
|
this.getResolveList() |
|
|
|
|
|
|
|
|
|
} else if (val == 3) { |
|
|
|
|
this.reliData = [{ 阜安街道: 50, 三里河街道: 84, 胶东街道: 86, 胶北街道: 40 }]; |
|
|
|
|
this.getOverList() |
|
|
|
|
// this.reliData = [{ 阜安街道: 50, 三里河街道: 84, 胶东街道: 86, 胶北街道: 40 }]; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getResolve() { |
|
|
|
|
queryResolve().then((res) => { |
|
|
|
|
console.log("化解数据", res); |
|
|
|
|
this.monReso = res.data ? res.data.mon : 1; |
|
|
|
|
this.quaReso = res.data ? res.data.quarterly : 3; |
|
|
|
|
(this.yearReso = res.data ? res.data.year : 10), |
|
|
|
|
(this.allReso = res.data ? res.data.all : 20); |
|
|
|
|
}); |
|
|
|
|
querySubmit().then(res =>{ |
|
|
|
|
console.log(res) |
|
|
|
|
this.dayValue = res.data.day; |
|
|
|
|
this.weekValue = res.data.week; |
|
|
|
|
this.monValue = res.data.mon; |
|
|
|
|
this.yearValue = res.data.year |
|
|
|
|
}) |
|
|
|
|
queryList().then(res =>{ |
|
|
|
|
this.listData = res.data; |
|
|
|
|
}) |
|
|
|
|
queryTrend().then(res =>{ |
|
|
|
|
this.xData = res.data.dateList.reverse(); |
|
|
|
|
this.yData1 = res.data.handlerCountList.reverse(); |
|
|
|
|
this.yData2 = res.data.finishContList.reverse(); |
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.createChart(); |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
queryType().then(res =>{ |
|
|
|
|
console.log('type===>',res) |
|
|
|
|
this.pieData = res.data; |
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.createPieChart() |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
querySort().then(res =>{ |
|
|
|
|
this.streetPh = res.data.street |
|
|
|
|
this.deptPh = res.data.town |
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.createPhChart(); |
|
|
|
|
this.createDeptChart() |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getResolveList(){ |
|
|
|
|
this.reliData = [] |
|
|
|
|
console.log('timePicker===>',this.timePicker) |
|
|
|
|
if(this.timePicker.length == 0){ |
|
|
|
|
queryResolveList({timeFrame:this.timeFrame}).then(res =>{ |
|
|
|
|
console.log('res ===>',res.data) |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
queryResolveList({ |
|
|
|
|
startTime:this.timePicker[0] + ' 00:00:00', |
|
|
|
|
endTime:this.timePicker[1] + '23:59:59' |
|
|
|
|
}).then(res =>{ |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getSubmitList(){ |
|
|
|
|
this.reliData = [] |
|
|
|
|
if(this.timePicker.length == 0){ |
|
|
|
|
querySubmitList({timeFrame:this.timeFrame}).then(res =>{ |
|
|
|
|
console.log('submit===>',res) |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
querySubmitList({ |
|
|
|
|
startTime:this.timePicker[0] + ' 00:00:00', |
|
|
|
|
endTime:this.timePicker[1] + '23:59:59' |
|
|
|
|
}).then(res =>{ |
|
|
|
|
console.log('submit===>',res) |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// this.reliData = [{三里河街道:80,里岔镇:72,洋河镇:88}] |
|
|
|
|
}, |
|
|
|
|
getOverList(){ |
|
|
|
|
this.reliData = [] |
|
|
|
|
if(this.timePicker.length == 0){ |
|
|
|
|
queryOverList({timeFrame:this.timeFrame}).then(res =>{ |
|
|
|
|
console.log('submit===>',res) |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
queryOverList({ |
|
|
|
|
startTime:this.timePicker[0] + ' 00:00:00', |
|
|
|
|
endTime:this.timePicker[1] + '23:59:59' |
|
|
|
|
}).then(res =>{ |
|
|
|
|
console.log('submit===>',res) |
|
|
|
|
this.reliData.push(res.data) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
changeFrame(){ |
|
|
|
|
this.timePicker = [] |
|
|
|
|
if(this.active == 1){ |
|
|
|
|
this.getSubmitList() |
|
|
|
|
}else if(this.active == 2){ |
|
|
|
|
this.getResolveList() |
|
|
|
|
}else if(this.active == 3){ |
|
|
|
|
this.getOverList(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
changeTime(){ |
|
|
|
|
if(!this.timePicker){ |
|
|
|
|
this.timePicker = [] |
|
|
|
|
this.isDis = false |
|
|
|
|
}else{ |
|
|
|
|
this.isDis = true |
|
|
|
|
} |
|
|
|
|
if(this.active == 1){ |
|
|
|
|
this.getSubmitList() |
|
|
|
|
}else if(this.active == 2){ |
|
|
|
|
this.getResolveList() |
|
|
|
|
}else if(this.active == 3){ |
|
|
|
|
this.getOverList() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
fn(str) { |
|
|
|
|
let num = null; |
|
|
|
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
|
|
|
return num; |
|
|
|
|
}, |
|
|
|
|
changeVideo(){ |
|
|
|
|
console.log('视频切换',this.isShowLogin) |
|
|
|
|
this.isShowVideo = !this.isShowVideo; |
|
|
|
|
if(this.isShowVideo){ |
|
|
|
|
this.ws.setCtrlVisible([ |
|
|
|
|
{ |
|
|
|
|
ctrlCode: this.ctrl, |
|
|
|
|
visible: false |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
}else{ |
|
|
|
|
this.ws.setCtrlVisible([ |
|
|
|
|
{ |
|
|
|
|
ctrlCode: this.ctrl, |
|
|
|
|
visible: true |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getTime() { |
|
|
|
|
//获取当前时间 |
|
|
|
|
this.timer = setInterval(() => { |
|
|
|
|
@ -388,17 +488,21 @@ export default { |
|
|
|
|
}); |
|
|
|
|
// this.$message.error('登录中...') |
|
|
|
|
this.ws.on("loginState", (res) => { |
|
|
|
|
console.log("res ===>", res); |
|
|
|
|
this.isLogin = res; |
|
|
|
|
// dahuaIsLogin$.next(res) |
|
|
|
|
console.log('isLogin',this.isLogin) |
|
|
|
|
if (res) { |
|
|
|
|
this.create(); |
|
|
|
|
this.isShowLogin = true |
|
|
|
|
|
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.create(); |
|
|
|
|
}) |
|
|
|
|
// this.$message.success('登录成功') |
|
|
|
|
} else { |
|
|
|
|
// this.$message.error('登录失败') |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.isShowLogin = false |
|
|
|
|
// 连接客户端失败 |
|
|
|
|
this.$message.error("请重新安装客户端"); |
|
|
|
|
} |
|
|
|
|
@ -418,18 +522,18 @@ export default { |
|
|
|
|
domId: "video", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
this.setPos(); |
|
|
|
|
// this.setPos(); |
|
|
|
|
this.ws.createCtrl(params).then((res) => { |
|
|
|
|
console.log("paraRea===>", res); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.ws.on("createCtrlResult", (res) => { |
|
|
|
|
console.log("createCtrlResult", res); |
|
|
|
|
}); |
|
|
|
|
// this.ws.on("createCtrlResult", (res) => { |
|
|
|
|
// console.log("createCtrlResult", res); |
|
|
|
|
// }); |
|
|
|
|
this.displayMode = 1; |
|
|
|
|
console.log("this.ws.ctrls", this.ws.ctrls); |
|
|
|
|
if (this.ws.ctrls.length === 0) { |
|
|
|
|
message.info("请先创建控件！"); |
|
|
|
|
this.$message.error("请先创建控件！"); |
|
|
|
|
} |
|
|
|
|
const params1 = { |
|
|
|
|
ctrlCode: this.ctrl, |
|
|
|
|
@ -441,11 +545,12 @@ export default { |
|
|
|
|
let target = document.getElementById("video"); |
|
|
|
|
console.log(target, "target"); |
|
|
|
|
// target.style.right = `${this.crtPosX}px` |
|
|
|
|
// target.style.top = `${this.crtPosY}px` |
|
|
|
|
// target.style.top = `-10px` |
|
|
|
|
// target.style.width = `${this.crtWidth}px` |
|
|
|
|
// target.style.height = `${this.crtHeight}px` |
|
|
|
|
if (document.createEvent) { |
|
|
|
|
var event = document.createEvent("HTMLEvents"); |
|
|
|
|
console.log('event==>',event) |
|
|
|
|
event.initEvent("resize", true, true); |
|
|
|
|
window.dispatchEvent(event); |
|
|
|
|
} else if (document.createEventObject) { |
|
|
|
|
@ -612,21 +717,17 @@ export default { |
|
|
|
|
borderRadius: 5, |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
show: true, |
|
|
|
|
position: 'inside', |
|
|
|
|
fontSize: 10, |
|
|
|
|
formatter: '{d}%' |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ value: 40, name: "合同纠纷" }, |
|
|
|
|
{ value: 33, name: "事故纠纷" }, |
|
|
|
|
{ value: 28, name: "邻里纠纷" }, |
|
|
|
|
{ value: 22, name: "婚姻家庭纠纷" }, |
|
|
|
|
{ value: 20, name: "劳动纠纷" }, |
|
|
|
|
{ value: 15, name: "其他纠纷" }, |
|
|
|
|
], |
|
|
|
|
data:this.pieData, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
@ -639,49 +740,7 @@ export default { |
|
|
|
|
}); |
|
|
|
|
var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"]; |
|
|
|
|
var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"]; |
|
|
|
|
var datas = [ |
|
|
|
|
{ |
|
|
|
|
value: 99, |
|
|
|
|
name: "系列一", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 97, |
|
|
|
|
name: "系列二", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 94, |
|
|
|
|
name: "系列三", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 90, |
|
|
|
|
name: "系列四", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 88, |
|
|
|
|
name: "系列五", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 84, |
|
|
|
|
name: "系列6", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 81, |
|
|
|
|
name: "系列7", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 79, |
|
|
|
|
name: "系列8", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 75, |
|
|
|
|
name: "系列9", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 65.88, |
|
|
|
|
name: "系列a", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
let maxArr = new Array(datas.length).fill(100); |
|
|
|
|
|
|
|
|
|
var option = { |
|
|
|
|
tooltip: { |
|
|
|
|
show: false, |
|
|
|
|
@ -694,11 +753,11 @@ export default { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
top: 3, |
|
|
|
|
left: 0, |
|
|
|
|
top: '5%', |
|
|
|
|
left: '30%', |
|
|
|
|
right: 10, |
|
|
|
|
bottom: 0, |
|
|
|
|
containLabel: true, |
|
|
|
|
bottom: '6%', |
|
|
|
|
// containLabel: true, |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
show: true, |
|
|
|
|
@ -734,13 +793,29 @@ export default { |
|
|
|
|
margin: 30, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: datas.map((item) => item.name), |
|
|
|
|
data: this.streetPh.map((item) => item.name), |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 50, |
|
|
|
|
// margin: 115, |
|
|
|
|
fontSize: 14, |
|
|
|
|
align: "left", |
|
|
|
|
align: "right", |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
formatter: (value) => { |
|
|
|
|
// if(value.length > 4){ |
|
|
|
|
// // value = value.slice(0, 4) + '...' |
|
|
|
|
// // return value |
|
|
|
|
// }else{ |
|
|
|
|
// return value |
|
|
|
|
// } |
|
|
|
|
return value |
|
|
|
|
}, |
|
|
|
|
rich:{ |
|
|
|
|
bValue:{ |
|
|
|
|
width:60, |
|
|
|
|
height:20, |
|
|
|
|
backgroundColor:"red" |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
@ -750,7 +825,7 @@ export default { |
|
|
|
|
type: "bar", |
|
|
|
|
barWidth: 8, |
|
|
|
|
zlevel: 1, |
|
|
|
|
data: datas.map((item, i) => { |
|
|
|
|
data: this.streetPh.map((item, i) => { |
|
|
|
|
let itemStyle = {}; |
|
|
|
|
itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
|
|
|
{ |
|
|
|
|
@ -781,7 +856,7 @@ export default { |
|
|
|
|
symbolSize: [3, 8], |
|
|
|
|
symbolOffset: [2, 0], |
|
|
|
|
z: 2, |
|
|
|
|
data: datas, |
|
|
|
|
data: this.streetPh, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
// barBorderRadius: 20, |
|
|
|
|
@ -804,25 +879,6 @@ export default { |
|
|
|
|
}); |
|
|
|
|
var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"]; |
|
|
|
|
var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"]; |
|
|
|
|
var datas = [ |
|
|
|
|
{ |
|
|
|
|
value: 99, |
|
|
|
|
name: "系列一", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 97, |
|
|
|
|
name: "系列二", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 94, |
|
|
|
|
name: "系列三", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 90, |
|
|
|
|
name: "系列四", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
let maxArr = new Array(datas.length).fill(100); |
|
|
|
|
var option = { |
|
|
|
|
tooltip: { |
|
|
|
|
show: false, |
|
|
|
|
@ -835,11 +891,10 @@ export default { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
top: 3, |
|
|
|
|
left: 0, |
|
|
|
|
top: '5%', |
|
|
|
|
left: '30%', |
|
|
|
|
right: 10, |
|
|
|
|
bottom: 0, |
|
|
|
|
containLabel: true, |
|
|
|
|
bottom: '15%', |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
show: true, |
|
|
|
|
@ -875,15 +930,35 @@ export default { |
|
|
|
|
margin: 30, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data: datas.map((item) => item.name), |
|
|
|
|
data: this.deptPh.map((item) => item.name), |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 50, |
|
|
|
|
// margin: 115, |
|
|
|
|
fontSize: 14, |
|
|
|
|
align: "left", |
|
|
|
|
align: "right", |
|
|
|
|
color: "#fff", |
|
|
|
|
formatter: function(value) { |
|
|
|
|
// if(value.length > 4){ |
|
|
|
|
// value = value.slice(0, 4) + '...' |
|
|
|
|
|
|
|
|
|
// return value |
|
|
|
|
// }else{ |
|
|
|
|
// return value |
|
|
|
|
// } |
|
|
|
|
return value |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
dataZoom: [ |
|
|
|
|
//滑动条 |
|
|
|
|
{ |
|
|
|
|
yAxisIndex: 0, //这里是从X轴的0刻度开始 |
|
|
|
|
show: false, //是否显示滑动条，不影响使用 |
|
|
|
|
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 4, // 一次性展示6个。 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
z: 2, |
|
|
|
|
@ -891,7 +966,7 @@ export default { |
|
|
|
|
type: "bar", |
|
|
|
|
barWidth: 8, |
|
|
|
|
zlevel: 1, |
|
|
|
|
data: datas.map((item, i) => { |
|
|
|
|
data: this.deptPh.map((item, i) => { |
|
|
|
|
let itemStyle = {}; |
|
|
|
|
itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
|
|
|
{ |
|
|
|
|
@ -922,7 +997,7 @@ export default { |
|
|
|
|
symbolSize: [3, 8], |
|
|
|
|
symbolOffset: [2, 0], |
|
|
|
|
z: 2, |
|
|
|
|
data: datas, |
|
|
|
|
data: this.deptPh, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
// barBorderRadius: 20, |
|
|
|
|
@ -937,18 +1012,38 @@ export default { |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.deptChart.setOption(option); |
|
|
|
|
if(this.deptPh.length > 4){ |
|
|
|
|
setInterval(()=>{ |
|
|
|
|
if (option.dataZoom[0].endValue == this.deptPh.length ) { |
|
|
|
|
option.dataZoom[0].endValue = 3; |
|
|
|
|
option.dataZoom[0].startValue = 0; |
|
|
|
|
} else { |
|
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; |
|
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; |
|
|
|
|
} |
|
|
|
|
this.deptChart.setOption(option); |
|
|
|
|
},2000) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
beforeDestroy () { |
|
|
|
|
this.ws.logout({ |
|
|
|
|
loginIp: this.loginIp |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
@import "~@/assets/fonts/font.css"; |
|
|
|
|
.router-main-box { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
// background: red; |
|
|
|
|
margin: -8px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.zoom-box { |
|
|
|
|
position: relative; |
|
|
|
|
@ -975,9 +1070,10 @@ export default { |
|
|
|
|
font-size: 27px; |
|
|
|
|
color: #fff; |
|
|
|
|
position: absolute; |
|
|
|
|
font-weight: bold; |
|
|
|
|
// font-weight: bold; |
|
|
|
|
font-family: 'YOUS'; |
|
|
|
|
top: 38px; |
|
|
|
|
left: 48px; |
|
|
|
|
left: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_box { |
|
|
|
|
@ -998,8 +1094,7 @@ export default { |
|
|
|
|
color: #fff; |
|
|
|
|
align-items: center; |
|
|
|
|
border-right: 1px solid #fff; |
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
&.cen { |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
@ -1101,13 +1196,18 @@ export default { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-stretch: normal; |
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
width: 88%; |
|
|
|
|
margin-left: 12%; |
|
|
|
|
text-align: left; |
|
|
|
|
margin-top: 2px; |
|
|
|
|
|
|
|
|
|
&.left_top{ |
|
|
|
|
padding-top: 3px; |
|
|
|
|
margin-left: 11.5%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top_con { |
|
|
|
|
@ -1159,7 +1259,7 @@ export default { |
|
|
|
|
|
|
|
|
|
.num_txt { |
|
|
|
|
font-size: 22px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
// color: #fff; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); |
|
|
|
|
@ -1220,6 +1320,13 @@ export default { |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
|
|
&.ready_txt{ |
|
|
|
|
color:#d24040; |
|
|
|
|
} |
|
|
|
|
&.now_rea_txt{ |
|
|
|
|
color:#55ec99 ; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -1253,20 +1360,37 @@ export default { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-stretch: normal; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
width: 88%; |
|
|
|
|
margin-left: 12%; |
|
|
|
|
margin-left: 8%; |
|
|
|
|
text-align: left; |
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 2px; |
|
|
|
|
padding-top: 1.5px; |
|
|
|
|
|
|
|
|
|
.video_pause_box{ |
|
|
|
|
margin-left: 43%; |
|
|
|
|
display: flex; |
|
|
|
|
width: 25%; |
|
|
|
|
align-items: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
.pause_txt{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #47c5f0; |
|
|
|
|
margin-left: 5px; |
|
|
|
|
margin-top: 3px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video_box { |
|
|
|
|
width: 90%; |
|
|
|
|
height: 86%; |
|
|
|
|
background-color: #31bdff; |
|
|
|
|
opacity: 0.2; |
|
|
|
|
height: 85%; |
|
|
|
|
background-color: rgba(49,189,255,0.2); |
|
|
|
|
// opacity: 0.2; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 2%; |
|
|
|
|
display: flex; |
|
|
|
|
@ -1278,6 +1402,17 @@ export default { |
|
|
|
|
height: 92%; |
|
|
|
|
// background: red; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ispause_box{ |
|
|
|
|
width: 96%; |
|
|
|
|
height:94%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
img{ |
|
|
|
|
width:100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -1287,12 +1422,11 @@ export default { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-stretch: normal; |
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
width: 88%; |
|
|
|
|
margin-left: 12%; |
|
|
|
|
margin-left: 9%; |
|
|
|
|
text-align: left; |
|
|
|
|
} |
|
|
|
|
.ph_box { |
|
|
|
|
@ -1308,13 +1442,13 @@ export default { |
|
|
|
|
height: 21%; |
|
|
|
|
.title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-stretch: normal; |
|
|
|
|
font-family: "ZHJT"; |
|
|
|
|
letter-spacing: 0px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
width: 88%; |
|
|
|
|
margin-left: 12%; |
|
|
|
|
margin-left: 9%; |
|
|
|
|
text-align: left; |
|
|
|
|
margin-top: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ph_box { |
|
|
|
|
@ -1345,4 +1479,30 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.select_date{ |
|
|
|
|
background: rgba(17, 71, 96, 0.3) !important; |
|
|
|
|
border:1px solid rgb(17, 71, 96) !important; |
|
|
|
|
.el-picker-panel__body{ |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
.el-date-table{ |
|
|
|
|
th{ |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.el-picker-panel__icon-btn{ |
|
|
|
|
color:#fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-date-table td.in-range div{ |
|
|
|
|
background:rgba(17, 71, 96, 0.9) ; |
|
|
|
|
} |
|
|
|
|
.el-date-range-picker__content.is-left{ |
|
|
|
|
border-right:1px solid rgb(17, 71, 96) !important; |
|
|
|
|
} |
|
|
|
|
.el-date-table th{ |
|
|
|
|
border-bottom:1px solid rgb(17, 71, 96) !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
jinna
3 years ago
