wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

事件感知开发

This commit is contained in:
a0049873 2022-07-05 18:13:38 +08:00
parent a57d293fc7
commit 7c3a72bd3a
3 changed files with 282 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -35,10 +35,10 @@
"moment": "^2.29.1",
"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"node-sass": "^4.14.1",
"sass": "^1.51.0",
"sass-loader": "^10.1.0",
"qs": "^6.9.4",
"quill": "^1.3.7",
"sass-loader": "^9.0.2",
"screenfull": "^4.2.1",
"sortablejs": "^1.10.2",
"svg-sprite-loader": "^5.0.0",

BIN
src/assets/construction/toadyListIcon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

430
src/views/pages/waterPoints/components/ComplaintEvent.vue
View File

@ -15,207 +15,273 @@
<div class="tabs-button-box">
<div class="tabs-button-btn"
@click="tabHandleClick(item)"
v-for="item in tabsButton"
v-for="item in tabsButton"
:key="item.index"
:class="tabsActiveName == item?'tabs-button-btn-active':''"
>
{{item}}
</div>
</div>
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
</div>
<div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
<div class="filter-btn-typeSelect">
<div class="typeSelect-btn"
v-for="item in filterButton.typeSelect"
:key="item"
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
@click="typeSelect(item)"
>{{item}}</div>
</div>
<div class="filter-btn-box">
<div class="filter-btn-processStateSelect">
<div class="processStateSelect-btn"
v-for="item in filterButton.processStateSelect"
<div class="processStateSelect-btn"
v-for="item in filterButton.type"
:key="item"
:class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active':''"
@click="processStateSelect(item)"
:class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
@click="selectType(item)"
>
<div class="select-circle"></div>
<div class="processStateSelect">{{item}}</div>
</div>
</div>
</div>
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
<div class="event-details" v-for="item in eventListData" :key="item.index">
<div class="event-details-title">
<span>{{item.roadName||''}}</span>
<span>{{item.dt||''}}</span>
<!-- <span>未派发</span> -->
</div>
<div class="event-details-des">
<h5>道路起止:{{item.start||''}}--{{item.end||''}}</h5>
<!-- <p>简述简述简述简述简述简述简述简述</p> -->
<p>pm10:{{item.pm10||''}}</p>
<div class='box3'>
<div class="item" v-for='item in list' :key='item.id'>
<div class="top">
<div>
<span class='name'>{{item.name}}</span>
<span class='topType'>{{item.topType}}</span>
</div>
<div>
<span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span>
<span class="type">{{item.type}}</span>
</div>
</div>
<div class="bottom">{{item.text}}</div>
</div>
<el-pagination
background
layout="prev, pager, next"
@current-change="pageChange"
:total="total">
</el-pagination>
</div>
</div>
<statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
</div>
</template>
<script>
import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
import bus from "@/views/layout/bus";
import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
import StatisticalAnalysis from './StatisticalAnalysis.vue'
import bus from '@/views/layout/bus'
import {
getRoadData,
getRoadDataByTimeRegion,
selectRoadData,
} from "@/api/road";
selectRoadData
} from '@/api/road'
export default {
data() {
data () {
return {
tabsButton: ["视频感知","物联感知","走航监测"],
tabsActiveName: "走航监测",
tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
tabsActiveName: '全部',
statisticalAnalysisIsShow: false,
filterButton:{
typeSelect:['事件','事件1'],
typeSelectActive:'事件',
processStateSelect:['全部','未派发','未处置','已处置'],
processStateSelectActive:'全部',
filterButton: {
typeSelect: ['事件', '事件1'],
typeSelectActive: '事件',
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
processStateSelect: ['全部', '未派发', '未处置', '已处置'],
processStateSelectActive: '全部',
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
},
eventListData: [],
preTime: "",
preTime: '',
total: 0,
roadData:[],
};
roadData: [],
list: [{
name: '香港中路山东路',
id: '1',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '2',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '3',
topType: '物联感知',
type: '影响行人(<30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '4',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '5',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '6',
topType: '物联感知',
type: '无积水(<10cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '7',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '8',
topType: '物联感知',
type: '影响行人(<30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '9',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '10',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '11',
topType: '物联感知',
type: '影响车辆(>30cm)',
text: '液位：12cm'
}, {
name: '香港中路山东路',
id: '12',
topType: '物联感知',
type: '无积水(<10cm)',
text: '液位：12cm'
}]
}
},
components: {
StatisticalAnalysis,
StatisticalAnalysis
},
created() {
const currentDate = new Date();
currentDate.setTime(currentDate.getTime());
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
created () {
const currentDate = new Date()
currentDate.setTime(currentDate.getTime())
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
this.preTime =
currentDate.getFullYear() +
"-" +
'-' +
(currentDate.getMonth() + 1) +
"-" +
'-' +
currentDate.getDate() +
" " +
"00:00:00";
' ' +
'00:00:00'
},
mounted() {
mounted () {
this.getRoadData()
this.selectRoadData()
this.selectRaise()
this.selectNoiceEvent()
},
methods: {
tabHandleClick(item) {
this.tabsActiveName = item
if(item == '视频感知'){
selectType (item) {
if (this.filterButton.typeActive.indexOf(item) > -1) {
this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
} else {
this.filterButton.typeActive.push(item)
}
if(item == '物联感知'){
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
},
tabHandleClick (item) {
this.tabsActiveName = item
if (item == '视频感知') {
}
if (item == '物联感知') {
this.filterButton.typeSelect = ['工地扬尘', '工地噪声']
this.typeSelectActive = '工地扬尘'
}
if(item == '走航监测'){
if (item == '走航监测') {
this.selectRoadData()
}
},
openStatisticalAnalysis() {
openStatisticalAnalysis () {
this.statisticalAnalysisIsShow = true
},
typeSelect(item) {
typeSelect (item) {
this.filterButton.typeSelectActive = item
},
processStateSelect(item) {
processStateSelect (item) {
this.filterButton.processStateSelectActive = item
},
async getRoadData() {
const res = await getRoadData({ dt: this.preTime });
//路网数据
this.roadData = res.data.data;
async getRoadData () {
const res = await getRoadData({ dt: this.preTime })
// 路网数据
this.roadData = res.data.data
// bus.$emit("roadOnMap", this.roadData);
},
//走航监测
selectRoadData() {
let params = {
// 走航监测
selectRoadData () {
const params = {
pageSize: 5,
page: 1,
page: 1
}
selectRoadData(params).then((res) => {
this.eventListData = res.data.data.roadData;
this.eventListData = res.data.data.roadData
this.total = res.data.data.sum
});
})
},
//物联感知 扬尘 噪声
selectRaise() {
let params = {
// 物联感知 扬尘 噪声
selectRaise () {
const params = {
pageSize: 5,
page: 1,
page: 1
}
selectRaise(params).then((res) => {
console.log(res)
// this.eventListData = res.data.data.roadData;
});
})
},
selectNoiceEvent() {
let params = {
selectNoiceEvent () {
const params = {
pageSize: 5,
page: 1,
page: 1
}
selectNoiceEvent(params).then((res) => {
console.log(res)
});
})
},
//分页
pageChange(val) {
if(this.tabsActiveName == '视频感知') {
} else if(this.tabsActiveName == '物联感知') {
let params = {
// 分页
pageChange (val) {
if (this.tabsActiveName == '视频感知') {
} else if (this.tabsActiveName == '物联感知') {
const params = {
pageSize: 5,
page: val,
page: val
}
selectRaise(params).then((res) => {
console.log(res)
});
} else if(this.tabsActiveName == '走航监测') {
let params = {
})
} else if (this.tabsActiveName == '走航监测') {
const params = {
pageSize: 5,
page: val,
page: val
}
selectRoadData(params).then((res) => {
this.eventListData = res.data.data.roadData;
});
this.eventListData = res.data.data.roadData
})
}
}
},
};
}
}
</script>
<style lang='scss' scoped>
@font-face {
font-family: 'Tensentype-ZhiHeiJ-W5';
font-family: "Tensentype-ZhiHeiJ-W5";
src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
}
@font-face {
font-family: 'DIN-Bold';
font-family: "DIN-Bold";
src: url("../../../../assets/construction/DIN-Bold.otf");
}
.box {
@ -223,31 +289,33 @@ export default {
header {
width: 100%;
height: 44px;
background: url(../../../../assets/construction/subTitle.png) no-repeat center;
background: url(../../../../assets/construction/subTitle.png) no-repeat
center;
text-align: center;
.title {
font-size: 26px;
font-weight: bold;
font-weight: bold;
background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Tensentype-ZhiHeiJ-W5';
font-family: "Tensentype-ZhiHeiJ-W5";
}
.title::before {
content: '事件感知';
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
content: "事件感知";
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
position: absolute;
z-index: -1;
}
}
.toady-list {
width:100%;
height:132px;
background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
width: 100%;
height: 132px;
background: url(../../../../assets/construction/toadyListBgi.png) no-repeat
center top;
.toady-list-content {
margin-left: 80px;
height:128px;
height: 128px;
position: relative;
.toady-list-rotate {
position: absolute;
@ -260,7 +328,10 @@ export default {
position: absolute;
width: 128px;
height: 128px;
background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
background: url(../../../../assets/construction/toadyListIcon2.png)
no-repeat;
background-position: center;
background-size: 40%;
}
.toady-list-num {
position: absolute;
@ -268,7 +339,8 @@ export default {
height: 72px;
top: 20px;
left: 100px;
background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
background: url(../../../../assets/construction/toadyListBgi2.png)
no-repeat;
color: #fff;
line-height: 72px;
text-align: center;
@ -280,28 +352,28 @@ export default {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN-Bold';
font-family: "DIN-Bold";
}
}
}
}
@keyframes routation {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.tab-box {
margin:0 10px;
margin: 0 10px;
.tabs-button {
position: relative;
.tabs-button-box {
width: 340px;
width: 460px;
padding-bottom: 11px;
border-bottom: 3px solid #2c619c;
display: flex;
@ -318,7 +390,7 @@ export default {
color: #fff;
}
.tabs-button-btn-active::after {
content: '';
content: "";
position: absolute;
bottom: -15px;
// right: 24%;
@ -339,7 +411,7 @@ export default {
color: #1ffefd;
line-height: 28px;
text-align: center;
border: 1px solid rgba(31, 254, 253, .6);
border: 1px solid rgba(31, 254, 253, 0.6);
border-radius: 14px;
cursor: pointer;
}
@ -351,8 +423,8 @@ export default {
display: flex;
.typeSelect-btn {
border-radius: 20px;
border: 1px solid rgba(0, 255, 255, .6);
background: rgba(2,51,87,.6);
border: 1px solid rgba(0, 255, 255, 0.6);
background: rgba(2, 51, 87, 0.6);
margin-right: 5px;
padding: 4px 10px;
font-size: 14px;
@ -372,7 +444,7 @@ export default {
.processStateSelect-btn {
display: flex;
align-items: center;
margin-left: 24px;
margin-left: 10px;
cursor: pointer;
.select-circle {
width: 16px;
@ -430,10 +502,14 @@ export default {
font-size: 18px;
font-weight: bold;
line-height: 36px;
background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
background: linear-gradient(
90deg,
rgba($color: #0873c1, $alpha: 1) 0,
rgba($color: #0873c1, $alpha: 0) 100%
);
}
span:nth-child(2) {
color: rgba(255,255,255,.6);
color: rgba(255, 255, 255, 0.6);
padding-left: 80px;
}
span:nth-child(3) {
@ -453,17 +529,18 @@ export default {
h5 {
font-weight: normal;
padding-left: 18px;
color: rgba(255,255,255, .6);
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
color: rgba(255, 255, 255, 0.6);
background: url(../../../../assets/construction/iconAddress.png)
no-repeat left center;
}
p {
color: rgba(255,255,255, .8);
color: rgba(255, 255, 255, 0.8);
line-height: 28px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
}
}
@ -474,18 +551,19 @@ export default {
bottom: 0px;
transform: translateX(-50%);
// margin-top: 16px;
button, ul>li {
button,
ul > li {
width: 28px;
height: 28px;
border-radius: 2px;
border: 1px solid rgba(31,254,253, .5);
border: 1px solid rgba(31, 254, 253, 0.5);
background: transparent;
color: rgba(31,254,253, .5);
color: rgba(31, 254, 253, 0.5);
}
li:not(.disabled).active {
color: #fff;
border: 1px solid rgba(31,254,253, .5);
background: rgba(31,254,253, .5);
border: 1px solid rgba(31, 254, 253, 0.5);
background: rgba(31, 254, 253, 0.5);
}
}
}
@ -497,9 +575,61 @@ export default {
top: 0;
width: 400px;
height: 878px;
background: rgba(24,51,76,.95);
border: 1px solid rgba(50,227,235,.95);
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
background: rgba(24, 51, 76, 0.95);
border: 1px solid rgba(50, 227, 235, 0.95);
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: 0.4);
}
}
.box3 {
color: #fff;
margin-top: 10px;
height: 620px;
overflow-y: scroll;
.item {
margin-top: 10px;
background: rgba(5, 33, 59, 0.35);
padding: 10px;
.top {
display: flex;
justify-content: space-between;
& > div:nth-of-type(2) {
width: 140px;
}
.name {
font-weight: 600;
}
.topType {
margin-left: 5px;
padding: 4px 10px;
font-size: 14px;
border-radius: 10px;
border: 1px #fff solid;
background: rgba(5, 33, 59, 0.55);
}
.img {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
margin-right: 5px;
background: red;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
}
.bottom {
margin-top: 10px;
}
}
}
.box3::-webkit-scrollbar {
display: none;
}
</style>