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> |
<template> |
||||
<div class='DutyOfficer'> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
name: 'DutyOfficer', |
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> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<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> |
</style> |
||||
|
|||||
@ -1,144 +1,105 @@ |
|||||
|
|
||||
import * as echarts from "echarts"; |
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 = { |
var options = { |
||||
title: { |
|
||||
x: "center", |
|
||||
top: 10, |
|
||||
}, |
|
||||
tooltip: { |
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: [ |
series: [ |
||||
|
|
||||
|
|
||||
// 内圆
|
|
||||
{ |
{ |
||||
type: "pie", |
name: '温度区间', |
||||
radius: ["0", "40%"], |
type: 'pie', |
||||
center: ["50%", "50%"], |
selectedMode: 'single', |
||||
hoverAnimation: false, |
radius: [0, '50%'], |
||||
z: 3, |
label: { |
||||
data: [ |
normal: { |
||||
{ |
position: 'inner', |
||||
value: [20], |
show: true, |
||||
itemStyle: { |
color:'#fff', |
||||
normal: { |
fontSize:14, |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
formatter: '{b}\n{c}辆', |
||||
{ |
} |
||||
offset: 0, |
|
||||
color: "#205b78", |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: "#205b7800", |
|
||||
}, |
|
||||
]), |
|
||||
opacity: 1, |
|
||||
}, |
|
||||
}, |
|
||||
label: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
labelLine: { |
|
||||
show: false, |
|
||||
}, |
}, |
||||
}, |
|
||||
{ |
|
||||
type: "pie", |
|
||||
radius: ["0", "2%"], |
|
||||
center: ["50%", "50%"], |
|
||||
hoverAnimation: false, |
|
||||
z: 7, |
|
||||
data: [ |
data: [ |
||||
{ |
{value: 2290, name: '客车\n'}, |
||||
value: [20], |
{value: 1020, name: '货车\n'}, |
||||
itemStyle: { |
{value: 3000, name: '专项车\n'}, |
||||
color:'#fff' |
|
||||
}, |
|
||||
label: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
], |
], |
||||
labelLine: { |
color:['#708FFF','#FB9434','#219F73'] |
||||
show: false, |
|
||||
}, |
|
||||
}, |
}, |
||||
|
|
||||
|
|
||||
{ |
{ |
||||
name: "wrap", |
name: '', |
||||
type: "gauge", |
type: 'pie', |
||||
min: 0, |
radius: ['60%', '70%'], |
||||
max: 100, |
label: { |
||||
z:5, |
position: 'inner', |
||||
splitNumber: 5, |
show: false |
||||
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, |
|
||||
}, |
}, |
||||
|
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: { |
itemStyle: { |
||||
normal: { |
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: { |
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] |
||||
width: 4, |
} |
||||
length: "80%", |
] |
||||
|
} |
||||
|
|
||||
},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; |
export default options; |
||||
|
|||||
Loading…
Reference in new issue