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

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

@ -1,51 +1,134 @@
<template> <template>
<div id="centerRight1"> <div id="centerRight1">
<div class="bg-color-black"> <div class="bg-color-black">
<div class="d-flex pt-2 pl-2"> <div
<span> style="width: 100%; height: 100%"
<icon name="chart-line" class="text-icon"></icon> class="d-flex pt-2 pl-2 jc-between ai-center"
</span> >
<div class="d-flex"> <div class="board-item">
<span class="fs-xl text mx-2">任务完成排行榜</span> <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>
<div class="d-flex jc-center body-box">
<dv-scroll-board class="dv-scr-board" :config="config" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
data() { data() {
return { return {
width: 300,
height: 100,
config: { config: {
header: ['组件', '分支', '覆盖率'],
data: [ 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, headerHeight: 35,
headerBGC: '#0f1325', //表头 oddRowBGC: "#0000", //奇数行
oddRowBGC: '#0f1325', //奇数行 evenRowBGC: "#0000", //偶数行
evenRowBGC: '#171c33', //偶数行 index: false,
index: true, rowNum: 3,
columnWidth: [50], align: ["center"],
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -64,13 +147,88 @@ $box-width: 100%;
.text { .text {
color: #c3cbde; color: #c3cbde;
} }
.body-box { .board-item {
border-radius: 10px; width: 31%;
overflow: hidden; height: 100%;
.dv-scr-board {
width: 270px; &__title {
height: 340px; 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> </style>

Write Preview
Loading…
Cancel
Save