59 changed files with 1356 additions and 347 deletions
@ -0,0 +1,97 @@ |
|||
// residenceTime 停留时间
|
|||
// screenEntryMethod 入屏方式
|
|||
// screenOutputMethod 出屏方式
|
|||
// screenEntrySpeed 入屏速度
|
|||
// flickerSpeed 闪烁速度
|
|||
// flashingFrequency 闪烁次数
|
|||
// playbackCount 播放次数
|
|||
// xCoordinate x
|
|||
// yCoordinate y
|
|||
// displayAreaWidth 宽度
|
|||
// displayAreaHeight 高度
|
|||
// font 字体
|
|||
// fontSize 字号
|
|||
// fontStyle 字体风格
|
|||
// horizontalAlignment 水平对齐
|
|||
// verticalAlignment 垂直对齐
|
|||
// lineSpacing 行距
|
|||
// fontSpacing 字距
|
|||
// foregroundColor 前景颜色
|
|||
// backgroundColor 背景颜色
|
|||
// playSpecialEffects 播放特效
|
|||
// specialEffectsSpeed 特效速度
|
|||
// playbackDuration 播放时长
|
|||
// playbackCount 播放次数
|
|||
// textContent 文本内容
|
|||
// whetherToPlayText 是否播放文字
|
|||
// whetherToSynchronizePlayback 是否同步播放
|
|||
// setUpTheSpeaker 设置发声音人
|
|||
// volume 音量
|
|||
// speechSpeed 语速
|
|||
// intonation 语调
|
|||
export default [ |
|||
{ |
|||
"backgroundColor": "00000000", |
|||
"displayAreaHeight": "120", |
|||
"displayAreaWidth": "768", |
|||
"flashingFrequency": "5", //闪烁次数
|
|||
"flickerSpeed": "0", //闪烁速度
|
|||
"font": "微软雅黑", |
|||
"fontSize": "14", |
|||
"fontSpacing": "4", |
|||
"fontStyle": "0", |
|||
"foregroundColor": "ffff00", |
|||
"horizontalAlignment": "2", |
|||
"intonation": "0", |
|||
"lineSpacing": "0", |
|||
"playSpecialEffects": "0", |
|||
"playbackCount": "1", |
|||
"playbackDuration": "50", |
|||
"residenceTime": "18", //停留时间
|
|||
"screenEntryMethod": "1", //入屏方式
|
|||
"screenEntrySpeed": "1", //入屏速度
|
|||
"screenOutputMethod": "1", //出屏方式
|
|||
"setUpTheSpeaker": "0", |
|||
"specialEffectsSpeed": "1", |
|||
"speechSpeed": "0", |
|||
"textContent": "因改扩建施工最高限速100km/h", |
|||
"verticalAlignment": "2", |
|||
"volume": "0", |
|||
"whetherToPlayText": "0", |
|||
"whetherToSynchronizePlayback": "0", |
|||
"xCoordinate": "0", |
|||
"yCoordinate": "0" |
|||
}, |
|||
{ |
|||
"backgroundColor": "00000000", |
|||
"displayAreaHeight": "180", |
|||
"displayAreaWidth": "700", |
|||
"flashingFrequency": "5", |
|||
"flickerSpeed": "0", |
|||
"font": "微软雅黑", |
|||
"fontSize": "30", |
|||
"fontSpacing": "20", |
|||
"fontStyle": "0", |
|||
"foregroundColor": "ff0000", |
|||
"horizontalAlignment": "1", |
|||
"intonation": "0", |
|||
"lineSpacing": "10", |
|||
"playSpecialEffects": "0", |
|||
"playbackCount": "1", |
|||
"playbackDuration": "50", |
|||
"residenceTime": "50", |
|||
"screenEntryMethod": "1", |
|||
"screenEntrySpeed": "1", |
|||
"screenOutputMethod": "1", |
|||
"setUpTheSpeaker": "0", |
|||
"specialEffectsSpeed": "1", |
|||
"speechSpeed": "0", |
|||
"textContent": "因改扩建施工最高限速100km/h", |
|||
"verticalAlignment": "2", |
|||
"volume": "0", |
|||
"whetherToPlayText": "0", |
|||
"whetherToSynchronizePlayback": "0", |
|||
"xCoordinate": "0", |
|||
"yCoordinate": "0" |
|||
} |
|||
] |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class='SimpleIcon' ref="SimpleIconRef" /> |
|||
</template> |
|||
|
|||
<script> |
|||
const cacheIcon = { |
|||
|
|||
} |
|||
|
|||
export default { |
|||
name: 'SimpleIcon', |
|||
props: { |
|||
/** |
|||
* [pattern, replacement] |
|||
*/ |
|||
replaces: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
url: { |
|||
type: String, |
|||
default: null |
|||
} |
|||
}, |
|||
async created() { |
|||
if (!cacheIcon[this.url]) { |
|||
await fetch(this.url).then(async data => { |
|||
cacheIcon[this.url] = await new Response(data.body).text(); |
|||
}) |
|||
}; |
|||
|
|||
this._icon_replace_data = cacheIcon[this.url].replaceAll(...this.replaces); |
|||
|
|||
this.insertHTML(); |
|||
}, |
|||
mounted() { |
|||
this.insertHTML(); |
|||
}, |
|||
methods: { |
|||
insertHTML() { |
|||
const el = this.$refs.SimpleIconRef; |
|||
if (!el) return; |
|||
|
|||
el.innerHTML = this._icon_replace_data; |
|||
|
|||
if (el.firstElementChild) { |
|||
const svg = el.firstElementChild; |
|||
el.replaceWith(el.firstElementChild) |
|||
|
|||
this.$nextTick(() => { |
|||
for (let key in el.dataset) { |
|||
svg.dataset[key] = ""; |
|||
} |
|||
|
|||
el.classList.forEach(className => svg.classList.add(className)) |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped></style> |
|||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 523 B |
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 767 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 918 B |
|
After Width: | Height: | Size: 734 B |
|
After Width: | Height: | Size: 486 B |
@ -1,3 +0,0 @@ |
|||
> 规范: |
|||
> 按照 XXX/index.vue |
|||
> 再去 HeaderMenu 的 menuData.js 修改 |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<div class='SelectList'> |
|||
<div class="title"> |
|||
{{ data.title }} |
|||
</div> |
|||
<div class="body"> |
|||
<div class="card" v-for="item in (data.list || [])"> |
|||
<SimpleIcon class="icon" :url="require('@screen/images/form/delete.svg')" |
|||
:replaces='[`stroke="white"`, `stroke="#52D6FF"`]' /> |
|||
|
|||
<slot :data="item"> |
|||
<div class="info"> |
|||
<span>{{ item.name }}</span> |
|||
<span>{{ item.phone }}</span> |
|||
</div> |
|||
</slot> |
|||
</div> |
|||
</div> |
|||
<div class="footer card"> |
|||
<img src="@screen/images/form/delete.svg" /> |
|||
<span>添加</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SimpleIcon from "@screen/components/SimpleIcon.vue" |
|||
|
|||
export default { |
|||
name: 'SelectList', |
|||
components: { |
|||
SimpleIcon |
|||
}, |
|||
props: { |
|||
data: { |
|||
/** |
|||
* { |
|||
* title: '标题', |
|||
* list: { |
|||
* name: "", |
|||
* phone: "", |
|||
* }[] |
|||
* } |
|||
*/ |
|||
type: Object, |
|||
default: () => ({}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.SelectList { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.title { |
|||
height: 22px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
line-height: 19px; |
|||
letter-spacing: 1px; |
|||
background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%); |
|||
background-clip: text; |
|||
color: transparent; |
|||
margin-bottom: 15px; |
|||
|
|||
text-align: center; |
|||
} |
|||
|
|||
.card { |
|||
width: 142px; |
|||
min-height: 65px; |
|||
background: #0D5F79; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
position: relative; |
|||
|
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 19px; |
|||
letter-spacing: 1px; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 3px; |
|||
} |
|||
|
|||
&.active { |
|||
background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%); |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 9px; |
|||
overflow: auto; |
|||
height: 100%; |
|||
flex: 1; |
|||
|
|||
.card { |
|||
cursor: pointer; |
|||
|
|||
.icon { |
|||
position: absolute; |
|||
width: 12px; |
|||
right: 3px; |
|||
top: 3px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 9px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 6px; |
|||
font-size: 15px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #4DD4FF; |
|||
line-height: 19px; |
|||
letter-spacing: 1px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<div class='SpecialTable'> |
|||
<div v-for="(dataItem, index) in data" class="row"> |
|||
<div class="bg normal"> |
|||
<div class="column" v-for="item in columns" :key="item.key" :style="{ width: item.width }"> |
|||
<div class="title" v-if="onlyFirstTitle ? !index : true"> |
|||
<slot :name="`title-${item.key}`" :title="item" :data="dataItem"> |
|||
{{ item.title }} |
|||
</slot> |
|||
</div> |
|||
<div class="content"> |
|||
<slot :name="`content-${item.key}`" :title="item" :data="dataItem" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="bg operation column"> |
|||
<div class="title"> |
|||
<slot name="operation-title"> |
|||
操作 |
|||
</slot> |
|||
</div> |
|||
<div class="content"> |
|||
<slot name="operation-content" :data="dataItem" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'SpecialTable', |
|||
props: { |
|||
/** |
|||
* { |
|||
* key: string; |
|||
* title: string; |
|||
* width: string |
|||
* }[] |
|||
*/ |
|||
columns: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
/** |
|||
* { |
|||
* id: string; |
|||
* [x: string]: any; |
|||
* }[] |
|||
*/ |
|||
data: { |
|||
type: Array, |
|||
default: () => [{}] |
|||
}, |
|||
onlyFirstTitle: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.SpecialTable { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
gap: 9px; |
|||
|
|||
.row { |
|||
width: 100%; |
|||
display: flex; |
|||
gap: 27px; |
|||
} |
|||
|
|||
.bg { |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(24, 57, 77, .7) 93%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(180deg, rgba(1, 135, 178, 0), rgba(1, 135, 178, .51)) 1 1; |
|||
} |
|||
|
|||
.normal { |
|||
display: flex; |
|||
} |
|||
|
|||
.column { |
|||
position: relative; |
|||
padding: 15px 18px; |
|||
// padding-top: 12px; |
|||
font-size: 20px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
line-height: 23px; |
|||
letter-spacing: 1px; |
|||
gap: 24px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.title { |
|||
background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%); |
|||
background-clip: text; |
|||
color: transparent; |
|||
// position: absolute; |
|||
} |
|||
|
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
&:not(:last-child) { |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
background-image: url("~@screen/images/divide.svg"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
height: 100%; |
|||
width: 3px; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.operation { |
|||
padding: 24px 18px; |
|||
|
|||
.content { |
|||
gap: 9px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<Dialog v-model="visibleModel" title="修改值班信息表"> |
|||
<div class="ModifyDutyInformationTable"> |
|||
<div class="search"> |
|||
<div> |
|||
<Form :formList="formList" /> |
|||
</div> |
|||
|
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="@screen/images/form/search.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
</div> |
|||
<div class="body"> |
|||
<SelectList v-for="item in list" :data="item" /> |
|||
</div> |
|||
<div class="bottom"> |
|||
<Button>确认</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Form from '@screen/pages/control/event/event/EventDetailDialog/Form.vue'; |
|||
|
|||
import SelectList from "./../../../components/SelectList.vue" |
|||
|
|||
export default { |
|||
name: 'ModifyDutyInformationTable', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
ButtonGradient, |
|||
SelectList, |
|||
Form |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
emit: ['close'], |
|||
data() { |
|||
return { |
|||
formList: [{ |
|||
label: "值班时间:", |
|||
key: "事件源", |
|||
type: "input", |
|||
}, |
|||
{ |
|||
label: "操作人员:", |
|||
key: "桩号:", |
|||
type: "input", |
|||
}], |
|||
list: Array.from({ length: 15 }).map(item => ({ |
|||
title: "123456", |
|||
list: Array.from({ length: 15 }).map((_, index) => ({ |
|||
name: index, |
|||
phone: "12345678901" |
|||
})) |
|||
})) |
|||
} |
|||
}, |
|||
computed: { |
|||
visibleModel: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(bool) { |
|||
this.$emit('close', bool); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ModifyDutyInformationTable { |
|||
width: 947px; |
|||
height: 658px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.search { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.body { |
|||
display: flex; |
|||
gap: 9px; |
|||
height: 100%; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 15px; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
width: 96px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<Dialog v-model="visibleModel" title="操作记录"> |
|||
<div class="OperateRecord"> |
|||
<TimeLine :data="timeLine2List" direction="right" /> |
|||
|
|||
<div class="bottom"> |
|||
<Button>确认</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import TimeLine from "@screen/components/TimeLine/TimeLine2/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
|
|||
export default { |
|||
name: 'OperateRecord', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
TimeLine |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
emit: ['close'], |
|||
data() { |
|||
return { |
|||
timeLine2List: Array.from({ length: 6 }).map(() => ({ |
|||
// title: "接警记录", |
|||
time: "2023-12-21 16:35:44", |
|||
name: "甘易玫", |
|||
desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字", |
|||
posts: '淄博发展公司管理员' |
|||
})), |
|||
} |
|||
}, |
|||
computed: { |
|||
visibleModel: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(bool) { |
|||
this.$emit('close', bool); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.OperateRecord { |
|||
width: 540px; |
|||
height: 518px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.bottom { |
|||
margin-top: 9px; |
|||
display: flex; |
|||
gap: 15px; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
width: 96px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,15 +1,213 @@ |
|||
<template> |
|||
<div class='DutyOfficer'> |
|||
DutyOfficer |
|||
<SpecialTable :columns="columns" :data="data"> |
|||
<template #title-DateDuty> |
|||
<div> |
|||
值班中心 |
|||
</div> |
|||
</template> |
|||
<template #content-DateDuty="{ data }"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/calendar.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</template> |
|||
<template #content-DutyLeaderCenter="{ data }"> |
|||
<div class="parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/phone.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #content-DispatchLeadership="{ data }"> |
|||
<div class="item-parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/phone.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #content-DispatchDuty="{ data }"> |
|||
<div class="item-parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #content-TravelDuty="{ data }"> |
|||
<div class="item-parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #content-EmergencyLeadership="{ data }"> |
|||
<div class="item-parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/phone.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #content-EmergencyDuty="{ data }"> |
|||
<div class="item-parent"> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
<div class="item"> |
|||
<img src="@screen/images/form/people.svg" /> |
|||
{{ data['值班日期'] }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #operation-content> |
|||
<ButtonGradient class="operate-button" @click.native="handleOperateRecord(true)"> |
|||
<template #prefix> |
|||
<img src="@screen/images/form/edit.svg" /> |
|||
</template> |
|||
修改 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true)"> |
|||
<template #prefix> |
|||
<img src="@screen/images/form/record.svg" /> |
|||
</template> |
|||
记录 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="operate-button"> |
|||
<template #prefix> |
|||
<img src="@screen/images/form/delete.svg" /> |
|||
</template> |
|||
删除 |
|||
</ButtonGradient> |
|||
</template> |
|||
</SpecialTable> |
|||
|
|||
<OperateRecord :visible="operateRecordVisible" @close="handleOperateRecord(false)" /> |
|||
<ModifyDutyInformationTable :visible="modifyDutyInformationTableVisible" |
|||
@close="handleModifyDutyInformationTable(false)" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SpecialTable from "./../../components/SpecialTable.vue" |
|||
import OperateRecord from "./components/OperateRecord.vue" |
|||
import ModifyDutyInformationTable from "./components/ModifyDutyInformationTable.vue" |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
|
|||
export default { |
|||
name: 'DutyOfficer', |
|||
components: { |
|||
SpecialTable, |
|||
OperateRecord, |
|||
ModifyDutyInformationTable, |
|||
ButtonGradient |
|||
}, |
|||
data() { |
|||
return { |
|||
columns: [ |
|||
{ |
|||
key: "DateDuty", |
|||
title: "值班日期", |
|||
width: "180px" |
|||
}, |
|||
{ |
|||
key: "DutyLeaderCenter", |
|||
title: "中心值班领导", |
|||
width: "240px" |
|||
}, |
|||
{ |
|||
key: "DispatchLeadership", |
|||
title: "调度领导", |
|||
width: "240px" |
|||
}, |
|||
{ |
|||
key: "DispatchDuty", |
|||
title: "调度值班", |
|||
width: "180px" |
|||
}, |
|||
{ |
|||
key: "TravelDuty", |
|||
title: "出行值班", |
|||
width: "180px" |
|||
}, |
|||
{ |
|||
key: "EmergencyLeadership", |
|||
title: "应急领导", |
|||
width: "240px" |
|||
}, |
|||
{ |
|||
key: "EmergencyDuty", |
|||
title: "应急值班", |
|||
width: "180px" |
|||
}, |
|||
], |
|||
data: Array.from({ length: 15 }).map((_, index) => ({ |
|||
"id": index, |
|||
"值班日期": "2023-12-21", |
|||
"中心值班领导": "甘易玫", |
|||
"调度领导": "甘易玫", |
|||
"调度值班": "甘易玫", |
|||
"出行值班": "甘易玫", |
|||
"应急领导": "甘易玫", |
|||
"应急值班": "甘易玫", |
|||
})), |
|||
|
|||
operateRecordVisible: false, |
|||
modifyDutyInformationTableVisible: false |
|||
} |
|||
}, |
|||
methods: { |
|||
handleOperateRecord(bool) { |
|||
this.operateRecordVisible = bool; |
|||
}, |
|||
handleModifyDutyInformationTable(bool) { |
|||
this.modifyDutyInformationTableVisible = bool; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DutyOfficer {} |
|||
.DutyOfficer { |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 6px; |
|||
|
|||
&:not(:last-child) { |
|||
margin-bottom: 6px; |
|||
} |
|||
} |
|||
|
|||
.operate-button { |
|||
width: 105px; |
|||
height: 41px; |
|||
border-radius: 5px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 624 B |
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 385 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
@ -1,142 +0,0 @@ |
|||
<template> |
|||
<div class='RoadNetworkMonitoring2'> |
|||
<Tabs :panels="panels" :default-active="activeName" /> |
|||
|
|||
<!-- 搜索栏 --> |
|||
<div class="filter"> |
|||
<div> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/insert.svg" /> |
|||
</template> |
|||
新增 |
|||
</ButtonGradient> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/export.svg" /> |
|||
</template> |
|||
导出 |
|||
</ButtonGradient> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/refresh.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
|
|||
</div> |
|||
<InputSearch style="width: 402px;" /> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="body"> |
|||
<RoadStateCard v-for="(item, index) in data" :cardData="item" :key="index" |
|||
:lastBtnColor="item.state === 5 ? '#007FF4' : void 0" :lastBtnText="item.state === 5 ? '去确认' : void 0" /> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="footer"> |
|||
<Pagination :total="90" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Tabs from '@screen/components/Tabs/index.vue'; |
|||
import RoadStateCard from '@screen/components/RoadStateCard/index.vue'; |
|||
import Pagination from '@screen/components/Pagination.vue'; |
|||
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|||
|
|||
export default { |
|||
name: 'RoadNetworkMonitoring2', |
|||
components: { |
|||
ButtonGradient, |
|||
Tabs, |
|||
Pagination, |
|||
RoadStateCard, |
|||
InputSearch |
|||
}, |
|||
data() { |
|||
return { |
|||
data: Array.from({ length: 15 }).map(() => ({ |
|||
time: "2023.12.22 13:00:00", |
|||
source: "视频智能识别", |
|||
location: "k100+000", |
|||
direction: "济南方向", |
|||
state: (() => { |
|||
const min = 1; |
|||
const max = 5; |
|||
return Math.floor(Math.random() * (max - min + 1)) + min; |
|||
})() |
|||
})), |
|||
|
|||
activeName: "告警事件(20)", |
|||
panels: [ |
|||
{ |
|||
label: "告警事件(20)", |
|||
key: "告警事件(20)" |
|||
}, |
|||
{ |
|||
label: "待确认事件(125)", |
|||
key: "待确认事件(125)" |
|||
}, |
|||
{ |
|||
label: "处置中事件(230)", |
|||
key: "处置中事件(230)" |
|||
}, |
|||
{ |
|||
label: "已处置事件(76)", |
|||
key: "已处置事件(76)" |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.RoadNetworkMonitoring2 { |
|||
padding: 21px; |
|||
|
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 6; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.filter { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
grid-gap: 24px; |
|||
// grid-row-gap: 9px; |
|||
// grid-column-gap: 9px; |
|||
grid-auto-rows: min-content; |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 15px; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue