mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

相机雨刷

develop
王兴琳 12 months ago
parent
206dbfb441
commit
d79d0f092f
4 changed files with 482 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/index.vue
  2. 185
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/videoCamera.vue
  3. 305
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
  4. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

39
ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/index.vue
View File

@ -2,19 +2,19 @@
<div v-if="visible" class="compBox"> <div v-if="visible" class="compBox">
<div class="head" style="height:4vh;"> <div class="head" style="height:4vh;">
<div class="tit">附近相机</div> <div class="tit">附近相机</div>
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose"> <img alt="" class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" @click="onClose">
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt=""> <img alt="" class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png">
</div> </div>
<template v-if="list.length > 0"> <template v-if="list.length > 0">
<!-- <p>{{ list }}</p> --> <!-- <p>{{ list }}</p> -->
<div class="videoPlayer"> <div class="videoPlayer">
<!-- <videoView :url="slectedVideo" /> --> <!-- <videoView :url="slectedVideo" /> -->
<Video class="video-stream" :camId="selectedCamera.camId" /> <Video :camId="selectedCamera.camId" class="video-stream"/>
</div> </div>
<div class="operation"> <div class="operation">
<div class="selectCam"> <div class="selectCam">
<div class="label">选择相机: </div> <div class="label">选择相机:</div>
<div class="val"> <div class="val">
<el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera"> <el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera">
<el-option v-for="item, index in list" :key="index" :label="item.camName" :value="index"> <el-option v-for="item, index in list" :key="index" :label="item.camName" :value="index">
@ -22,10 +22,10 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0" <el-button v-if="selectedCamera.ptzCtrl == 0" class="controlCam" icon="el-icon-s-operation" type="primary"
@click="controlDialogVisible = !controlDialogVisible"></el-button> @click="controlDialogVisible = !controlDialogVisible"></el-button>
<CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible" <CameraController v-if="controlDialogVisible" :deviceId="selectedCamera.camId"
:deviceId="selectedCamera.camId" class="cameraControl" /> :visible.sync="controlDialogVisible" class="cameraControl"/>
</div> </div>
<div class="flex1 txtInfo"> <div class="flex1 txtInfo">
@ -39,10 +39,7 @@
font-size: 15px; font-size: 15px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
line-height: 18px; line-height: 18px;">雨刷:</span>
">
雨刷:
</span>
<Button style="margin-left: 5px" @click.native="controlClick(49)">开</Button> <Button style="margin-left: 5px" @click.native="controlClick(49)">开</Button>
<Button style="margin-left: 5px" @click.native="controlClick(48)">关</Button> <Button style="margin-left: 5px" @click.native="controlClick(48)">关</Button>
</div> </div>
@ -65,7 +62,7 @@
</div> --> </div> -->
</template> </template>
<Empty v-else text="没有查询到附近的相机..." class="flex1"> <Empty v-else class="flex1" text="没有查询到附近的相机...">
</Empty> </Empty>
</div> </div>
</template> </template>
@ -74,9 +71,9 @@
import Video from "@screen/components/Video" import Video from "@screen/components/Video"
import CameraController from "./CameraController.vue"; import CameraController from "./CameraController.vue";
import { controlCamera, getDeviceInfo } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; import {controlCamera, getDeviceInfo} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { PanoramicCameraTypes, CameraChildTypes } from "@screen/utils/enum.js"; import {CameraChildTypes, PanoramicCameraTypes} from "@screen/utils/enum.js";
import { throttle } from "lodash"; import {throttle} from "lodash";
import Button from "@screen/components/Buttons/Button.vue"; import Button from "@screen/components/Buttons/Button.vue";
export default { export default {
@ -143,12 +140,12 @@ export default {
this.$set(this.selectedCamera, 'deviceState', deviceInfo.deviceState); this.$set(this.selectedCamera, 'deviceState', deviceInfo.deviceState);
let cmr = this.selectedCamera; let cmr = this.selectedCamera;
this.cameraInfo = [ this.cameraInfo = [
{ title: "道路名称", value: cmr.deptName }, {title: "道路名称", value: cmr.deptName},
{ title: "道路编号", value: cmr.road }, {title: "道路编号", value: cmr.road},
{ title: "设备名称", value: cmr.camName }, {title: "设备名称", value: cmr.camName},
{ title: "设备编号", value: cmr.camId }, {title: "设备编号", value: cmr.camId},
{ title: "设备桩号", value: cmr.pileNum }, {title: "设备桩号", value: cmr.pileNum},
{ title: "相机类型", value: childType ? CameraChildTypes[childType] : ["球机", "枪机"][+cmr.ptzCtrl] }, {title: "相机类型", value: childType ? CameraChildTypes[childType] : ["球机", "枪机"][+cmr.ptzCtrl]},
// {title:"相机状态", value:cmr.camStatus } // {title:"相机状态", value:cmr.camStatus }
]; ];
}, },

185
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/videoCamera.vue
View File

@ -0,0 +1,185 @@
<template>
<div class="body">
<div class="right" :style="{ width: isMultiControl ? '100%' : undefined }">
<div class="top-content">
<Video v-if="!isMultiControl" class="item-video" :pileNum="pileNum" />
<label style="width: 98px;">雨刷: </label>
<div style="margin-top: 20px">
<el-radio-group v-model="cmdType" size="medium">
<el-radio-button label="49" >开</el-radio-button>
<el-radio-button label="48">关</el-radio-button>
</el-radio-group>
</div>
<!-- <ElInput type="textarea" class="inputarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
showWordLimit placeholder="请输入发布内容" />-->
</div>
<!-- <div class="footer">
<Button @click.native="handleSubmit" :loading="submitting">
确定
</Button>
<Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick">
取消
</Button>
</div> -->
</div>
</div>
</template>
<script>
import Dialog from "@screen/components/Dialog/index.vue";
import Button from "@screen/components/Buttons/Button.vue";
import Video from "@screen/components/Video";
import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue";
import request from "@/utils/request";
import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { multiResultShow } from "@screen/utils/common";
import { Message } from "element-ui";
export default {
name: "videoCamera",
components: {
Dialog,
Button,
Video,
CheckboxGroup,
},
model: {
prop: "visible",
event: "update:value",
},
props: {
visible: Boolean,
pileNum: String,
otherConfig: String,
isMultiControl: Boolean,
selectItems: {
type: Array,
default: () => []
}
},
data() {
return {
submitting: false,
checkList: [],
cmdType: null,
// musicList: [],
};
},
computed: {
modelVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:value", val);
},
},
},
created() {
// getDeviceList(5).then((data) => {
// if (Array.isArray(data))
// this.musicList = data.map((item) => ({
// ...item,
// disabled: item.deviceState != 1,
// }));
// });
},
methods: {
cancelClick() {
this.$emit("update:activeIcon", null);
this.$emit("update:submitting", false);
// this.submitting = false;
},
handleSubmit() {
const trimmedCmdType = this.cmdType?.trim();
const selectItems = this.selectItems.map(item => JSON.parse(item));
const checkList = selectItems.map(item => JSON.parse(item.otherConfig));
if (!trimmedCmdType) {
return Message.error("请选择命令类型!");
}
if (!selectItems.length)
return Message.error("请至少选择一个设备!");
// this.submitting = true;
this.$emit("update:submitting", true);
batchFunctions(
{
"devices": selectItems,
"functions": [
{
"functionId": "videoCamera",//随便 不为空即可
"cmdType":trimmedCmdType,
}
]
})
.then((data) => {
multiResultShow(data.data, item => item.result.retCode == '0', "相机功能调用");
})
.finally(() => {
// this.submitting = false;
this.$emit("update:submitting", false);
});
},
},
};
</script>
<style lang="scss" scoped>
.body {
display: flex;
gap: 9px;
height: 100%;
padding-right: 9px;
margin-top: 15px;
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.top-content {
display: flex;
flex-direction: row;
// gap: 9px;
align-items: center;
.item-video {
width: 545px;
}
label {
font-size: 15px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3de8ff;
line-height: 19px;
vertical-align: middle;
text-align: right;
padding-right: 12px;
box-sizing: border-box;
}
}
}
}
.inputarea{
width: 100%;
::v-deep textarea{
border: 0px !important;
border-radius: 2px !important;
}
}
.footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
}
</style>

