Compare commits

...

2 Commits

  1. 88
      ruoyi-ui/README.md
  2. 220
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
  3. 71
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
  4. 18
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
  5. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
  6. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
  7. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
  8. 32
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

88
ruoyi-ui/README.md

@ -84,84 +84,13 @@ data.js 表单封装,里面会使用PresetFormItems的一些FormItem.
Form表单属性介绍:
<Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
{
key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要
label: "服务区异常",//表单标题
formConfig: {
formOptions: {//element中表单配置参数
column: 2, //一行放多少元素(基于:style grid布局实现)
},
list: [//FormItem定义
{
label: "异常分类:",
key: "eventSubclass",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "8-1",
label: "封闭、暂停营业",
},
{
key: "8-2",
label: "重要设施停用",
},
{
key: "8-3",
label: "其他异常",
},
],
},
},
PresetFormItems.freeway,
PresetFormItems.direction,
{
label: "服务区:",
key: "dcEventServiceArea.facilityId",
type: "select",
isAlone: true,
required: true,
options: {
options: [
{
value: "选项1",
label: "黄金糕",
},
],
},
},
{
label: "出入口:",
key: "dcEventServiceArea.exitsInlets",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "出口",
},
{
key: "2",
label: "入口",
},
],
},
},
PresetFormItems.startTime,
PresetFormItems.expectedEndTime,
PresetFormItems.remark,
PresetFormItems.source,
],
},
}
/*
column: 一行放多少元素(基于:style grid布局实现)
formList: 表单项(FormItem)配置集合
v-model: 双向绑定的表单数据(可以获取到表单数据(同步表单数据this.$emit("update:value", this.formData)), 也可修改表单数据)
*/
FormItem属性介绍:
FormItem属性介绍 & ons 事件监听:
export const additionalNotes = {
label: "补充说明:", // 标题
@ -184,8 +113,9 @@ export const additionalNotes = {
},
ons: { //on监听 element事件
change(value, ...args) {
const { data, formList } = args.slice(-1)\[0]; //data 为数据 formList为传入的配置项
mileCal(data);
const { data, formList } = args.slice(-1)\[0]; //data 为表单数据 formList为传入的配置项
formList[4].options.options = []; //调整配置项 修改下拉框options选项
this.$set(this.data, 'deviceState', undefined); //更新v-model双向绑定的表单数据
}
},
};

220
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue

@ -0,0 +1,220 @@
<template>
<div class="body">
<div class="left">
<div class="title">路测广播列表</div>
<CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList"
id="otherConfig" label="deviceName">
<template #[otherConfig]="{ data }">
<span style="color: #6ee5fe"> {{ data.deviceName }}(当前) </span>
</template>
</CheckboxGroup>
</div>
<div class="right">
<div class="top-content">
<Video class="item-video" :pileNum="pileNum" />
<label>发布内容: </label>
<ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
showWordLimit placeholder="请输入发布内容" />
</div>
<div class="footer">
<Button style="background-color: rgba(0, 179, 204, 0.3)"
@click.native="(modelVisible = false), (submitting = false)">
取消
</Button>
<Button @click.native="handleSubmit" :loading="submitting">
确定
</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 { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { Message } from "element-ui";
export default {
name: "BroadcastReleases",
components: {
Dialog,
Button,
Video,
CheckboxGroup,
},
model: {
prop: "visible",
event: "update:value",
},
props: {
visible: Boolean,
pileNum: String,
otherConfig: String,
},
data() {
return {
submitting: false,
checkList: [],
releaseMessage: 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: {
handleSubmit() {
if (!this.releaseMessage?.trim())
return Message.error("发布内容不能为空!");
if (!this.checkList.length)
return Message.error("请至少选择一个广播设备!");
this.submitting = true;
request({
url: `/broadcast/broadcastFunctionCall`,
method: "post",
data: {
name: "task-3",
outVol: "6",
priority: "1",
text: this.releaseMessage.trim(),
repeatTimes: "3",
termList: this.checkList.map((str) => JSON.parse(str)),
functionType: "startPaTts",
},
})
.then((data) => {
// console.log(data);
if (data.retCode == "0") {
Message.success("广播设置成功!");
this.modelVisible = false;
} else {
Message.error("广播设置失败!");
}
})
.finally(() => {
this.submitting = false;
});
},
},
};
</script>
<style lang="scss" scoped>
.body {
display: flex;
gap: 9px;
height: 100%;
.left {
width: 251px;
border-radius: 3px 3px 3px 3px;
border: 1px solid #3de8ff;
padding: 3px 12px;
display: flex;
flex-direction: column;
gap: 9px;
::v-deep .el-checkbox__label {
display: flex !important;
justify-content: space-between;
width: 100%;
.title {
flex: 1;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
}
.state {
width: 18px;
height: 18px;
margin-right: 4px;
}
.huiduButton {
background: transparent;
border: none;
height: 18px;
width: 18px;
line-height: 20px;
padding: 0;
color: #fff;
font-size: 16px;
}
.huiduButton:hover {
color: #05afe3 !important;
}
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 6px;
overflow: auto;
height: 100%;
flex: 1;
flex-wrap: nowrap;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.top-content {
display: flex;
flex-direction: column;
gap: 9px;
.item-video {
width: 545px;
}
label {
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3de8ff;
line-height: 19px;
}
}
}
}
.footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
}
</style>

71
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue

@ -1,51 +1,37 @@
<template>
<Dialog v-model="modelVisible" title="广播发布" width="850px">
<div class="BroadcastReleases">
<div class="body">
<BroadcastParam v-model="modelVisible" :pileNum="pileNum" :otherConfig="otherConfig" />
<!-- <div class="body">
<div class="left">
<div class="title">路测广播列表</div>
<CheckboxGroup
class="checkbox-group"
gap="9px"
:showIcon="true"
v-model="checkList"
:options="musicList"
id="otherConfig"
label="deviceName"
>
<CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList"
id="otherConfig" label="deviceName">
<template #[otherConfig]="{ data }">
<span style="color: #6ee5fe"> {{ data.deviceName }}(当前) </span>
</template>
</CheckboxGroup>
</div>
<div class="right">
<div class="top-content">
<Video class="item-video" :pileNum="pileNum" />
<label>发布内容: </label>
<ElInput
type="textarea"
v-model="releaseMessage"
:autosize="{ minRows: 3, maxRows: 3 }"
:maxlength="150"
showWordLimit
placeholder="请输入发布内容"
/>
</div>
<div class="footer">
<Button
style="background-color: rgba(0, 179, 204, 0.3)"
@click.native="(modelVisible = false), (submitting = false)"
>
取消
</Button>
<Button @click.native="handleSubmit" :loading="submitting">
确定
</Button>
</div>
</div>
</div>
</CheckboxGroup>
</div>
<div class="right">
<div class="top-content">
<Video class="item-video" :pileNum="pileNum" />
<label>发布内容: </label>
<ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
showWordLimit placeholder="请输入发布内容" />
</div>
<div class="footer">
<Button style="background-color: rgba(0, 179, 204, 0.3)"
@click.native="(modelVisible = false), (submitting = false)">
取消
</Button>
<Button @click.native="handleSubmit" :loading="submitting">
确定
</Button>
</div>
</div>
</div> -->
</div>
</Dialog>
</template>
@ -55,7 +41,7 @@ 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 BroadcastParam from "./BroadcastParam.vue";
import request from "@/utils/request";
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
@ -68,6 +54,7 @@ export default {
Button,
Video,
CheckboxGroup,
BroadcastParam
},
model: {
prop: "visible",
@ -75,9 +62,7 @@ export default {
},
props: {
visible: Boolean,
deviceId: String,
pileNum: String,
currentId: [String, Number],
otherConfig: String,
},
data() {

18
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue

@ -10,11 +10,7 @@
</ElTabPane>
<!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
<ElTabPane label="在线率统计" name="third">
<LineChart
v-if="activeName === 'third'"
:productId="dialogData.id"
style="height: 150px"
/>
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" />
</ElTabPane>
</ElTabs>
@ -23,13 +19,7 @@
</div>
</div>
<BroadcastReleases
v-model="releaseVisible"
:deviceId="dialogData.iotDeviceId"
:pileNum="dialogData.stakeMark"
:otherConfig="dialogData.otherConfig"
:currentId="dialogData.id"
/>
<BroadcastReleases v-model="releaseVisible" :pileNum="dialogData.stakeMark" :otherConfig="dialogData.otherConfig" />
</Dialog>
</template>
@ -131,7 +121,7 @@ export default {
if (roadInfo) this.data.roadName = roadInfo.roadName;
},
methods: {
handleClickTabs() {},
handleClickTabs() { },
},
};
</script>
@ -171,7 +161,7 @@ export default {
align-items: center;
justify-content: end;
> div {
>div {
font-size: 16px;
padding: 6px 12px;
}

1
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue

@ -90,7 +90,6 @@ export default {
watch: {
activeDeviceTypes: {
handler(val) {
console.log(val, this.activeDeviceTypes, 'xxx')
const options = []
for (let id of DeviceTypeIds) {
if (this.activeDeviceTypes.indexOf(`路测设备_${id}`) >= 0) {

7
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue

@ -37,10 +37,11 @@ import { delay } from "@screen/utils/common";
import { initSearch } from "@screen/utils/enum/common.js"
import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"
const DeviceTopics = {}
const controlMulti = ["情报板", "行车诱导", "疲劳唤醒", "合流区", "设备箱", "语音广播"];
const DeviceTopics = {};//6 {key:label}
Object.keys(DeviceForMap).forEach(DeviceLabel => {
DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel;
controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
});
async function setDeviceOptions(config, filterData, formList) {
const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
@ -248,7 +249,7 @@ export default {
const match = activeDeviceType.match(/路测设备_(\d+)/);
if (match) {
const deviceType = match[1];
activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
}
});

1
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

@ -246,7 +246,6 @@ export default {
this.emitter.emit("selectedCompleted", item);
return this.$emit("onClickItem", item);
}
console.log(`${key}${status ? "_close" : ""}`, this.filterData, isDefault)
await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault, this.cb);
},

32
ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@ -1,13 +1,9 @@
<template>
<div class="Home">
<AMapContainer
ref="AMapContainerRef"
@update:isGisCompleted="
(data) => {
this.isGisCompleted = data;
}
"
/>
<AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => {
this.isGisCompleted = data;
}
" />
<section class="content">
<!-- 左侧 -->
<div class="content-l">
@ -15,11 +11,7 @@
<FocusedMonitoring class="card-menu" />
<!-- -->
<RoadAndEvents
ref="RoadAndEventsRef"
:isGisCompleted="isGisCompleted"
class="content-l-b card-menu"
/>
<RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
</div>
<!-- 右侧 -->
@ -30,7 +22,7 @@
<HomeVector class="item" />
<HomeWord class="item" />
<!-- <HomeVectorControl class="item" /> -->
<!-- <HomeFrameControl class="item" /> -->
<HomeFrameControl class="item" />
</div>
<ConditionStatistics class="right card-menu" />
</div>
@ -39,11 +31,7 @@
<footer class="footer card-menu">
<div class="footer-title">
<span>济菏高速缩略图</span>
<i
class="el-icon-s-fold"
style="color: #2ad9fd; transform: rotate(-90deg)"
@click.stop="handleShrink"
/>
<i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" />
</div>
<div class="footer-content">
<Thumbnail />
@ -147,7 +135,7 @@ export default {
height: min-content;
pointer-events: none;
> div {
>div {
pointer-events: auto;
}
@ -161,7 +149,7 @@ export default {
overflow: hidden;
height: 100%;
> div {
>div {
pointer-events: all;
flex: 1;
}
@ -202,7 +190,7 @@ export default {
will-change: height;
bottom: 0;
> div {
>div {
pointer-events: all;
}

Loading…
Cancel
Save