|
|
@ -6,12 +6,17 @@ |
|
|
@click.native="handleClick('FrameControl')"> |
|
|
@click.native="handleClick('FrameControl')"> |
|
|
<img src="@screen/images/home-FrameControl/FrameControl.svg" /> |
|
|
<img src="@screen/images/home-FrameControl/FrameControl.svg" /> |
|
|
</Button> |
|
|
</Button> |
|
|
|
|
|
<el-tabs v-model="tabAction" @tab-click="tabClick"> |
|
|
|
|
|
<el-tab-pane label="批量管控" name="1"></el-tab-pane> |
|
|
|
|
|
<el-tab-pane label="定时管控" name="2"></el-tab-pane> |
|
|
|
|
|
<el-tab-pane label="管控记录" name="3"></el-tab-pane> |
|
|
|
|
|
</el-tabs> |
|
|
<div class="body"> |
|
|
<div class="body"> |
|
|
<div class="title">批量控制</div> |
|
|
<div class="title">批量控制</div> |
|
|
<span class="close" @click="() => { this.activeIcon = null; }"> |
|
|
<span class="close" @click="() => { this.activeIcon = null; }"> |
|
|
<i class="el-icon-close" /> |
|
|
<i class="el-icon-close" /> |
|
|
</span> |
|
|
</span> |
|
|
|
|
|
<div v-if="tabAction === '1'" style="width:70vw;"> |
|
|
<Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" /> |
|
|
<Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" /> |
|
|
<component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true" |
|
|
<component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true" |
|
|
:visible="true" :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }" |
|
|
:visible="true" :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }" |
|
|
@ -23,14 +28,65 @@ |
|
|
<Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button> |
|
|
<Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</ElPopover> |
|
|
<div v-if="tabAction === '2'" style="width:70vw;height: 500px; overflow-y:auto" class="cardPanel"> |
|
|
|
|
|
<Empty v-if="!data.length" class="no-data" style="position: absolute">暂无数据</Empty> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<div class="cardBox" v-for="(item, index) in data" :key="index"> |
|
|
|
|
|
<Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" buttonText="详情"> |
|
|
|
|
|
<template #form-remark="{ data }"> |
|
|
|
|
|
<div class="remark"> |
|
|
|
|
|
{{ data.remark }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template #button> |
|
|
|
|
|
<el-switch v-model="item.status" active-color="#0BD" inactive-color="#999" active-value="1" |
|
|
|
|
|
inactive-value="0" @change="(value) => handleSwitcherChange(value, item) "> |
|
|
|
|
|
</el-switch> |
|
|
|
|
|
<Button @click.native="() => goStrategy(item)"> |
|
|
|
|
|
查看 |
|
|
|
|
|
</Button> |
|
|
|
|
|
</template> |
|
|
|
|
|
</Card> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div v-if="tabAction === '3'" style="width:70vw;height: 500px;display: flex;flex-direction: column; justify-content: center;align-items: flex-start;" > |
|
|
|
|
|
<Form v-model="dataRecord" style="width:100%;" labelWidth="90px" column="2" class="form" ref="FormRecordRef" :formList="formRecord" /> |
|
|
|
|
|
<Table :data="tableData" height="500px" style="margin: 20px;width:95%"> |
|
|
|
|
|
<ElTableColumn label="管控时间" prop="operTime" width="300"/> |
|
|
|
|
|
<ElTableColumn label="管控方式" prop="operType" width="200"/> |
|
|
|
|
|
<ElTableColumn label="操作人" prop="operName" width="200"/> |
|
|
|
|
|
<ElTableColumn label="执行结果" prop="stakeMark" > |
|
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
|
<el-popover |
|
|
|
|
|
placement="top-start" |
|
|
|
|
|
width="400" |
|
|
|
|
|
trigger="hover" |
|
|
|
|
|
:content="scope.row.jsonResult"> |
|
|
|
|
|
<el-button slot="reference" class="btnResult">查看</el-button> |
|
|
|
|
|
</el-popover> |
|
|
|
|
|
</template> |
|
|
|
|
|
</ElTableColumn> |
|
|
|
|
|
</Table> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
|
|
<div class="footer" style="margin-top:-20px;margin-bottom: 30px"> |
|
|
|
|
|
<ElPagination @current-change="bindResult" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]" |
|
|
|
|
|
:page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" |
|
|
|
|
|
:total="tableTotal" class="Pagination"> |
|
|
|
|
|
</ElPagination> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</ElPopover> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import Button from "@screen/components/Buttons/Button.vue"; |
|
|
import Button from "@screen/components/Buttons/Button.vue"; |
|
|
import Form from "@screen/components/FormConfig"; |
|
|
import Form from "@screen/components/FormConfig"; |
|
|
|
|
|
import Card from "@screen/components/Card1/index.vue"; |
|
|
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|
|
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|
|
import { merge, cloneDeep } from "lodash"; |
|
|
import { merge, cloneDeep } from "lodash"; |
|
|
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js" |
|
|
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js" |
|
|
@ -43,9 +99,13 @@ import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/comp |
|
|
import FatigueWakesUpParam from "@screen/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceParam.vue"; |
|
|
import FatigueWakesUpParam from "@screen/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceParam.vue"; |
|
|
import DrivingGuidanceParam from "@screen/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceParam.vue"; |
|
|
import DrivingGuidanceParam from "@screen/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceParam.vue"; |
|
|
import InfoBoardParam from "@screen/pages/Home/components/InfoBoard/InfoBoard.vue"; |
|
|
import InfoBoardParam from "@screen/pages/Home/components/InfoBoard/InfoBoard.vue"; |
|
|
|
|
|
import request from "@/utils/request"; |
|
|
|
|
|
|
|
|
import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"; |
|
|
import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"; |
|
|
|
|
|
import { Message } from "element-ui"; |
|
|
|
|
|
import Table from '@screen/components/Table.vue'; |
|
|
|
|
|
import moment from "moment"; |
|
|
|
|
|
import _ from "lodash"; |
|
|
|
|
|
import Pagination from '@screen/components/Pagination.vue'; |
|
|
|
|
|
|
|
|
const componentMap = { |
|
|
const componentMap = { |
|
|
"设备箱": "SmartDeviceParams", "语音广播": "BroadcastParam", "疲劳唤醒": "FatigueWakesUpParam", |
|
|
"设备箱": "SmartDeviceParams", "语音广播": "BroadcastParam", "疲劳唤醒": "FatigueWakesUpParam", |
|
|
@ -82,14 +142,27 @@ export default { |
|
|
components: { |
|
|
components: { |
|
|
Button, |
|
|
Button, |
|
|
Form, |
|
|
Form, |
|
|
|
|
|
Card, |
|
|
|
|
|
Table, |
|
|
SmartDeviceParams, |
|
|
SmartDeviceParams, |
|
|
BroadcastParam, |
|
|
BroadcastParam, |
|
|
FatigueWakesUpParam, |
|
|
FatigueWakesUpParam, |
|
|
DrivingGuidanceParam, |
|
|
DrivingGuidanceParam, |
|
|
InfoBoardParam |
|
|
InfoBoardParam |
|
|
}, |
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
dataRecord(e) { |
|
|
|
|
|
console.log(e) |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
Enum_ControlType: [ |
|
|
|
|
|
{ key: "0", label: "手动控制" }, |
|
|
|
|
|
{ key: "1", label: "定时控制" }, |
|
|
|
|
|
{ key: "2", label: "批量控制" }, |
|
|
|
|
|
{ key: "3", label: "预案控制" } |
|
|
|
|
|
], |
|
|
activeIcon: null, |
|
|
activeIcon: null, |
|
|
data: {}, |
|
|
data: {}, |
|
|
hiddenDevices, |
|
|
hiddenDevices, |
|
|
@ -265,7 +338,57 @@ export default { |
|
|
// }, |
|
|
// }, |
|
|
], |
|
|
], |
|
|
DeviceTopics, |
|
|
DeviceTopics, |
|
|
componentMap |
|
|
componentMap, |
|
|
|
|
|
tabAction: "1", |
|
|
|
|
|
data:[], |
|
|
|
|
|
keyMap: [ |
|
|
|
|
|
{ |
|
|
|
|
|
key: "groupName", |
|
|
|
|
|
label: "标题", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
key: "remark", |
|
|
|
|
|
label: "描述", |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
dataRecord:{ |
|
|
|
|
|
operType: "0", |
|
|
|
|
|
operTime:[] |
|
|
|
|
|
}, |
|
|
|
|
|
formRecord:[ |
|
|
|
|
|
{ |
|
|
|
|
|
label: "管控方式:", |
|
|
|
|
|
key: "operType", |
|
|
|
|
|
type: "select", |
|
|
|
|
|
options: { |
|
|
|
|
|
options: [ |
|
|
|
|
|
{ key: "0", label: "手动控制" }, |
|
|
|
|
|
{ key: "1", label: "定时控制" }, |
|
|
|
|
|
{ key: "2", label: "批量控制" }, |
|
|
|
|
|
{ key: "3", label: "预案控制" } |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: "管控时间:", |
|
|
|
|
|
key: "operTime", |
|
|
|
|
|
required: false, |
|
|
|
|
|
type: "datePicker", |
|
|
|
|
|
options: { |
|
|
|
|
|
style: "width: auto", |
|
|
|
|
|
type: "datetimerange", |
|
|
|
|
|
format: "yyyy-MM-dd HH:mm:ss", |
|
|
|
|
|
valueFormat: "yyyy-MM-dd HH:mm:ss", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
tableTotal: 0, |
|
|
|
|
|
tableData:[], |
|
|
|
|
|
searchData: { |
|
|
|
|
|
pageSize: 20, |
|
|
|
|
|
pageNum: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
digResultVisible: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// inject: ["activeDeviceTypes"], |
|
|
// inject: ["activeDeviceTypes"], |
|
|
@ -298,6 +421,25 @@ export default { |
|
|
cancelClick() { |
|
|
cancelClick() { |
|
|
this.activeIcon = null; |
|
|
this.activeIcon = null; |
|
|
}, |
|
|
}, |
|
|
|
|
|
tabClick() { |
|
|
|
|
|
if(this.tabAction === '2'){ |
|
|
|
|
|
request({ |
|
|
|
|
|
url: `/business/dcBatchFunctionsJobGroup/list`, |
|
|
|
|
|
method: "get", |
|
|
|
|
|
params: {}, |
|
|
|
|
|
}) |
|
|
|
|
|
.then((result) => { |
|
|
|
|
|
if (result.code != 200) return; |
|
|
|
|
|
this.tableTotal = result.total; |
|
|
|
|
|
this.data = result.rows; |
|
|
|
|
|
}) |
|
|
|
|
|
.finally(() => { |
|
|
|
|
|
}); |
|
|
|
|
|
} else if(this.tabAction === '3'){ |
|
|
|
|
|
this.dataRecord.operTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'),moment().endOf('month').format('YYYY-MM-DD 23:59:59'),] |
|
|
|
|
|
this.bindResult(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
handleClick(type) { |
|
|
handleClick(type) { |
|
|
this.activeIcon = this.activeIcon === type ? null : type; |
|
|
this.activeIcon = this.activeIcon === type ? null : type; |
|
|
}, |
|
|
}, |
|
|
@ -306,6 +448,55 @@ export default { |
|
|
// this.filterData = data; |
|
|
// this.filterData = data; |
|
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data); |
|
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data); |
|
|
}, |
|
|
}, |
|
|
|
|
|
goStrategy(item){ |
|
|
|
|
|
this.$router.push(`/control/device/strategy?id=${item.id}`); |
|
|
|
|
|
}, |
|
|
|
|
|
async handleSwitcherChange(value, item) { |
|
|
|
|
|
request({ |
|
|
|
|
|
url: `/business/dcBatchFunctionsJobGroup`, |
|
|
|
|
|
method: "PUT", |
|
|
|
|
|
data: { |
|
|
|
|
|
id:item.id, |
|
|
|
|
|
status:value |
|
|
|
|
|
}, |
|
|
|
|
|
}) |
|
|
|
|
|
.then((result) => { |
|
|
|
|
|
item.status = result.data.status; |
|
|
|
|
|
if (result.code != 200) return; |
|
|
|
|
|
Message.success(`操作成功!`); |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
bindResult(){ |
|
|
|
|
|
// dataRecord:{ |
|
|
|
|
|
// operType: "0", |
|
|
|
|
|
// operTime:['2024-04-01 00:00:00','2024-04-25 23:59:59'] |
|
|
|
|
|
// }, |
|
|
|
|
|
request({ |
|
|
|
|
|
url: `/business/dcOperLog/list`, |
|
|
|
|
|
method: "get", |
|
|
|
|
|
params: {...this.searchData,operType:this.dataRecord.operType}, |
|
|
|
|
|
}) |
|
|
|
|
|
.then((result) => { |
|
|
|
|
|
if (result.code != 200) return; |
|
|
|
|
|
result.rows.forEach(e => { |
|
|
|
|
|
e.operTime = moment(e.operTime).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
|
|
e.operType = _.find(this.Enum_ControlType,{key:e.operType}).label |
|
|
|
|
|
}); |
|
|
|
|
|
this.tableData = result.rows; |
|
|
|
|
|
this.tableTotal = result.total; |
|
|
|
|
|
}) |
|
|
|
|
|
.finally(() => { |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
onSizeChange(pageSize) { |
|
|
|
|
|
this.tableData = []; |
|
|
|
|
|
this.searchData.pageSize = pageSize; |
|
|
|
|
|
this.searchData.pageNum = 1; |
|
|
|
|
|
this.bindResult(); |
|
|
|
|
|
}, |
|
|
|
|
|
showResult(res){ |
|
|
|
|
|
this.digResultVisible = true |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
@ -364,4 +555,105 @@ div.el-popper.global-input-search-popover { |
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.cardPanel{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
} |
|
|
|
|
|
.cardBox { |
|
|
|
|
|
flex-basis: percentage(1/4); |
|
|
|
|
|
padding-right: 10px; |
|
|
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
.remark { |
|
|
|
|
|
font-size: 14px; line-height: 20px; height: 40px; overflow: hidden; |
|
|
|
|
|
color: #00b3cc; |
|
|
|
|
|
} |
|
|
|
|
|
.btnResult{ |
|
|
|
|
|
background-color:#00b3cc; |
|
|
|
|
|
color: white; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 5px 20px; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.Pagination { |
|
|
|
|
|
// color: #fff; |
|
|
|
|
|
|
|
|
|
|
|
::v-deep { |
|
|
|
|
|
> button, |
|
|
|
|
|
> ul li { |
|
|
|
|
|
background: #064258; |
|
|
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
> button { |
|
|
|
|
|
padding: 0 3px; |
|
|
|
|
|
border: 1px solid #00b3cc; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
> ul li { |
|
|
|
|
|
background: linear-gradient(180deg, #004960 0%, #004b62 100%); |
|
|
|
|
|
margin: 0 1.5px; |
|
|
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-pagination__total { |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-pagination__sizes { |
|
|
|
|
|
.el-select { |
|
|
|
|
|
.el-input { |
|
|
|
|
|
width: 81px; |
|
|
|
|
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
height: 23px; |
|
|
|
|
|
background-color: #064258 !important; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-input__suffix { |
|
|
|
|
|
.el-input__icon { |
|
|
|
|
|
line-height: 23px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-pagination__jump { |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
|
|
|
|
.el-input { |
|
|
|
|
|
width: 27px; |
|
|
|
|
|
margin: 0 3px; |
|
|
|
|
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
background-color: #064258 !important; |
|
|
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-next { |
|
|
|
|
|
margin-left: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-prev { |
|
|
|
|
|
margin-right: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
::v-deep .el-pagination__total { |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