305
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="HomeFrameControl"> <div class="HomeFrameControl">
<ElPopover trigger="manual" :value="activeIcon === 'FrameControl'" :visibleArrow="false" placement="left" <ElPopover :value="activeIcon === 'FrameControl'" :visibleArrow="false" placement="left" popper-class="global-input-search-popover"
popper-class="global-input-search-popover" @hide="onHide()"> trigger="manual" @hide="onHide()">
<el-tooltip slot="reference" effect="light" content="批量控制" placement="left"> <el-tooltip slot="reference" content="批量控制" effect="light" placement="left">
<Button :class="['btn', { 'btn-active': activeIcon }]" @click.native="handleClick('FrameControl')"> <Button :class="['btn', { 'btn-active': activeIcon }]" @click.native="handleClick('FrameControl')">
<img src="@screen/images/home-FrameControl/FrameControl.svg" /> <img src="@screen/images/home-FrameControl/FrameControl.svg"/>
</Button> </Button>
</el-tooltip> </el-tooltip>
@ -15,43 +15,43 @@
<el-tab-pane label="定时管控" name="2"></el-tab-pane> <el-tab-pane label="定时管控" name="2"></el-tab-pane>
<el-tab-pane label="管控记录" name="3"></el-tab-pane> <el-tab-pane label="管控记录" name="3"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="body2" > <div class="body2">
<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:1000px; min-height: 350px;"> <div v-if="tabAction === '1'" style="width:1000px; min-height: 350px;">
<!-- 通用表单 --> <!-- 通用表单 -->
<Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" /> <Form ref="FormConfigRef" v-model="data" :formList="formList" class="form" column="2" labelWidth="90px"/>
<!-- 设备管控表单 --> <!-- 设备管控表单 -->
<component ref="ControlComponent" <component :is="componentMap[DeviceTopics[data.deviceType]]"
style="width: 100% !important;" ref="ControlComponent"
:is="componentMap[DeviceTopics[data.deviceType]]"
:isMultiControl="true" :isMultiControl="true"
:visible="true"
:selectItems="data.childType" :selectItems="data.childType"
:selectedSizeMutl="data.screenSizeName" :selectedSizeMutl="data.screenSizeName"
:visible="true"
style="width: 100% !important;"
@update:activeIcon="(val) => { this.activeIcon = val }" @update:activeIcon="(val) => { this.activeIcon = val }"
@update:submitting="(val) => { submitting = val }"></component> @update:submitting="(val) => { submitting = val }"></component>
<!-- 部分设备手动确认 --> <!-- 部分设备手动确认 -->
<div v-if="hiddenDevices.indexOf(componentMap[DeviceTopics[data.deviceType]]) == -1" class="footer"> <div v-if="hiddenDevices.indexOf(componentMap[DeviceTopics[data.deviceType]]) == -1" class="footer">
<Button @click.native="submitClick" :loading="submitting"> <Button :loading="submitting" @click.native="submitClick">
确认 确认
</Button> </Button>
<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>
<!-- 定时管控 --> <!-- 定时管控 -->
<div v-if="tabAction === '2'" style="width:1000px; height: 350px; overflow-y:auto" class="cardPanel"> <div v-if="tabAction === '2'" class="cardPanel" style="width:1000px; height: 350px; overflow-y:auto">
<Empty v-if="!data2.length" class="no-data" style="position: absolute">暂无数据</Empty> <Empty v-if="!data2.length" class="no-data" style="position: absolute">暂无数据</Empty>
<div v-else style="display: flex;width:100%;flex-direction: column;"> <div v-else style="display: flex;width:100%;flex-direction: column;">
<div style="height:300px;width:100%;overflow-y: auto;display: flex;flex-wrap: wrap;"> <div style="height:300px;width:100%;overflow-y: auto;display: flex;flex-wrap: wrap;">
<div class="cardBox" v-for="(item, index) in data2" :key="index"> <div v-for="(item, index) in data2" :key="index" class="cardBox">
<Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" buttonText="详情"> <Card :buttonIcon="null" :cardData="item" :keyMap="keyMap" buttonText="详情" class="card">
<template #form-groupName="{ data }"> <template #form-groupName="{ data }">
<el-tooltip effect="dark" :content="data.groupName" placement="top-start"> <el-tooltip :content="data.groupName" effect="dark" placement="top-start">
<div class="groupName"> <div class="groupName">
{{ data.groupName }} {{ data.groupName }}
</div> </div>
@ -59,7 +59,7 @@
</template> </template>
<template #form-remark="{ data }"> <template #form-remark="{ data }">
<el-tooltip effect="dark" :content="data.remark" placement="top-start"> <el-tooltip :content="data.remark" effect="dark" placement="top-start">
<div class="remark"> <div class="remark">
{{ data.remark }} {{ data.remark }}
@ -67,7 +67,7 @@
</el-tooltip> </el-tooltip>
</template> </template>
<template #button> <template #button>
<el-switch v-model="item.status" active-color="#0BD" inactive-color="#999" active-value="0" <el-switch v-model="item.status" active-color="#0BD" active-value="0" inactive-color="#999"
inactive-value="1" @change="(value) => handleSwitcherChange(value, item)"> inactive-value="1" @change="(value) => handleSwitcherChange(value, item)">
</el-switch> </el-switch>
<Button @click.native="() => goStrategy(item)"> <Button @click.native="() => goStrategy(item)">
@ -79,10 +79,11 @@
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="footer2"> <div class="footer2">
<ElPagination @current-change="bindTimeing" @size-change="onSizeChange2" width="'100%'" <ElPagination :current-page.sync="searchData2.pageNum" :page-size="searchData2.pageSize" :page-sizes="[10, 20, 30, 40, 50]"
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData2.pageSize" :total="tableTotal2" class="Pagination"
:current-page.sync="searchData2.pageNum" layout="total, sizes, prev, pager, next" :total="tableTotal2" layout="total, sizes, prev, pager, next" width="'100%'"
class="Pagination"> @current-change="bindTimeing"
@size-change="onSizeChange2">
</ElPagination> </ElPagination>
</div> </div>
</div> </div>
@ -90,12 +91,12 @@
<!-- 管控记录 --> <!-- 管控记录 -->
<div v-if="tabAction === '3'" <div v-if="tabAction === '3'"
style="width:1000px;height: 350px;display: flex;flex-direction: column; justify-content: center;align-items: flex-start;"> style="width:1000px;height: 350px;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" <Form ref="FormRecordRef" v-model="dataRecord" :formList="formRecord" class="form" column="2" labelWidth="90px"
:formList="formRecord" /> style="width:100%;"/>
<Table :data="tableData" height="500px" style="margin: 20px 20px 0px 20px;width:95%"> <Table :data="tableData" height="500px" style="margin: 20px 20px 0px 20px;width:95%">
<ElTableColumn label="管控时间" prop="operTime" width="120" /> <ElTableColumn label="管控时间" prop="operTime" width="120"/>
<ElTableColumn label="管控方式" prop="operType" width="80" /> <ElTableColumn label="管控方式" prop="operType" width="80"/>
<ElTableColumn label="操作人" prop="operName" width="80" /> <ElTableColumn label="操作人" prop="operName" width="80"/>
<ElTableColumn label="设备类型" width="120"> <ElTableColumn label="设备类型" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
@ -110,19 +111,19 @@
</div> </div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="执行内容" width="250" prop="remark" :show-overflow-tooltip="true" > <ElTableColumn :show-overflow-tooltip="true" label="执行内容" prop="remark" width="250">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<p v-for="item in scope.row.aryRemark">{{ item }}</p> <p v-for="item in scope.row.aryRemark">{{ item }}</p>
</div> </div>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn label="结果" prop="status" width="80" align="center" header-align="center"> <ElTableColumn align="center" header-align="center" label="结果" prop="status" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<p v-for="item in scope.row.aryState"> <p v-for="item in scope.row.aryState">
<i class="el-icon-success" style="font-size: 20px; color:#0c0;" v-if="item === 200"></i> <i v-if="item === 200" class="el-icon-success" style="font-size: 20px; color:#0c0;"></i>
<i class="el-icon-error" style="font-size: 20px; color:#BBB;" v-else></i> <i v-else class="el-icon-error" style="font-size: 20px; color:#BBB;"></i>
</p> </p>
</div> </div>
</template> </template>
@ -130,16 +131,17 @@
</Table> </Table>
<!-- 分页 --> <!-- 分页 -->
<div class="footer" style="width:100%"> <div class="footer" style="width:100%">
<ElPagination @current-change="bindRecord" @size-change="onSizeChange" width="'100%'" <ElPagination :current-page.sync="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 40, 50]"
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :total="tableTotal" class="Pagination"
:current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" :total="tableTotal" layout="total, sizes, prev, pager, next" width="'100%'"
class="Pagination"> @current-change="bindRecord"
@size-change="onSizeChange">
</ElPagination> </ElPagination>
</div> </div>
</div> </div>
</div> </div>
</ElPopover> </ElPopover>
<AddNEditDialog v-model="isShowDialog" :propData="dialogData" @onSuccess="onSizeChange2" /> <AddNEditDialog v-model="isShowDialog" :propData="dialogData" @onSuccess="onSizeChange2"/>
</div> </div>
</template> </template>
@ -150,29 +152,27 @@ 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 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} from "lodash";
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js" import {getDeviceList} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { ChildTypes } from "@screen/utils/enum.js" import {delay} from "@screen/utils/common";
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; import {initSearch} from "@screen/utils/enum/common.js"
import { delay } from "@screen/utils/common";
import { initSearch } from "@screen/utils/enum/common.js"
import SmartDeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue"; import SmartDeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue";
import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue"; import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue";
import videoCamera from "@screen/pages/Home/components/Dialogs/Broadcast/components/videoCamera.vue";
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 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 {Message} from "element-ui";
import Table from '@screen/components/Table.vue'; import Table from '@screen/components/Table.vue';
import moment from "moment"; import moment from "moment";
import { getDicts } from "@/api/system/dict/data"; import {getDicts} from "@/api/system/dict/data";
import _ from "lodash";
// "设备箱": "SmartDeviceParams", 2024-07-03 删除 // "设备箱": "SmartDeviceParams", 2024-07-03 删除
const componentMap = { const componentMap = {
"语音广播": "BroadcastParam", "疲劳唤醒": "FatigueWakesUpParam", "语音广播": "BroadcastParam", "疲劳唤醒": "FatigueWakesUpParam",
"行车诱导": "DrivingGuidanceParam", "情报板": "InfoBoardParam", "行车诱导": "DrivingGuidanceParam", "情报板": "InfoBoardParam","摄像机":"videoCamera"
} }
const hiddenDevices = ["SmartDeviceParams", "InfoBoardParam"]; const hiddenDevices = ["SmartDeviceParams", "InfoBoardParam"];
@ -183,33 +183,51 @@ Object.keys(DeviceForMap).forEach(DeviceLabel => {
controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel); controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
}); });
const deviceTypeDefault = Object.keys(DeviceTopics)[1]; const deviceTypeDefault = Object.keys(DeviceTopics)[1];
function changeHandle(data, formList) { function changeHandle(data, formList) {
if (data.deviceType !== "2") { //情报板单独处理
const filterData = {}; const filterData = {};
data.direction && (filterData.direction = data.direction); data.direction && (filterData.direction = data.direction);
data.startStakeMark && (filterData.startStakeMark = data.startStakeMark); data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
data.endStakeMark && (filterData.endStakeMark = data.endStakeMark); data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
setDeviceOptions({ deviceType: data.deviceType }, filterData, formList);
if (data.deviceType !== "2" && data.deviceType !== "1") { // 情报板和摄像机单独处理
setDeviceOptions({deviceType: data.deviceType}, filterData, formList);
data.childType = undefined; data.childType = undefined;
data.screenSizeName = ''; data.screenSizeName = '';
} else { } else if (data.deviceType === "2") {
setBoardSize(formList,data); setBoardSize(formList, data);
} else if (data.deviceType === "1") {
getCameraTypes(formList, data); // 传递 data 以包含筛选条件
} }
} }
function changeHandleScreenSize( data,formList){ async function getCameraTypes(formList, data) {
const res = await getDicts("camera_classification");
let cameraTypeArr = res.data.map(item => ({
label: item.dictLabel,
value: item.dictValue
}));
// 找到子设备类型下拉框并更新其选项
const cameraTypeItem = formList.find(item => item.key === 'cameraType');
if (cameraTypeItem) {
cameraTypeItem.options.options = cameraTypeArr;
}
}
function changeHandleScreenSize(data, formList) {
const filterData = {}; const filterData = {};
data.direction && (filterData.direction = data.direction); data.direction && (filterData.direction = data.direction);
data.startStakeMark && (filterData.startStakeMark = data.startStakeMark); data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
data.endStakeMark && (filterData.endStakeMark = data.endStakeMark); data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
if(data.screenSize && data.screenSize !== ''){ if (data.screenSize && data.screenSize !== '') {
var arySize = data.screenSize.split('_') var arySize = data.screenSize.split('_')
filterData.childType = arySize[0]; filterData.childType = arySize[0];
data.screenSizeName = arySize[1]; data.screenSizeName = arySize[1];
} }
setDeviceOptions({ deviceType: data.deviceType }, filterData, formList); setDeviceOptions({deviceType: data.deviceType}, filterData, formList);
data.childType = undefined; data.childType = undefined;
} }
async function setBoardSize(formList,data){
async function setBoardSize(formList, data) {
// if(formList[4].options.options.length === 0){ // if(formList[4].options.options.length === 0){
const res = await getDicts("iot_board_pixel"); const res = await getDicts("iot_board_pixel");
let boardSizeArr = [] let boardSizeArr = []
@ -217,7 +235,7 @@ async function setBoardSize(formList,data){
let size = item.dictLabel.substr(item.dictLabel.search(/\d/)) let size = item.dictLabel.substr(item.dictLabel.search(/\d/))
boardSizeArr.push({ boardSizeArr.push({
label: item.dictLabel, label: item.dictLabel,
value: item.dictValue+'_'+size value: item.dictValue + '_' + size
}); });
}); });
formList[4].options.options = boardSizeArr; formList[4].options.options = boardSizeArr;
@ -226,34 +244,40 @@ async function setBoardSize(formList,data){
setTimeout(() => { setTimeout(() => {
data.screenSizeName = arySize[1]; data.screenSizeName = arySize[1];
}, 600); }, 600);
const filterData = {childType:arySize[0]}; const filterData = {childType: arySize[0]};
data.direction && (filterData.direction = data.direction); data.direction && (filterData.direction = data.direction);
data.startStakeMark && (filterData.startStakeMark = data.startStakeMark); data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
data.endStakeMark && (filterData.endStakeMark = data.endStakeMark); data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
setDeviceOptions({ deviceType: data.deviceType }, filterData, formList); setDeviceOptions({deviceType: data.deviceType}, filterData, formList);
data.childType = undefined; data.childType = undefined;
// } // }
} }
async function setDeviceOptions(config, filterData, formList) { async function setDeviceOptions(config, filterData, formList) {
const data = await getDeviceList(config.deviceType, filterData).then(async (data) => { const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
await delay(600); await delay(600);
return data; return data;
}); });
formList[5].options.options = data.map(item => {
return { const options = [
{label: '全选', value: 'selectAll'}
];
options.push(...data.map(item => ({
label: `${item.deviceName}`, label: `${item.deviceName}`,
value: JSON.stringify( value: JSON.stringify({
{
id: item.id, id: item.id,
iotDeviceId: item.iotDeviceId, iotDeviceId: item.iotDeviceId,
deviceType: item.deviceType, deviceType: item.deviceType,
otherConfig: item.otherConfig otherConfig: item.otherConfig
}), }),
disabled: item.deviceState != 1 disabled: item.deviceState !== '1' // 注意这里使用字符串 '1'
} })));
})
}; formList.find(item => item.key === 'childType').options.options = options;
export default {
// 初始化选中值
}export default {
name: "HomeFrameControl",//设备控制 name: "HomeFrameControl",//设备控制
components: { components: {
Button, Button,
@ -262,6 +286,7 @@ export default {
Table, Table,
SmartDeviceParams, SmartDeviceParams,
BroadcastParam, BroadcastParam,
videoCamera,
FatigueWakesUpParam, FatigueWakesUpParam,
DrivingGuidanceParam, DrivingGuidanceParam,
InfoBoardParam, InfoBoardParam,
@ -271,18 +296,19 @@ export default {
dataRecord(e) { dataRecord(e) {
this.bindRecord() this.bindRecord()
}, },
}, },
data() { data() {
return { return {
Enum_ControlType: [ Enum_ControlType: [
{ key: "0", label: "手动控制" }, {key: "0", label: "手动控制"},
{ key: "1", label: "定时控制" }, {key: "1", label: "定时控制"},
{ key: "2", label: "批量控制" }, {key: "2", label: "批量控制"},
{ key: "3", label: "预案控制" } {key: "3", label: "预案控制"}
], ],
activeIcon: null, activeIcon: null,
data: { data: {
screenSizeName:"" screenSizeName: ""
}, },
hiddenDevices, hiddenDevices,
submitting: false, submitting: false,
@ -295,11 +321,13 @@ export default {
default: deviceTypeDefault, default: deviceTypeDefault,
options: { options: {
clearable: true, clearable: true,
options: Object.keys(DeviceTopics).map(key => { return { label: DeviceTopics[key], value: key } }), options: Object.keys(DeviceTopics).map(key => {
return {label: DeviceTopics[key], value: key}
}),
}, },
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
if (data.deviceType) { if (data.deviceType) {
changeHandle(data, formList); changeHandle(data, formList);
} else { } else {
@ -314,14 +342,14 @@ export default {
type: "select", type: "select",
options: { options: {
options: [ options: [
{ key: "1", label: "菏泽方向" }, {key: "1", label: "菏泽方向"},
{ key: "3", label: "济南方向" }, {key: "3", label: "济南方向"},
{ key: "2", label: "双向" }, {key: "2", label: "双向"},
], ],
}, },
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
if (data.deviceType) { if (data.deviceType) {
changeHandle(data, formList); changeHandle(data, formList);
} }
@ -356,7 +384,7 @@ export default {
], ],
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList); data.deviceType && changeHandle(data, formList);
} }
}, },
@ -372,7 +400,7 @@ export default {
key: "startStakeMark[1]", key: "startStakeMark[1]",
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList); data.deviceType && changeHandle(data, formList);
} }
}, },
@ -406,7 +434,7 @@ export default {
], ],
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList); data.deviceType && changeHandle(data, formList);
} }
}, },
@ -422,7 +450,7 @@ export default {
key: "endStakeMark[1]", key: "endStakeMark[1]",
ons: { //on监听 element事件 ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
data.deviceType && changeHandle(data, formList); data.deviceType && changeHandle(data, formList);
} }
}, },
@ -440,16 +468,42 @@ export default {
clearable: true, clearable: true,
options: [], options: [],
["collapse-tags"]: true ["collapse-tags"]: true
},ons: { //on监听 element事件 }, ons: { //on监听 element事件
change(value, ...args) { change(value, ...args) {
const { data, formList } = args.slice(-1)[0]; //data 为数据 formList为传入的配置项 const {data, formList} = args.slice(-1)[0]; //data 为数据 formList为传入的配置项
changeHandleScreenSize( data, formList); changeHandleScreenSize(data, formList);
} }
}, },
visible: data => { visible: data => {
return data.deviceType === '2'; return data.deviceType === '2';
}, },
}, },
{
label: "摄像机类型类型:",
key: "cameraType",
type: "select",
isAlone: true,
width: '100%',
options: {
clearable: true,
options: [],
["collapse-tags"]: true
},
visible: data => {
return data.deviceType === '1';
},
ons: {
change(value, ...args) {
const {data, formList} = args.slice(-1)[0]; // data 为数据, formList为传入的配置项
const filterData = {childType: value,facilitiesType:1};
data.direction && (filterData.direction = data.direction);
data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
setDeviceOptions({deviceType: data.deviceType}, filterData, formList);
data.childType = undefined;
}
},
},
{ {
label: "设备名称:", label: "设备名称:",
key: "childType", key: "childType",
@ -465,6 +519,37 @@ export default {
visible: data => { visible: data => {
return true; return true;
}, },
ons: {
change(value, ...args) {
const { data, formList } = args.slice(-1)[0];
const options = formList.find(item => item.key === 'childType' ).options.options;
// 计算可选设备的数量
const availableOptions = options
.filter(option => !option.disabled && option.value !== 'selectAll') // 过滤掉不可选的设备和“全选”选项
.map(option => option.value);
// 移除“全选”选项，防止重复选择
if (data.childType.includes('selectAll')) {
data.childType = data.childType.filter(val => val !== 'selectAll');
}
if (value.includes('selectAll')) {
if (data.childType.length === availableOptions.length){
data.childType =[]
}else {
// 只选择可用的设备
data.childType = options
.filter(option => !option.disabled && option.value !== 'selectAll') // 过滤掉不可选的设备和“全选”选项
.map(option => option.value); }
} else {
// 否则，设置选中的值
data.childType = value;
}
// 移除“全选”选项，防止重复选择
if (data.childType.includes('selectAll')) {
data.childType = data.childType.filter(val => val !== 'selectAll');
}
}
}
}, },
], ],
DeviceTopics, DeviceTopics,
@ -482,7 +567,6 @@ export default {
], ],
data2: [], //批量管控 data2: [], //批量管控
tableTotal2: 0, tableTotal2: 0,
searchData2: { searchData2: {
@ -502,10 +586,10 @@ export default {
type: "select", type: "select",
options: { options: {
options: [ options: [
{ key: "0", label: "手动控制" }, {key: "0", label: "手动控制"},
{ key: "1", label: "定时控制" }, {key: "1", label: "定时控制"},
{ key: "2", label: "批量控制" }, {key: "2", label: "批量控制"},
{ key: "3", label: "预案控制" } {key: "3", label: "预案控制"}
], ],
}, },
}, },
@ -573,8 +657,8 @@ export default {
// 解决弹窗冲突问题 // 解决弹窗冲突问题
setTimeout(() => { setTimeout(() => {
let pop = document.getElementsByClassName('el-popover') let pop = document.getElementsByClassName('el-popover')
for(let i of pop){ for (let i of pop) {
if(i.getAttribute('aria-hidden') === 'false'){ if (i.getAttribute('aria-hidden') === 'false') {
i.style['z-index'] = '1000' i.style['z-index'] = '1000'
} }
} }
@ -616,7 +700,7 @@ export default {
request({ request({
url: `/business/dcBatchFunctionsJobGroup/list`, url: `/business/dcBatchFunctionsJobGroup/list`,
method: "get", method: "get",
params: { ...this.searchData2 }, params: {...this.searchData2},
}) })
.then((result) => { .then((result) => {
if (result.code != 200) return; if (result.code != 200) return;
@ -657,8 +741,8 @@ export default {
const resJson = JSON.parse(e.jsonResult) const resJson = JSON.parse(e.jsonResult)
const resCodes = []; const resCodes = [];
const resCodesDeivce = []; const resCodesDeivce = [];
for(let i of resJson){ for (let i of resJson) {
if(resCodesDeivce.indexOf(i.device) === -1){ if (resCodesDeivce.indexOf(i.device) === -1) {
resCodesDeivce.push(i.device) resCodesDeivce.push(i.device)
resCodes.push(i.result.code) resCodes.push(i.result.code)
} }
@ -666,17 +750,17 @@ export default {
const resParam = JSON.parse(e.operParam)[0].devices const resParam = JSON.parse(e.operParam)[0].devices
const aryRemark = []; const aryRemark = [];
e.remark.split(',').filter(x=>{ e.remark.split(',').filter(x => {
x.split('、').filter(y=>{ x.split('、').filter(y => {
aryRemark.push(y) aryRemark.push(y)
}) })
}) })
e.operTime= moment(e.operTime).format('YYYY-MM-DD HH:mm:ss') e.operTime = moment(e.operTime).format('YYYY-MM-DD HH:mm:ss')
e.operType= _.find(this.Enum_ControlType, { key: e.operType }).label e.operType = _.find(this.Enum_ControlType, {key: e.operType}).label
e.arydcDeviceName = e.dcDeviceName.replace(/[\[\]]/g,'').split(','); e.arydcDeviceName = e.dcDeviceName.replace(/[\[\]]/g, '').split(',');
e.aryRemark = aryRemark; e.aryRemark = aryRemark;
e.aryState = resCodes e.aryState = resCodes
e.arydcDeviceType = resParam.map(x=>enum_deviceType[x.deviceType]) e.arydcDeviceType = resParam.map(x => enum_deviceType[x.deviceType])
}); });
this.tableData = result.rows; this.tableData = result.rows;
this.tableTotal = result.total; this.tableTotal = result.total;
@ -720,7 +804,7 @@ export default {
::v-deep .el-table .cell { ::v-deep .el-table .cell {
text-overflow: clip !important; text-overflow: clip !important;
-webkit-line-clamp: 100; -webkit-line-clamp: 100;
} }
</style> </style>
<style lang="scss"> <style lang="scss">
div.el-popper.global-input-search-popover { div.el-popper.global-input-search-popover {
@ -788,7 +872,8 @@ div.el-popper.global-input-search-popover {
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px; padding-bottom: 10px;
overflow-y: auto; overflow-y: auto;
.card{
.card {
width: 187px; width: 187px;
} }
} }
@ -799,12 +884,14 @@ div.el-popper.global-input-search-popover {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.groupName{
.groupName {
width: 100px; width: 100px;
white-space: nowrap; /* 确保文本在一行内显示 */ white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 超出容器部分的文本隐藏 */ overflow: hidden; /* 超出容器部分的文本隐藏 */
text-overflow: ellipsis; /* 使用省略符号表示超出的文本 */ text-overflow: ellipsis; /* 使用省略符号表示超出的文本 */
} }
.remark { .remark {
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
@ -828,20 +915,20 @@ div.el-popper.global-input-search-popover {
::v-deep { ::v-deep {
>button, > button,
>ul li { > ul li {
background: #064258; background: #064258;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
color: #fff; color: #fff;
} }
>button { > button {
padding: 0 3px; padding: 0 3px;
border: 1px solid #00b3cc; border: 1px solid #00b3cc;
} }
>ul li { > ul li {
background: linear-gradient(180deg, #004960 0%, #004b62 100%); background: linear-gradient(180deg, #004960 0%, #004b62 100%);
margin: 0 1.5px; margin: 0 1.5px;

3
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
View File

@ -245,6 +245,9 @@ export function getDeviceList(deviceType, options) {
if (options && options.direction && options.direction !== "") { if (options && options.direction && options.direction !== "") {
data["direction"] = options.direction; data["direction"] = options.direction;
} }
if (options && options.facilitiesType && options.facilitiesType !== "") {
data["facilitiesType"] = options.facilitiesType;
}
request( request(
Object.keys(options || {}).length Object.keys(options || {}).length
? { ? {

Write Preview
Loading…
Cancel
Save