hui
1 year ago
38 changed files with 1589 additions and 244 deletions
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<div class='BackgroundClip' :style="{ '--clip-path': clipPath, '--border-color': borderColor, '--bg-color': bgColor }"> |
|||
<slot /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'BackgroundClip', |
|||
props: { |
|||
clipPath: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
borderColor: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
bgColor: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.BackgroundClip { |
|||
clip-path: var(--clip-path); |
|||
position: relative; |
|||
background: var(--border-color); |
|||
color: #fff; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
clip-path: var(--clip-path); |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: calc(100% - 3px); |
|||
height: calc(100% - 3px); |
|||
background: var(--bg-color); |
|||
pointer-events: none; |
|||
z-index: -1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<BackgroundClip class='BG-01' :clipPath="getClipPath" bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)" |
|||
borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))"> |
|||
<slot /> |
|||
</BackgroundClip> |
|||
</template> |
|||
|
|||
<script> |
|||
import BackgroundClip from "./BackgroundClip.vue" |
|||
|
|||
export default { |
|||
name: 'BG-01', |
|||
components: { |
|||
BackgroundClip |
|||
}, |
|||
props: { |
|||
width: { |
|||
type: String, |
|||
default: "18px" |
|||
} |
|||
}, |
|||
computed: { |
|||
getClipPath() { |
|||
return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.BG-01 {} |
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div class='BG-02' :style="{ '--width': width, '--lang-width': langWidth }"> |
|||
<BackgroundClip ref="BackgroundClipRef" class="bg" :clipPath="getClipPath" |
|||
bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)" |
|||
borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))"> |
|||
<slot /> |
|||
</BackgroundClip> |
|||
<div class="decoration"> |
|||
<span v-for="i in whileLength" :key="i" :style="getSize(whileLength - i + 1)" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BackgroundClip from "./BackgroundClip.vue" |
|||
|
|||
export default { |
|||
name: 'BG-02', |
|||
components: { |
|||
BackgroundClip |
|||
}, |
|||
props: { |
|||
width: { |
|||
type: String, |
|||
default: "15px" |
|||
}, |
|||
langWidth: { |
|||
type: String, |
|||
default: "150px" |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
whileLength: 3 |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
getClipPath() { |
|||
return `polygon(calc(100% - ${this.langWidth} - ${this.width} * 2) 0, calc(100% - ${this.langWidth}) calc(${this.width} * 1.5), calc(100% - ${this.width} * 1.4) calc(${this.width} * 1.5), 100% calc(${this.width} * 3), 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0 calc(100% - ${this.width}), 0 ${this.width}, ${this.width} 0)` |
|||
} |
|||
}, |
|||
methods: { |
|||
getSize: (function () { |
|||
let top = 0; |
|||
|
|||
return function (i) { |
|||
const base = 7.2; |
|||
const size = i * base; |
|||
if (i !== this.whileLength) { |
|||
top += Math.ceil(((i + 1) * base - size) / 2) + 1 |
|||
} |
|||
|
|||
try { |
|||
return { width: `${size}px`, height: `${size}px`, marginTop: `${top}px`, backgroundColor: `rgba(50, 179, 187, ${i / this.whileLength})` } |
|||
} catch (error) { } |
|||
finally { |
|||
if (i === 1) top = 0; |
|||
} |
|||
} |
|||
})() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.BG-02 { |
|||
position: relative; |
|||
|
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.decoration { |
|||
position: absolute; |
|||
right: 0; |
|||
top: calc(var(--width) / 5); |
|||
width: calc(var(--lang-width) + 8.1px); |
|||
height: calc(var(--width) * 1.5); |
|||
display: flex; |
|||
// gap: 0px; |
|||
// pointer-events: none; |
|||
// align-items: center; |
|||
|
|||
>span { |
|||
display: block; |
|||
clip-path: polygon(0 25%, 45% 25%, 100% 75%, 55% 75%); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -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> |
|||
|
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 |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -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> |
|||
|
|||
@ -1,144 +1,105 @@ |
|||
|
|||
import * as echarts from "echarts"; |
|||
let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; |
|||
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; |
|||
|
|||
var options = { |
|||
title: { |
|||
x: "center", |
|||
top: 10, |
|||
}, |
|||
tooltip: { |
|||
formatter: "{a} <br/>{b} : {c}%", |
|||
show:false, |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b}: {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
right: 10, |
|||
itemStyle:{ |
|||
color:"#fff", |
|||
}, |
|||
data: ['客1', '18-22℃', '18℃以下', '数据异常', |
|||
'阀开', '强开', '阀关', '强关', '损坏'] |
|||
}, |
|||
series: [ |
|||
|
|||
|
|||
// 内圆
|
|||
{ |
|||
type: "pie", |
|||
radius: ["0", "40%"], |
|||
center: ["50%", "50%"], |
|||
hoverAnimation: false, |
|||
z: 3, |
|||
data: [ |
|||
{ |
|||
value: [20], |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#205b78", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#205b7800", |
|||
}, |
|||
]), |
|||
opacity: 1, |
|||
}, |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
labelLine: { |
|||
show: false, |
|||
name: '温度区间', |
|||
type: 'pie', |
|||
selectedMode: 'single', |
|||
radius: [0, '50%'], |
|||
label: { |
|||
normal: { |
|||
position: 'inner', |
|||
show: true, |
|||
color:'#fff', |
|||
fontSize:14, |
|||
formatter: '{b}\n{c}辆', |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["0", "2%"], |
|||
center: ["50%", "50%"], |
|||
hoverAnimation: false, |
|||
z: 7, |
|||
data: [ |
|||
{ |
|||
value: [20], |
|||
itemStyle: { |
|||
color:'#fff' |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{value: 2290, name: '客车\n'}, |
|||
{value: 1020, name: '货车\n'}, |
|||
{value: 3000, name: '专项车\n'}, |
|||
], |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
color:['#708FFF','#FB9434','#219F73'] |
|||
}, |
|||
|
|||
|
|||
{ |
|||
name: "wrap", |
|||
type: "gauge", |
|||
min: 0, |
|||
max: 100, |
|||
z:5, |
|||
splitNumber: 5, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 10, |
|||
shadowBlur: 0, |
|||
color: [ |
|||
[0.6, "#FF5A62"], |
|||
[0.8, "#23E7B2"], |
|||
[1, "#0294FF"], |
|||
], |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
distance: -40, |
|||
textStyle: { |
|||
color: "#d0d0d0", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: true, |
|||
splitNumber: 1, |
|||
length: 3, |
|||
distance: 4, |
|||
lineStyle: { |
|||
color: "#d0d0d0", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['60%', '70%'], |
|||
label: { |
|||
position: 'inner', |
|||
show: false |
|||
}, |
|||
|
|||
data: [ |
|||
{value: 13456, name: '客1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客3'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专3'}, |
|||
{value: 2000, name: ''}, |
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#24D8E7", //指针颜色
|
|||
borderRadius: "5", |
|||
borderWidth:0, |
|||
borderType:"solid", |
|||
borderCap:"round", |
|||
borderJoin:"round", |
|||
borderColor:"#064258", |
|||
borderMiterLimit:"20", |
|||
color: function(params) { |
|||
return { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, |
|||
color: color[params.dataIndex] // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorend[params.dataIndex] // 100% 处的颜色
|
|||
} |
|||
], |
|||
globalCoord: false // 缺省为 false
|
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
pointer: { |
|||
width: 4, |
|||
length: "80%", |
|||
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] |
|||
} |
|||
] |
|||
} |
|||
|
|||
},data: [{ |
|||
value: 63, |
|||
}], |
|||
detail: { |
|||
formatter: function (params) { |
|||
return ( |
|||
"{number|" + |
|||
params + |
|||
"}{unit|" + |
|||
"辆}"); |
|||
}, |
|||
rich:{ |
|||
number:{ |
|||
fontSize: 20, |
|||
padding: 5, |
|||
},unit:{ |
|||
fontSize: 12, |
|||
} |
|||
}, |
|||
color: "#1de8af", |
|||
offsetCenter: ["0%", "100%"], |
|||
} |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue