zhoule
1 year ago
13 changed files with 711 additions and 71 deletions
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<div class="Carousel"> |
||||
|
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
||||
|
|
||||
|
<VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
||||
|
<div v-for="(item, index) in carouselItems" :key="index" class="item"> |
||||
|
<img :src="require(`@screen/images/${item.imageURL}`)" style="height: 100%"> |
||||
|
</div> |
||||
|
</VueSlickCarousel> |
||||
|
|
||||
|
<img src="./images/arrow.svg" @click="nextSlide" class="arrow" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import VueSlickCarousel from 'vue-slick-carousel' |
||||
|
import 'vue-slick-carousel/dist/vue-slick-carousel.css' |
||||
|
// optional style for arrows & dots |
||||
|
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css' |
||||
|
|
||||
|
export default { |
||||
|
name: "Carousel", |
||||
|
components: { VueSlickCarousel }, |
||||
|
data() { |
||||
|
return { |
||||
|
carouselItems: [ |
||||
|
{ |
||||
|
"imageURL": "shareWith/message-active.svg" |
||||
|
}, |
||||
|
{ |
||||
|
"imageURL": "shareWith/message.svg" |
||||
|
}, |
||||
|
{ |
||||
|
"imageURL": "shareWith/website-active.svg" |
||||
|
}, |
||||
|
{ |
||||
|
"imageURL": "shareWith/website.svg" |
||||
|
}, |
||||
|
{ |
||||
|
"imageURL": "shareWith/weChat-active.svg" |
||||
|
}, |
||||
|
{ |
||||
|
"imageURL": "shareWith/weChat-active.svg" |
||||
|
} |
||||
|
], |
||||
|
settings: { |
||||
|
infinite: true, |
||||
|
arrows: false, |
||||
|
speed: 600, |
||||
|
slidesToShow: 3, |
||||
|
slidesToScroll: 1, |
||||
|
autoplay: true, |
||||
|
autoplaySpeed: 1800, |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
prevSlide() { |
||||
|
this.$refs.CarouselRef.prev() |
||||
|
}, |
||||
|
nextSlide() { |
||||
|
this.$refs.CarouselRef.next() |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.Carousel { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
|
||||
|
.vueSlickCarousel { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
::v-deep { |
||||
|
.slick-list { |
||||
|
height: 100%; |
||||
|
|
||||
|
div { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
img { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
cursor: pointer; |
||||
|
width: 15px; |
||||
|
|
||||
|
&:first-child { |
||||
|
transform: rotate(-180deg) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,131 @@ |
|||||
|
export const formList = [ |
||||
|
{ |
||||
|
label: "事件源:", |
||||
|
key: "stringEventSource", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "桩号:", |
||||
|
key: "stakeMark", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "行驶方向:", |
||||
|
key: "direction", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件类型:", |
||||
|
key: "stringEventType", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件原因:", |
||||
|
key: "eventCause", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件状态:", |
||||
|
key: "stringEventState", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "操作员:", |
||||
|
key: "nickName", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "发生时间:", |
||||
|
key: "startTime", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "完结时间:", |
||||
|
key: "endTime", |
||||
|
type: "input", |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件描述:", |
||||
|
key: "direction", |
||||
|
type: "input", |
||||
|
gridColumn: 3, |
||||
|
options: { |
||||
|
disabled: true, |
||||
|
placeholder: '' |
||||
|
} |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export const timeLine1List = [ |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "接警记录", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "指令下达", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "清障到达", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "安全防护", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "开始清障", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "清障结束", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "恢复畅通", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
]; |
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="调度记录"> |
||||
|
<div class="EventDetail"> |
||||
|
<BlackBar class="left"> |
||||
|
<!-- <img src="./images/test.png" style="width: 100%;" /> --> |
||||
|
<div class="example"> |
||||
|
<div class="title"> |
||||
|
<h3>调度记录</h3> |
||||
|
<span> |
||||
|
{{ startTime }} 至 {{ endTime }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<p v-for="(item, index) in data" :key="index">{{ `${beautifyOperationTime(item.operationTime)}， |
||||
|
${item.context}，${item.operator}` }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div style="width: 900px;height: 900px; background-color: #0F191E;"></div> --> |
||||
|
</BlackBar> |
||||
|
<div class="right"> |
||||
|
<img src="./images/image.svg"> |
||||
|
<img src="./images/printer.svg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index"; |
||||
|
import BlackBar from "@screen/components/Scrollbar/BlackBar.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
import moment from 'moment/moment'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'EventDetail', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
BlackBar |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: 'update:value' |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
eventId: String |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
data: [], |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
if (this.visible) this.initData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('update:value', val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
request({ |
||||
|
url: `/system/process/eventProcessById/${this.eventId}`, |
||||
|
method: "get", |
||||
|
params: this.searchData, |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
this.data = result.rows; |
||||
|
let length = result.rows.length; |
||||
|
if (length > 0 && result.rows[0].operationTime) { |
||||
|
this.startTime = moment(result.rows[0].operationTime).format("YYYY年MM月DD日 HH时mm分ss秒") || ''; |
||||
|
} |
||||
|
if (length > 1 && result.rows[length - 1].operationTime) { |
||||
|
this.endTime = moment(result.rows[length - 1].operationTime).format("YYYY年MM月DD日 HH时mm分ss秒") || ''; |
||||
|
} |
||||
|
// this.total = result.total; |
||||
|
}); |
||||
|
}, |
||||
|
beautifyOperationTime(time) { |
||||
|
return moment(time).format('YYYY-MM-DD HH:mm:ss') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.EventDetail { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
|
||||
|
.left { |
||||
|
flex: 1; |
||||
|
width: 600px; |
||||
|
height: 720px; |
||||
|
|
||||
|
.example { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
|
||||
|
>div { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
>.body { |
||||
|
gap: 6px; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
>.title { |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid white; |
||||
|
padding-bottom: 6px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import { merge, cloneDeep } from "lodash"; |
||||
|
|
||||
|
export const searchFormList = [{ |
||||
|
label: "事件状态:", |
||||
|
key: "eventState", |
||||
|
type: "RadioGroup", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "0", |
||||
|
label: "未解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "已解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "已关闭", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.eventSources, |
||||
|
PresetFormItems.eventType, |
||||
|
{ |
||||
|
label: "方向:", |
||||
|
key: "direction", |
||||
|
type: "RadioGroup", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "济南方向", |
||||
|
label: "济南方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "菏泽方向", |
||||
|
label: "菏泽方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "双向", |
||||
|
label: "双向", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "时间范围:", |
||||
|
key: "daterange", |
||||
|
required: false, |
||||
|
type: "datePicker", |
||||
|
options: { |
||||
|
type: "daterange", |
||||
|
format: 'yyyy-MM-dd HH:mm:ss', |
||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss' |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
...PresetFormItems.station, |
||||
|
label: "开始桩号:", |
||||
|
required: false, |
||||
|
}, |
||||
|
merge(cloneDeep(PresetFormItems.station), { |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "endStakeMark[0]", |
||||
|
}, |
||||
|
{ |
||||
|
key: "endStakeMark[1]", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
label: "结束桩号:", |
||||
|
required: false, |
||||
|
} |
||||
|
) |
||||
|
]; |
||||
Loading…
Reference in new issue