xiaoy
/
water-dispatch-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-11-20 xy

Browse Source
master
xy 2 years ago
parent 2969081774
commit 3965a85613
2 changed files with 209 additions and 51 deletions
Show Stats Download Patch File Download Diff File

32
src/views/bigScreen/component/centerLeft1.vue
Unescape View File

@ -14,22 +14,22 @@
<CenterLeft1Chart />
</div>
<!-- 4个主要的数据 -->
<div class="bottom-data">
<div
class="item-box mt-2"
v-for="(item, index) in numberData"
:key="index"
>
<div class="d-flex">
<span class="coin">￥</span>
<dv-digital-flop class="dv-digital-flop" :config="item.number" />
</div>
<p class="text" style="text-align: center;">
{{ item.text }}
<span class="colorYellow">(件)</span>
</p>
</div>
</div>
<!-- <div class="bottom-data">-->
<!-- <div-->
<!-- class="item-box mt-2"-->
<!-- v-for="(item, index) in numberData"-->
<!-- :key="index"-->
<!-- >-->
<!-- <div class="d-flex">-->
<!-- <span class="coin">￥</span>-->
<!-- <dv-digital-flop class="dv-digital-flop" :config="item.number" />-->
<!-- </div>-->
<!-- <p class="text" style="text-align: center;">-->
<!-- {{ item.text }}-->
<!-- <span class="colorYellow">(件)</span>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</template>

228
src/views/bigScreen/component/centerRight1.vue
Unescape View File

@ -1,51 +1,134 @@
<template>
<div id="centerRight1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-line" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">任务完成排行榜</span>
<div
style="width: 100%; height: 100%"
class="d-flex pt-2 pl-2 jc-between ai-center"
>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
<dv-scroll-board ref="dvBoard1" class="dv-scr-board" :config="config" @click="submit"/>
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">即将执行</dv-border-box-10>
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
</div>
</div>
</template>
<script>
const dvBorderBoxTemplate = (slot) => {
return ` <div class="dv-border-box-13">
<svg class="dv-border-svg-container" width="${385}" height="${210}">
<path
fill="transparent"
stroke="#6586ec"
d="M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${385 - 20} 10 L ${385 - 5} 25
L ${385 - 5} ${210 - 5} L 20 ${210 - 5}
L 5 ${210 - 20} L 5 20"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
stroke="#6586ec"
d="M 16 9 L 61 9"
/>
<path
fill="transparent"
stroke="#2cf7fe"
d="M 5 20 L 5 10 L 12 3 L 60 3 L 68 10"
/>
<path
fill="transparent"
stroke="#2cf7fe"
d="M ${385 - 5} ${210 - 30} L ${385 - 5} ${210 - 5} L ${385 - 30} ${210 - 5}"
/>
</svg>
<div class="border-box-content">
${slot}
</div>
</div>`
}
import { index } from "@/api/system/baseForm";
export default {
data() {
return {
width: 300,
height: 100,
config: {
header: ['组件', '分支', '覆盖率'],
data: [
['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
],
rowNum: 7, //表格行数
waitTime: 3000,
headerHeight: 35,
headerBGC: '#0f1325', //表头
oddRowBGC: '#0f1325', //奇数行
evenRowBGC: '#171c33', //偶数行
index: true,
columnWidth: [50],
align: ['center']
}
oddRowBGC: "#0000", //奇数行
evenRowBGC: "#0000", //偶数行
index: false,
rowNum: 3,
align: ["center"],
},
transfers: [],
};
},
methods: {
async getTransfer() {
const res = (
await index({
table_name: "transfers",
page: 1,
page_size: 9999,
})
).data;
console.log(res);
res.forEach(i => {
if (true) {
this.config.data.push([dvBorderBoxTemplate(`
<div class="box-content">
<div class="box-content-top">
<div>待执行</div>
<div>${i.equipment_id_equipments_id_relation?.name || ''}</div>
</div>
<div class="box-content-bottom">
<div>
<div>执行时间：<span>${this.$moment().format('YYYY-MM-DD')} ${i.start_time.split(' ')[1]}</span></div>
<div>倒计时：<span></span></div>
</div>
<div>执行</div>
</div>
</div>
`)])
}
})
this.$refs['dvBoard1'].updateRows(this.config.data)
},
submit (row) {
console.log(row)
}
},
created() {
this.getTransfer();
},
mounted() {
}
}
};
</script>
<style lang="scss" scoped>
@ -64,13 +147,88 @@ $box-width: 100%;
.text {
color: #c3cbde;
}
.body-box {
border-radius: 10px;
overflow: hidden;
.dv-scr-board {
width: 270px;
height: 340px;
.board-item {
width: 31%;
height: 100%;
&__title {
width: 40%;
height: 44px;
text-align: center;
font-size: 17px;
line-height: 44px;
margin: auto;
margin-top: 20px;
}
}
.dv-scr-board {
height: calc(100% - 44px - 20px - 20px);
margin-top: 20px;
}
}
::v-deep .row-item .ceil {
width: 100%;
}
::v-deep .box-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 1;
padding: 30px 12px;
&-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px 0 10px;
& > div:nth-child(1) {
background: #eccb77;
border-radius: 30px;
color: #333;
padding: 6px 10px;
font-weight: 600;
}
& > div:nth-child(2) {
font-weight: 600;
font-size: 17px;
}
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 10px 0 10px;
span {
color: $primaryColor;
}
& > div:nth-child(1) {
text-align: left;
line-height: 2;
font-size: 16px;
font-weight: 600;
}
& > div:nth-child(2) {
cursor: pointer;
line-height: 2;
font-size: 15px;
font-weight: 600;
background: $primaryColor;
border-radius: 8px;
border: 2px solid rgb(119, 232, 250);
padding: 0 8px;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save