Browse Source

行车诱导修改提交

wangqin
Joe 10 months ago
parent
commit
b7f5c950ef
  1. 109
      ruoyi-ui/src/assets/styles/JiHeExpressway.scss
  2. 8
      ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
  3. 4
      ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue
  4. 131
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
  5. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
  6. 19
      ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss

109
ruoyi-ui/src/assets/styles/JiHeExpressway.scss

@ -1,5 +1,5 @@
.theme-jihe {
$textColor: #F4F4F4;
$textColor: #f4f4f4;
$inputHeight: 26px;
color: $textColor;
@ -17,7 +17,7 @@
line-height: 32px;
height: $inputHeight;
overflow: hidden;
color: #3DE8FF;
color: #3de8ff;
}
.el-form-item__content {
@ -30,8 +30,8 @@
}
.el-input__inner {
padding: 0 8px;
background-color: #0D5F79;
// padding: 0 8px;
background-color: #0d5f79;
color: $textColor;
border-radius: 2px;
line-height: $inputHeight;
@ -42,8 +42,8 @@
&::placeholder {
color: $textColor;
}
&[disabled]{
color:#667 !important;
&[disabled] {
color: #667 !important;
}
}
@ -56,8 +56,8 @@
.el-checkbox__inner {
width: 20px;
height: 20px;
border: 1px solid #00B3CC;
background-color: #0D5F79;
border: 1px solid #00b3cc;
background-color: #0d5f79;
}
::after {
@ -70,8 +70,8 @@
.el-checkbox.is-checked {
.el-checkbox__inner {
border: 1px solid #00B3CC;
background-color: #00B3CC;
border: 1px solid #00b3cc;
background-color: #00b3cc;
}
}
}
@ -87,12 +87,12 @@
.el-input-number__increase {
width: 22px;
height: $inputHeight;
background-color: #004A69;
background-color: #004a69;
border: none;
color: #FFF;
color: #fff;
&.is-disabled {
color: #006A99;
color: #006a99;
}
}
@ -105,8 +105,8 @@
margin-right: 10px;
.el-radio-button__inner {
background-color: #0D5F79;
border: 1px solid #00B3CC;
background-color: #0d5f79;
border: 1px solid #00b3cc;
color: $textColor;
height: 26px;
padding: 0 10px;
@ -118,9 +118,8 @@
}
&.is-active {
.el-radio-button__inner {
background-image: linear-gradient(180deg, #37E7FF 0%, #009BCC 100%);
background-image: linear-gradient(180deg, #37e7ff 0%, #009bcc 100%);
color: $textColor;
border: none;
height: 26px;
@ -128,45 +127,65 @@
}
}
}
// 导航菜单
.el-menu--popup {
border-radius: 0;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.5) 0%, #064258 93%);
border: 1px solid;
border-image: linear-gradient(0deg, rgba(55, 231, 255, 0.5), rgba(55, 231, 255, 0)) 10 10;
.el-submenu__title {}
border-image: linear-gradient(
0deg,
rgba(55, 231, 255, 0.5),
rgba(55, 231, 255, 0)
)
10 10;
.el-submenu__title {
}
.el-submenu__icon-arrow {}
.el-submenu__icon-arrow {
}
.el-menu-item, .el-submenu__title{
.el-menu-item,
.el-submenu__title {
text-align: center;
background: none;
font-size: 16px;
font-weight: bold;
color: #00D1FF;
border: 1px solid transparent;
transition: none;
.el-submenu__icon-arrow{
color: #00D1FF;
}
&:hover {
color: #fff;
background: linear-gradient(90deg, rgba(164, 255, 250, 0) 0%, rgba(164, 255, 250, 0.42) 50%, rgba(164, 255, 250, 0) 100%);
border: 1px solid;
border-image: linear-gradient(90deg, rgba(190, 255, 246, 0.03) 0%, rgba(190, 255, 246, 1) 50%, rgba(190, 255, 246, 0.03) 100%) 1 1;
}
p{
color: #FFF;
}
background: none;
font-size: 16px;
font-weight: bold;
color: #00d1ff;
border: 1px solid transparent;
transition: none;
.el-submenu__icon-arrow {
color: #00d1ff;
}
&:hover {
color: #fff;
background: linear-gradient(
90deg,
rgba(164, 255, 250, 0) 0%,
rgba(164, 255, 250, 0.42) 50%,
rgba(164, 255, 250, 0) 100%
);
border: 1px solid;
border-image: linear-gradient(
90deg,
rgba(190, 255, 246, 0.03) 0%,
rgba(190, 255, 246, 1) 50%,
rgba(190, 255, 246, 0.03) 100%
)
1 1;
}
p {
color: #fff;
}
}
.el-menu-item.is-active, .el-submenu__title.is-active{
color: #FFF;
.el-menu-item.is-active,
.el-submenu__title.is-active {
color: #fff;
}
}
.el-menu--popup-bottom-start {
margin-top: 16px;
}
}
}

8
ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue

@ -70,13 +70,13 @@ export default {
];
if (scaleX > scaleY) {
// cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`;
cssGlobalVariable[0][1] = `scaleX(${1 - (scaleX - scaleY)})`;
cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`;
// cssGlobalVariable[0][1] = `scaleX(${1 - (scaleX - scaleY)})`;
cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`;
cssGlobalVariable[2][1] = `scaleX(${1 - (scaleX - scaleY) / 2})`;
} else {
// cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`;
cssGlobalVariable[0][1] = `scaleX(${1 - (scaleY - scaleX)})`;
cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`;
// cssGlobalVariable[0][1] = `scaleX(${1 - (scaleY - scaleX)})`;
cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`;
cssGlobalVariable[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`;
}

4
ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElSelect.vue

@ -1,6 +1,8 @@
<template>
<ElSelect v-bind="$attrs" v-on="$listeners">
<ElOption v-for="item in options" :key="item.key || item.value" :label="item.label" :value="item.key || item.value">
<ElOption v-for="item in options"
:disabled="typeof item.disabled === 'function' ? item.disabled(item, $parent.formData) : item.disabled"
:key="item.key || item.value" :label="item.label" :value="item.key || item.value">
<component :is="optionComponent" />
</ElOption>
</ElSelect>

131
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue

@ -30,7 +30,8 @@ import { Message } from "element-ui";
const workStatus = [
{
key: "00",
label: "不更新状态"
label: "不更新状态",
disabled: false
},
{
key: "01",
@ -46,8 +47,9 @@ const workStatus = [
},
{
key: "04",
label: "关闭"
},
label: "关闭",
disabled: false
}
]
export default {
@ -73,18 +75,28 @@ export default {
label: "类型:",
key: "controlType",
type: "RadioGroup",
default: "manual",
default: "00",
ons: {
input: (value, data) => {
input: (value, data, that) => {
const oldFormData = this.oldFormData;
if (!oldFormData) return;
that.formList[1].options.options.splice(-1, 1, {
...workStatus.slice(-1)[0],
disabled: value != "00"
})
that.formList[1].options.options.splice(0, 1, {
...workStatus[0],
disabled: value != "00"
})
switch (value) {
case "manual":
data.onWorkStatus = oldFormData.onWorkStatus;
data.inWorkStatus = oldFormData.inWorkStatus;
break;
case "automatic":
case "01":
if (['04', '00'].includes(data.onWorkStatus)) data.onWorkStatus = null;
if (['04', '00'].includes(data.inWorkStatus)) data.inWorkStatus = null;
Array.isArray(oldFormData.displayTime) && (data.displayTime = [...oldFormData.displayTime]);
break;
}
@ -94,13 +106,17 @@ export default {
type: 'circle',
options: [
{
key: "manual",
key: "00",
label: "手动控制",
},
{
key: "automatic",
key: "01",
label: "自动控制",
}
},
{
key: "02",
label: "万年历",
},
],
},
},
@ -109,7 +125,6 @@ export default {
key: "onWorkStatus",
required: true,
type: "select",
visible: (data) => data.controlType == "manual",
options: {
placeholder: "请选择",
options: workStatus
@ -120,7 +135,6 @@ export default {
key: "inWorkStatus",
required: true,
type: "select",
visible: (data) => data.controlType == "manual",
options: {
placeholder: "请选择",
options: workStatus
@ -131,7 +145,7 @@ export default {
key: "displayTime",
type: "timePicker",
required: true,
visible: (data) => data.controlType == "automatic",
visible: (data) => data.controlType == "01",
options: {
isRange: true,
rangeSeparator: "至",
@ -164,57 +178,67 @@ export default {
}
},
methods: {
reDisplay() {
request.post(`business/device/functions/${this.deviceId}/${52}`, {})
.then(async (result) => {
if (result.code != 200) return;
requestURL(functionId, options = {}) {
return new Promise((resolve, reject) => {
request.post(`business/device/functions/${this.deviceId}/${functionId}`, options)
.then((result) => {
if (result.code != 200) return reject();
resolve(result.data[0]);
})
.catch((err) => {
reject();
});
});
},
reDisplay() {
this.requestURL(52)
.then(async (data) => {
await delay(0);
const formData = this.$refs.FormConfigRef?.formData;
const data = result.data[0];
console.log("%c [ data ]-155-「DeviceControlDialog.vue」", "font-size:15px; background:#66352f; color:#aa7973;", data);
formData.controlType = data.mode;
switch (data.mode) {
case "00":
formData.controlType = "manual";
formData.onWorkStatus = data.onWorkStatus;
formData.inWorkStatus = data.inWorkStatus;
break;
case "01":
formData.controlType = "automatic";
case "02":
await this.requestURL("3C")
.then((data2) => {
formData.onWorkStatus = data2.onWorkStatus;
formData.inWorkStatus = data2.inWorkStatus;
formData.displayTime = [data.startDisplay, data.endDisplay];
if (data.mode === '01')
formData.displayTime = [data.startDisplay, data.endDisplay];
})
.catch(() => { });
break;
}
this.oldFormData = { ...formData };
})
})
},
handleSubmit() {
const result = {}, formData = this.$refs.FormConfigRef?.formData;
let functionId = 51;
result.mode = formData.controlType === 'manual' ? "00" : "01";
result.mode = formData.controlType;
delete result.controlType;
if (result.mode === '01') {
if (!formData.displayTime?.length) return Message.error(`时间不能为空!`);
result.startDisplayTime = formData.displayTime[0];
result.endDisplayTime = formData.displayTime[1];
delete result.displayTime;
} else {
if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`);
result.onWorkStatus = formData.onWorkStatus
result.inWorkStatus = formData.inWorkStatus
}
if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`);
result.onWorkStatus = formData.onWorkStatus;
result.inWorkStatus = formData.inWorkStatus;
this.submitting = true;
// this.submitting = false;
@ -225,10 +249,33 @@ export default {
*
* https://www.showdoc.com.cn/2450725213006196/10877717880262686
*/
request.post(`business/device/functions/${this.deviceId}/${functionId}`, result)
.then((result) => {
if (result.code != 200) return Message.error(`设备操作失败!`);
let promise = [];
switch (result.mode) {
case "00":
promise.push(this.requestURL("51", result))
break;
case "01":
case "02":
const options = { mode: result.mode };
if (result.mode === '01') {
options.startDisplayTime = formData.displayTime[0];
options.endDisplayTime = formData.displayTime[1];
}
promise.push(
this.requestURL("30", {
onWorkStatus: result.onWorkStatus,
inWorkStatus: result.inWorkStatus,
}),
this.requestURL("51", options),
)
break;
}
Promise.all(promise)
.then(() => {
this.modelVisible = false;
})
.catch((err) => {
@ -246,7 +293,7 @@ export default {
<style lang='scss' scoped>
.DeviceControlDialog {
width: 450px;
height: 180px;
height: 210px;
display: flex;
flex-direction: column;
gap: 15px;

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

@ -8,14 +8,14 @@
</div>
<!-- group -->
<TransitionGroup name="fade-group" tag="div" class="tabs-content">
<div name="fade-group" tag="div" class="tabs-content">
<div class="device-item" v-for="(item, index) in tabContentData" :key="item.id" @click="handleDevice(item)"
:style="getStart(index)">
<div class="device-icon"
:style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})`, '--bgColor': `rgba(0, 209, 255, ${item.status ? 0.3 : 0})` }" />
<span>{{ item.title }}</span>
</div>
</TransitionGroup>
</div>
<div class="bottom">
<div class="cleared-btn" @click="handleCleared">
@ -86,6 +86,7 @@ export default {
// 0 ControlCamera | 1 Camera
component: void 0,
data: void 0,
// component: "DrivingGuidance",
// data: {
// camId: "57937",
// }
@ -193,12 +194,6 @@ export default {
opacity: 0;
}
.fade-group-leave-active {
// transform: translateY(24px);
position: absolute !important;
overflow: hidden;
}
.RoadAndEvents {
width: 100%;
// background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
@ -223,6 +218,7 @@ export default {
overflow: auto;
position: relative;
gap: 6px;
transition: all .24s linear;
.device-item {
// position: absolute;
@ -234,6 +230,7 @@ export default {
align-items: center;
--height-svg: 24px;
--gap: 12px;
transition: all .15s linear;
padding-top: calc(var(--height-svg) + var(--gap));
.device-icon {
@ -241,6 +238,7 @@ export default {
align-items: center;
justify-content: center;
position: absolute;
transition: all .15s linear;
top: 0;
height: 33px;
width: 100%;

19
ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss

@ -44,6 +44,25 @@ div.el-popper {
}
}
.el-select-dropdown__item.is-disabled {
color: #c0c4cc !important;
background-color: #12242e;
}
label.el-radio {
margin-right: 9px;
}
label.el-radio.is-bordered + label.el-radio.is-bordered {
margin-left: 0;
}
div.el-date-editor--daterange.el-input,
div.el-date-editor--daterange.el-input__inner,
div.el-date-editor--timerange.el-input,
div.el-date-editor--timerange.el-input__inner {
width: 100%;
}
div.el-select {
width: 100%;
}

Loading…
Cancel
Save