Browse Source

修改 指挥调度 交互

wangqin
Joe 1 year ago
parent
commit
41e2127e10
  1. 18
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
  2. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue
  3. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue

18
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue

@ -4,14 +4,14 @@
<AMapContainer v-if="delayLoad" style="z-index: 9;" /> <AMapContainer v-if="delayLoad" style="z-index: 9;" />
</div> </div>
<div class="right border"> <div class="right border">
<div :class="['item', { active: active === item.key }]" v-for="item in operation" :key="item.key" <div :class="['item', { active: isActive(item) }]" v-for="item in operation" :key="item.key"
@click="handleClick(item)"> @click="handleClick(item)">
<ElPopover :disabled="item.key !== 'weather'" trigger="hover" placement="left"> <ElPopover trigger="manual" :value="isActive(item)" :disabled="item.key !== 'weather'" placement="left">
<div v-if="item.key === 'weather'"> <div v-if="item.key === 'weather'">
天气 能见度 风向西南 风力1 天气 能见度 风向西南 风力1
</div> </div>
<div class="label" slot="reference" <div class="label" slot="reference"
:style="{ backgroundImage: `url(${require(`./images/${item.key}${active === item.key ? '-active' : ''}.svg`)})` }" /> :style="{ backgroundImage: `url(${require(`./images/${item.key}${isActive(item) ? '-active' : ''}.svg`)})` }" />
</ElPopover> </ElPopover>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@ export default {
mixins: [provideMixin], mixins: [provideMixin],
data() { data() {
return { return {
active: "weather", active: [],
operation: [ operation: [
{ {
key: 'weather', key: 'weather',
@ -62,9 +62,17 @@ export default {
delayLoad: false delayLoad: false
} }
}, },
computed: {
isActive() {
return item => this.active.includes(item.key)
}
},
methods: { methods: {
handleClick(item) { handleClick(item) {
this.active = item.key const findIndex = this.active.indexOf(item.key);
if (findIndex === -1) this.active.push(item.key);
else
this.active.splice(findIndex, 1)
} }
}, },
mounted() { mounted() {

5
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue

@ -28,8 +28,8 @@
<TimeLine2 :data="timeLine2List" style="flex: 1;" /> <TimeLine2 :data="timeLine2List" style="flex: 1;" />
<ElEmpty v-if="!timeLine2List.length" description="暂无数据" /> <ElEmpty v-if="!timeLine2List.length" description="暂无数据" />
<div class="bottom"> <div class="bottom">
<ElSelect placeholder="请选择关键点" /> <ElSelect value="" placeholder="请选择关键点" />
<RadioGroup :options="[{ key: 'input', label: '输入' }, { key: 'upload', label: '上传' }]" value="input" <RadioGroup :options="[{ key: 'input', label: '输入' }, { key: 'upload', label: '上传' }]" v-model="testRadio"
type="button" /> type="button" />
<ElInput v-model="test" placeholder="请输入调度指令" /> <ElInput v-model="test" placeholder="请输入调度指令" />
<ButtonGradient class="title-button special-button"> <ButtonGradient class="title-button special-button">
@ -69,6 +69,7 @@ export default {
data() { data() {
return { return {
test: null, test: null,
testRadio: "input",
timeLine1List: [], timeLine1List: [],
// timeLine2List: Array.from({ length: 6 }).map(() => ({ // timeLine2List: Array.from({ length: 6 }).map(() => ({
// title: "", // title: "",

7
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue

@ -1,14 +1,14 @@
<template> <template>
<Card class='TrafficControl' title="交通管制"> <Card class='TrafficControl' title="交通管制">
<RadioGroup :options="radioList" value="mainlineControl" /> <RadioGroup v-model="radioValue" :options="radioList" />
<div class="bottom"> <div class="bottom">
<ButtonGradient class="title-button special-button" <ButtonGradient class="title-button special-button"
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);">
封闭 封闭
</ButtonGradient> </ButtonGradient>
<ButtonGradient class="title-button special-button" style=" <ButtonGradient class="title-button special-button"
background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);"> style="background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);">
限行 限行
</ButtonGradient> </ButtonGradient>
</div> </div>
@ -31,6 +31,7 @@ export default {
}, },
data() { data() {
return { return {
radioValue: "mainlineControl",
radioList: [ radioList: [
{ key: 'mainlineControl', label: '主线管制' }, { key: 'mainlineControl', label: '主线管制' },
{ key: 'tollboothControl', label: '收费站管制' }, { key: 'tollboothControl', label: '收费站管制' },

Loading…
Cancel
Save