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