From d67a81314f3e208a0b1da978c1e4177e6426a388 Mon Sep 17 00:00:00 2001
From: zhanghonglin <zhanghonglin@hnkhzn.com>
Date: 星期五, 09 一月 2026 16:51:44 +0800
Subject: [PATCH] 优化大屏电视
---
项目代码/大屏/src/views/index.vue | 569 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 374 insertions(+), 195 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\244\247\345\261\217/src/views/index.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\244\247\345\261\217/src/views/index.vue"
index c133bc1..7c7ba41 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\244\247\345\261\217/src/views/index.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\244\247\345\261\217/src/views/index.vue"
@@ -36,88 +36,100 @@
<!--浣嶇疆-->
<div id="zhu">
- <div id="taskzhu">
- <div id="biao">浠诲姟</div>
- <div class="taskk">
- <div class="taskxu">搴忓彿</div>
- <div class="tasknum">浠诲姟鍙�</div>
- <div class="taskstaus">浠诲姟绫诲瀷</div>
- <div class="tasktype">浠诲姟鐘舵��</div>
- <div class="taskgrade">鏃堕棿</div>
+ <div id="shang">
+ <div class="skuang" style="marginLeft: 0%;">
+ <div class="stu" id="kongwei"></div>
+ <div class="sti">绌轰綅</div>
+ <div class="sxian"></div>
</div>
- <div class="taskk">
- <div class="taskxu">1</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
+ <div class="skuang">
+ <div class="stu" id="kongtong"></div>
+ <div class="sti">绌烘《</div>
+ <div class="sxian"></div>
</div>
- <div class="taskk">
- <div class="taskxu">2</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
- </div>
- <div class="taskk">
- <div class="taskxu">3</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
- </div>
- <div class="taskk">
- <div class="taskxu">4</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
- </div>
- <div class="taskk">
- <div class="taskxu">5</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
- </div>
- <div class="taskk">
- <div class="taskxu">6</div>
- <div class="tasknum"></div>
- <div class="taskstaus"></div>
- <div class="tasktype"></div>
- <div class="taskgrade"></div>
+ <div class="skuang">
+ <div class="stu" id="mantong"></div>
+ <div class="sti">婊℃《</div>
+ <div class="sxian"></div>
</div>
</div>
- <div id="materielzhu">
- <div class="zhuk">
- <div class="biaot">搴撲綅淇℃伅</div>
- <div class="xian" style="marginTop: 8%;">
- <div class="name">绌轰綅锛�</div>
- <div class="shu"></div>
+ <div id="zhong">
+ <div class="zkuang" style="marginLeft: 0%;">
+ <div class="taskkuang">搴撳瓨鍒嗙被鍗犳瘮</div>
+ <div id="kuk">
+ <div id="kuyuan"></div>
</div>
- <div class="xian">
- <div class="name">绌烘《锛�</div>
- <div class="shu"></div>
- </div>
- <div class="xian">
- <div class="name">鏈夎揣锛�</div>
- <div class="shu"></div>
+ <div id="kut">
+ <div class="kutk">
+ <div class="kutkw">绌轰綅</div>
+ <div class="kutcolor"></div>
+ </div>
+ <div class="kutk">
+ <div class="kutkw">绌烘《</div>
+ <div class="kutcolor" style="background: #33FF57;"></div>
+ </div>
+ <div class="kutk">
+ <div class="kutkw">婊℃《</div>
+ <div class="kutcolor" style="background: #3399FF;"></div>
+ </div>
</div>
</div>
- <div class="zhuk">
- <div class="biaot" style="marginTop: 15%;">浠婃棩鎵ц浠诲姟娆℃暟</div>
- <div class="xian" style="marginTop: 11%;">
- <div class="name">鍏ュ簱锛�</div>
- <div class="shu"></div>
+ <div class="zkuang">
+ <div class="taskkuang">浠婃棩婊℃《浠诲姟缁熻</div>
+ <div id="tongk">
+ <div class="tongtiao" id="tongout"></div>
+ <div class="tongtiao" id="tongin" style="left: 70%;"></div>
+ <div class="tongtxian"></div>
+ <div class="tongtxian" style="top:50%"></div>
+ <p class="tongtwen">100%</p>
+ <p class="tongtwen" style="top: 46%;">50%</p>
+ <div id="tongxian"></div>
+ <div id="tongtk">
+ <div class="tongtw">鍑哄簱浠诲姟</div>
+ <div class="tongtw" style="margin-left: 20%;">鍏ュ簱浠诲姟</div>
+ </div>
</div>
- <div class="xian">
- <div class="name">鍑哄簱锛�</div>
- <div class="shu"></div>
- </div>
+ </div>
+ </div>
+ <div id="xia">
+ <div class="taskkuang">瀹炴椂浣滀笟浠诲姟</div>
+ <div class="taskkuang" style="background: rgba(255, 255, 255, 0.2);">
+ <div class="tnum">浠诲姟鍙�</div>
+ <div class="tstatus">浠诲姟鐘舵��</div>
+ <div class="ttype">浠诲姟绫诲瀷</div>
+ <div class="tpriority">浼樺厛绾�</div>
+ <div class="ttime">鏃堕棿</div>
+ </div>
+ <div class="taskkuang">
+ <div class="tnum"></div>
+ <div class="tstatus"></div>
+ <div class="ttype"></div>
+ <div class="tpriority"></div>
+ <div class="ttime"></div>
+ </div>
+ <div class="taskkuang">
+ <div class="tnum"></div>
+ <div class="tstatus"></div>
+ <div class="ttype"></div>
+ <div class="tpriority"></div>
+ <div class="ttime"></div>
+ </div>
+ <div class="taskkuang">
+ <div class="tnum"></div>
+ <div class="tstatus"></div>
+ <div class="ttype"></div>
+ <div class="tpriority"></div>
+ <div class="ttime"></div>
+ </div>
+ <div class="taskkuang">
+ <div class="tnum"></div>
+ <div class="tstatus"></div>
+ <div class="ttype"></div>
+ <div class="tpriority"></div>
+ <div class="ttime"></div>
</div>
</div>
</div>
- <div id="zhu" style="opacity: 0.1;background: white;position: absolute;"></div>
</div>
</div>
</div>
@@ -169,36 +181,41 @@
rows: 6
})
.then(x => {
- if (x.status == 200) {
- let tasknum = document.getElementsByClassName("tasknum");
- let taskstaus = document.getElementsByClassName("taskstaus");
- let tasktype = document.getElementsByClassName("tasktype");
- let taskgrade = document.getElementsByClassName("taskgrade");
+ if (x.status == 200 && x.data.length != 0) {
+ //console.log(x);
+
+ let tasknum = document.getElementsByClassName("tnum");
+ let taskstaus = document.getElementsByClassName("tstatus");
+ let tasktype = document.getElementsByClassName("ttype");
+ let taskgrade = document.getElementsByClassName("ttime");
+ let taskpriority = document.getElementsByClassName("tpriority");
tasknum[1].innerHTML = x.data[0].taskNum;
taskstaus[1].innerHTML = this.taskstaus(x.data[0].taskState);
tasktype[1].innerHTML = this.taskType(x.data[0].taskType);
+ taskpriority[1].innerHTML = x.data[0].grade;
taskgrade[1].innerHTML = x.data[0].createDate;
- tasknum[2].innerHTML = x.data[1].taskNum;
- taskstaus[2].innerHTML = this.taskstaus(x.data[1].taskState);
- tasktype[2].innerHTML = this.taskType(x.data[1].taskType);
- taskgrade[2].innerHTML = x.data[1].createDate;
- tasknum[3].innerHTML = x.data[2].taskNum;
- taskstaus[3].innerHTML = this.taskstaus(x.data[2].taskState);
- tasktype[3].innerHTML = this.taskType(x.data[2].taskType);
- taskgrade[3].innerHTML = x.data[2].createDate;
- tasknum[4].innerHTML = x.data[3].taskNum;
- taskstaus[4].innerHTML = this.taskstaus(x.data[3].taskState);
- tasktype[4].innerHTML = this.taskType(x.data[3].taskType);
- taskgrade[4].innerHTML = x.data[3].createDate;
- tasknum[5].innerHTML = x.data[4].taskNum;
- taskstaus[5].innerHTML = this.taskstaus(x.data[4].taskState);
- tasktype[5].innerHTML = this.taskType(x.data[4].taskType);
- taskgrade[5].innerHTML = x.data[4].createDate;
- tasknum[6].innerHTML = x.data[5].taskNum;
- taskstaus[6].innerHTML = this.taskstaus(x.data[5].taskState);
- tasktype[6].innerHTML = this.taskType(x.data[5].taskType);
- taskgrade[6].innerHTML = x.data[5].createDate;
+ if (x.data.length >= 2) {
+ tasknum[2].innerHTML = x.data[1].taskNum;
+ taskstaus[2].innerHTML = this.taskstaus(x.data[1].taskState);
+ tasktype[2].innerHTML = this.taskType(x.data[1].taskType);
+ taskpriority[2].innerHTML = x.data[1].grade;
+ taskgrade[2].innerHTML = x.data[1].createDate;
+ }
+ if (x.data.length >= 3) {
+ tasknum[3].innerHTML = x.data[2].taskNum;
+ taskstaus[3].innerHTML = this.taskstaus(x.data[2].taskState);
+ tasktype[3].innerHTML = this.taskType(x.data[2].taskType);
+ taskpriority[3].innerHTML = x.data[2].grade;
+ taskgrade[3].innerHTML = x.data[2].createDate;
+ }
+ if (x.data.length >= 4) {
+ tasknum[4].innerHTML = x.data[3].taskNum;
+ taskstaus[4].innerHTML = this.taskstaus(x.data[3].taskState);
+ tasktype[4].innerHTML = this.taskType(x.data[3].taskType);
+ taskpriority[4].innerHTML = x.data[3].grade;
+ taskgrade[4].innerHTML = x.data[3].createDate;
+ }
}
});
this.$http
@@ -207,22 +224,41 @@
})
.then(x => {
if (x.status == 200) {
- let shu=document.getElementsByClassName("shu");
- shu[0].innerHTML=x.data.vacancy;
- shu[1].innerHTML=x.data.empty;
- shu[2].innerHTML=x.data.available;
+ //澶撮儴鏁伴噺鏄剧ず
+ let shu = document.getElementsByClassName("sxian");
+ shu[0].innerHTML = x.data.vacancy;
+ shu[1].innerHTML = x.data.empty;
+ shu[2].innerHTML = x.data.available;
+
+ //涓儴鐧惧垎姣�
+ //璁＄畻鍗犳瘮
+ let zong = 506;
+ let wei = ((x.data.vacancy / zong) * 100).toFixed(2) + "%";
+ let kong =
+ (((x.data.empty + x.data.available) / zong) * 100).toFixed(2) +
+ "%";
+ //鏄剧ず
+ let yuan = document.getElementById("kuyuan");
+ yuan.style.background = `conic-gradient(#ff5733 0% ${wei}, #33ff57 ${wei} ${kong}, #3399ff ${kong} 100%)`;
}
});
- this.$http
+ this.$http
.post("api/TaskHty/selectTaskNum/", {
rows: 6
})
.then(x => {
- console.log(x);
if (x.status == 200) {
- let shu=document.getElementsByClassName("shu");
- shu[3].innerHTML=x.data.outNum;
- shu[4].innerHTML=x.data.inNum;
+ let tongout = document.getElementById("tongout");
+ let tongin = document.getElementById("tongin");
+
+ //璁＄畻鍗犳瘮
+ let zong = x.data.inNum + x.data.outNum;
+ let out = ((x.data.outNum / zong) * 100).toFixed(2) + "%";
+ let ins = ((x.data.inNum / zong) * 100).toFixed(2) + "%";
+ //鍚戜笂鎷変几
+ //tongout.style.transform = `translateY(-100%)`;
+ tongout.style.height = out;
+ tongin.style.height = ins;
}
});
}, 10000);
@@ -266,102 +302,245 @@
<style lang="scss">
@import "../assets/scss/index.scss";
+.kutcolor {
+ width: 30%;
+ height: 60%;
+ float: left;
+ background: #ff5733;
+ margin-top: -6%;
+}
+.kutkw {
+ width: 50%;
+ height: 80%;
+ float: left;
+ font-weight: 600;
+ font-size: 20px;
+}
+.kutk {
+ width: 80%;
+ height: 25%;
+ float: left;
+ margin-top: 10%;
+}
+#kuyuan {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: conic-gradient(#ff5733 0% 20%, #33ff57 20% 60%, #3399ff 60% 100%);
+ clip-path: circle(50% at 50% 50%);
+}
+#kuyuan::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 70%;
+ height: 70%;
+ border-radius: 50%;
+ background: rgb(255, 255, 255);
+ transform: translate(-50%, -50%);
+}
+#kut {
+ width: 20%;
+ height: 80%;
+ float: left;
+}
+#kuk {
+ width: 32%;
+ height: 80%;
+ margin: 0% 10% 0% 30%;
+ float: left;
+ position: relative;
+}
+.tongtwen {
+ width: 100%;
+ height: 10%;
+ position: absolute;
+ left: -14%;
+ top: -4%;
+}
+.tongtxian {
+ width: 100%;
+ height: 1px;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.1);
+}
+.tongtw {
+ width: 30%;
+ height: 100%;
+ float: left;
+ margin-left: 10%;
+ text-align: center;
+ font-size: 20px;
+}
+#tongtk {
+ width: 100%;
+ height: 20%;
+ float: left;
+ position: absolute;
+ top: 110%;
+}
+#tongxian {
+ width: 100%;
+ height: 2px;
+ float: left;
+ background: white;
+ position: absolute;
+ top: 100%;
+}
+.tongtiao {
+ width: 10%;
+ height: 1px;
+ float: left;
+ background: rgba(0, 0, 255, 0.7);
+ position: absolute;
+ top: 99%;
+ left: 20%;
+ transform: translateY(-100%);
+}
+#tongk {
+ width: 40%;
+ float: left;
+ height: 60%;
+ margin: 1% 30%;
+ position: relative;
+}
+.tpriority {
+ width: 15%;
+ height: 100%;
+ float: left;
+ margin: 0% 1%;
+ color: white;
+ text-align: center;
+}
+.tstatus {
+ width: 20%;
+ height: 100%;
+ float: left;
+ margin: 0% 1%;
+ color: white;
+ text-align: center;
+}
+.ttype {
+ width: 15%;
+ height: 100%;
+ float: left;
+ margin: 0% 0%;
+ color: white;
+ text-align: center;
+}
+.ttime {
+ width: 30%;
+ height: 100%;
+ float: left;
+ margin: 0% 0%;
+ color: white;
+ text-align: center;
+}
+.tnum {
+ width: 15%;
+ height: 100%;
+ float: left;
+ margin: 0% 0%;
+ color: white;
+ text-align: center;
+}
+.taskkuang {
+ width: 90%;
+ height: 15%;
+ float: left;
+ margin: 0.1% 5%;
+ border-radius: 5px;
+ font-size: 20px;
+ color: rgba(0, 0, 255, 0.7);
+ font-weight: 600;
+ line-height: 240%;
+}
+#kongwei {
+ background-image: url("../imgs/kongwei.webp");
+ background-size: 85%;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ opacity: 0.8;
+}
+#mantong {
+ background-image: url("../imgs/mantong.webp");
+ background-size: 70%;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ opacity: 0.8;
+}
+#kongtong {
+ background-image: url("../imgs/kongtong.jpg");
+ background-size: 70%;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ opacity: 0.8;
+}
+.sxian {
+ width: 40%;
+ height: 20%;
+ float: left;
+ font-size: 70px;
+ font-weight: 600;
+ margin-top: 8%;
+}
+.sti {
+ width: 40%;
+ height: 20%;
+ float: left;
+ font-size: 30px;
+ margin-top: 5%;
+}
+.stu {
+ width: 25%;
+ height: 80%;
+ float: left;
+ background: white;
+ margin: 3% 3.5%;
+ border-radius: 10px;
+ overflow: hidden;
+}
+.zkuang {
+ width: 49%;
+ height: 100%;
+ float: left;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ margin-left: 2%;
+}
+.skuang {
+ width: 32%;
+ height: 100%;
+ float: left;
+ background: rgba(255, 255, 255, 0.1);
+ margin-left: 2%;
+ border-radius: 10px;
+}
#zhu {
width: 100%;
height: 150vh;
float: left;
margin-top: 1%;
position: relative;
+}
+#shang {
+ width: 100%;
+ height: 20%;
+ float: left;
+}
+#zhong {
+ width: 100%;
+ height: 40%;
+ float: left;
+ margin-top: 1%;
+}
+#xia {
+ width: 100%;
+ height: 35%;
+ float: left;
+ background: rgba(255, 255, 255, 0.1);
+ margin-top: 1%;
border-radius: 10px;
-}
-.name{
- width: 40%;
- height: 100%;
- float: left;
- color: white;
- font-size: 35px;
- text-align: right;
-}
-.shu {
- width: 40%;
- height: 100%;
- float: left;
- color: white;
- font-size: 35px;
- text-align: center;
-}
-.xian {
- width: 90%;
- height: 20%;
- float: left;
- margin: 2.5% 5%;
-}
-.biaot {
- width: 100%;
- height: 20%;
- float: left;
- text-align: center;
- line-height: 300%;
- color: white;
- font-size: 50px;
- font-weight: 600;
- margin-top: 3%;
-}
-.taskgrade {
- width: 35%;
- height: 100%;
- float: left;
- text-align: center;
- font-size: 30px;
- line-height: 400%;
- color: white;
-}
-.taskxu,
-.tasknum,
-.taskstaus,
-.tasktype {
- width: 15%;
- height: 100%;
- float: left;
- text-align: center;
- font-size: 30px;
- line-height: 400%;
- color: white;
-}
-.taskk {
- width: 95%;
- height: 6.5%;
- float: left;
- //background: white;
- margin: 2% 2.5%;
- border-radius: 5px;
-}
-#biao {
- width: 100%;
- height: 7%;
- float: left;
- font-size: 50px;
- text-align: center;
- line-height: 300%;
- font-weight: 600;
- margin-top: 5%;
-}
-#taskzhu {
- width: 48%;
- float: left;
- height: 100%;
-}
-#materielzhu {
- width: 48%;
- float: left;
- height: 100%;
- margin-left: 4%;
-}
-.zhuk {
- width: 100%;
- float: left;
- height: 30%;
- margin-top: 2%;
- border-radius: 5px;
}
</style>
--
Gitblit v1.9.3