Skip to content

Z
zh-baseversion-project
Commit 9a2b75e9 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

left组件优化完成

parent d171861e
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 185 deletions
zh-baseversion-web/src/assets/styles/all.scss
View file @ 9a2b75e9
...@@ -96,6 +96,23 @@ ...@@ -96,6 +96,23 @@
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-table__body {
border-spacing: 0 5px;
font-size: 14px;
td:nth-child(4) .cell {
text-align: center;
}
}
.el-table__row {
width: 100%;
// display: block;
vertical-align: 5px;
height: 36px;
width: 350px;
}
.el-table__row:nth-child(2n + 1) { .el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6; background-color: #e6e6e6;
...@@ -195,8 +212,9 @@ ...@@ -195,8 +212,9 @@
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) { .el-table__row:nth-child(2n + 1) {
background-color: rgb(11 22 37); background-color: #062A45;
&:hover td { &:hover td {
background-color: #7bf8f430 !important; background-color: #7bf8f430 !important;
...@@ -205,13 +223,18 @@ ...@@ -205,13 +223,18 @@
td { td {
.cell { .cell {
// color: #525252; // color: #525252;
color: rgba(123, 248, 244, 1); // color: rgba(123, 248, 244, 1);
line-height: 14px;
color: #fff;
} }
} }
} }
.el-table__row:nth-child(2n) { .el-table__row:nth-child(2n) {
background-color: #213b52; // background-color: #213b52;
background-color: #062A45;
&:hover td { &:hover td {
background-color: #7bf8f430 !important; background-color: #7bf8f430 !important;
...@@ -219,6 +242,7 @@ ...@@ -219,6 +242,7 @@
td { td {
.cell { .cell {
line-height: 14px;
color: #fff; color: #fff;
} }
} }
...@@ -621,6 +645,7 @@ ...@@ -621,6 +645,7 @@
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) { .el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6; background-color: #e6e6e6;
......
zh-baseversion-web/src/components/bigWindow/leftBar.vue
View file @ 9a2b75e9
...@@ -36,16 +36,10 @@ ...@@ -36,16 +36,10 @@
<div class="div-p" @click="$router.push('/regulation/supervise')"> <div class="div-p" @click="$router.push('/regulation/supervise')">
从业人员数(人) 从业人员数(人)
</div> </div>
<span <div class="div-p-value">
style=" {{ allNum.peopleNum }}
font-family: 'arialbd'; </div>
font-size: 35px; <div></div>
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.peopleNum }}</span
>
</div> </div>
</div> </div>
<!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> --> <!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> -->
...@@ -62,15 +56,7 @@ ...@@ -62,15 +56,7 @@
<div class="div-p" @click="$router.push('/regulation/pipe')"> <div class="div-p" @click="$router.push('/regulation/pipe')">
管道长度(m) 管道长度(m)
</div> </div>
<span <div class="div-p-value">{{ allNum.allPipeLength }}</div>
style="
font-family: 'arialbd';
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.allPipeLength }}</span
>
</div> </div>
</div> </div>
</div> </div>
...@@ -89,26 +75,35 @@ ...@@ -89,26 +75,35 @@
<div class="rightline2"></div> <div class="rightline2"></div>
</div> </div>
<div class="pieone"> <div class="pieone">
<div <div class="pie-title">巡检任务数量(个)</div>
id="myChartpieone" <div class="chars-wrapper">
:style="{ width: '100%', height: '100%' }" <div id="myChartpieone"></div>
></div> <div class="titleTex">
<div class="titleTex"> <div class="titleTex-item">
<div :style="{ color: '#5470c6' }">● 已完成:{{ allNum.typeOne }}</div> <span>已完成巡检</span>
<div :style="{ color: '#fa8167' }">● 未完成:{{ allNum.typeTwo }}</div> <span class="b">{{ allNum.typeOne }}</span>
</div>
<div class="titleTex-item">
<span>未完成巡检</span>
<span class="b">{{ allNum.typeTwo }}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="pietwo"> <div class="pietwo">
<div <div class="pie-title">隐患整治数量(个)</div>
id="myChartpietwo" <div class="chars-wrapper">
:style="{ width: '100%', height: '100%' }" <div id="myChartpietwo"></div>
></div>
<div class="titleTex"> <div class="titleTex">
<div :style="{ color: '#5470c6' }"> <div class="titleTex-item">
● 已完成:{{ this.allNum.hiddenBookFinish }} <span>已完成整治</span>
</div> <span class="b">{{ allNum.hiddenBookFinish }}</span>
<div :style="{ color: '#fa8167' }"> </div>
● 未完成:{{ this.allNum.hiddenBookUnFinish }} <div class="titleTex-item">
<span>未完成整治</span>
<span class="b">{{ allNum.hiddenBookUnFinish }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -116,7 +111,7 @@ ...@@ -116,7 +111,7 @@
<!-- 任务完成率 --> <!-- 任务完成率 -->
<div class="leftbar3"> <div class="leftbar3">
<div class="item1"> <div class="item3">
<!-- <div class="fong-div"></div> <!-- <div class="fong-div"></div>
<div class="fong-div" style="margin-left: 3px;"></div> <div class="fong-div" style="margin-left: 3px;"></div>
<div class="fong-div" style="margin-left: 3px;"></div> --> <div class="fong-div" style="margin-left: 3px;"></div> -->
...@@ -283,164 +278,110 @@ export default { ...@@ -283,164 +278,110 @@ export default {
// 绘制图表 // 绘制图表
pieone.setOption({ pieone.setOption({
title: { title: {
text: text: "总量",
"巡检任务数(个) : " + (this.allNum.typeOne + this.allNum.typeTwo), subtext: this.allNum.typeOne + this.allNum.typeTwo || "0",
left: "center", left: "center",
top: 0, top: 25,
textStyle: { textStyle: {
color: "#cddbe4", color: "#cddbe4",
fontSize: "16", fontSize: "16",
}, },
}, subtextStyle: {
grid: { color: "#cddbe4",
bottom: "7%", fontSize: "16",
containLabel: true, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
}, },
series: [ series: [
{ {
name: "任务概况", color: ["#35A1FF", "#1EC9E3"],
name: "Access From",
type: "pie", type: "pie",
radius: "55%", radius: ["70%", "90%"],
center: ["50%", "58%"], avoidLabelOverlap: false,
data: [ itemStyle: {
{ borderRadius: 0,
value: this.allNum.typeTwo, borderColor: "#fff",
name: "未完成", borderWidth: 0,
itemStyle: { color: "#fa8167" },
},
{
value: this.allNum.typeOne,
name: "已完成",
itemStyle: { color: "#5470c6" },
},
],
labelLine: {
length: 20,
length2: 50,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: false,
position: "outer",
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -55],
rich: {
a_set: {
color: "#cddbe4",
lineHeight: 20,
align: "center",
padding: [55, -40, -15, -40],
},
b_set: {
color: "auto",
},
},
},
}, },
emphasis: { emphasis: {
itemStyle: { label: {
shadowBlur: 10, show: false,
shadowOffsetX: 0, fontSize: 40,
shadowColor: "rgba(0, 0, 0, 0.5)", fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
}, },
], ],
}); });
pietwo.setOption({ pietwo.setOption({
title: { title: {
text: text: "总量",
"隐患整治数(个) : " + subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0",
(this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish),
left: "center", left: "center",
top: 0, top: 25,
textStyle: { textStyle: {
color: "#cddbe4", color: "#cddbe4",
fontSize: "16", fontSize: "16",
}, },
}, subtextStyle: {
grid: { color: "#cddbe4",
bottom: "7%", fontSize: "16",
containLabel: true, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
}, },
series: [ series: [
{ {
name: "任务概况", color: ["#FEA754", "#D8583E"],
name: "Access From",
type: "pie", type: "pie",
radius: "55%", radius: ["70%", "90%"],
center: ["50%", "58%"], avoidLabelOverlap: false,
data: [ itemStyle: {
{ borderRadius: 0,
value: this.allNum.hiddenBookUnFinish, borderColor: "#fff",
name: "未完成", borderWidth: 0,
itemStyle: { color: "#fa8167" },
},
{
value: this.allNum.hiddenBookFinish,
name: "已完成",
itemStyle: { color: "#5470c6" },
},
],
labelLine: {
length: 20,
length2: 50,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: false,
position: "outer",
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -55],
rich: {
a_set: {
color: "#cddbe4",
lineHeight: 20,
align: "center",
padding: [55, -40, -15, -40],
},
b_set: {
color: "auto",
},
},
},
}, },
emphasis: { emphasis: {
itemStyle: { label: {
shadowBlur: 10, show: false,
shadowOffsetX: 0, fontSize: 40,
shadowColor: "rgba(0, 0, 0, 0.5)", fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
}, },
], ],
}); });
...@@ -593,8 +534,8 @@ export default { ...@@ -593,8 +534,8 @@ export default {
margin-left: 2%; margin-left: 2%;
} }
.leftbar1 { .leftbar1 {
width: 85%; width: 80%;
height: 20%; height: 25%;
padding-top: 10%; padding-top: 10%;
pointer-events: auto; pointer-events: auto;
} }
...@@ -607,7 +548,7 @@ export default { ...@@ -607,7 +548,7 @@ export default {
.leftbar3 { .leftbar3 {
width: 85%; width: 85%;
height: 32%; height: 32%;
padding-top: 15px; padding-top: 20px;
padding-bottom: 35px; padding-bottom: 35px;
pointer-events: auto; pointer-events: auto;
} }
...@@ -630,7 +571,16 @@ export default { ...@@ -630,7 +571,16 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
margin-left: 5%; margin-left: 5%;
margin-top: 40px; margin-top: 25px;
}
.item3 {
width: 85%;
height: 30px;
font-size: 16px;
font-weight: 700;
margin-left: 5%;
padding-top: 25px;
line-height: 10px;
} }
.fong-div { .fong-div {
width: 4px; width: 4px;
...@@ -644,7 +594,6 @@ export default { ...@@ -644,7 +594,6 @@ export default {
height: 2px; height: 2px;
float: right; float: right;
background-image: linear-gradient(to left, #47a0ff, #ffffff00); background-image: linear-gradient(to left, #47a0ff, #ffffff00);
margin-top: 10px; margin-top: 10px;
margin-right: 50px; margin-right: 50px;
} }
...@@ -714,13 +663,25 @@ export default { ...@@ -714,13 +663,25 @@ export default {
} }
} */ } */
.div-p { .div-p {
width: 100%; // width: 100%;
background: url("../../assets/ranqifirst/div-p.png"); width: 155px;
// background: url("../../assets/ranqifirst/div-p.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer; cursor: pointer;
text-align: center;
padding: 7px 0px; padding: 7px 0px;
color: #0ff; // color: #0ff;
}
.div-p-value {
width: 155px;
height: 77px;
text-align: center;
font-family: "arialbd";
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
background: url("~@/assets/firstimage/left-top-img.png") center;
} }
.div-el { .div-el {
...@@ -769,15 +730,16 @@ export default { ...@@ -769,15 +730,16 @@ export default {
color: #1e516f; color: #1e516f;
} */ } */
.titleTex { .titleTex {
width: 100%; flex: 1;
height: 20px; align-content: center;
margin-top: 0px; .titleTex-item {
text-align: center; color: #fff;
/* font-size: 15px; margin-left: 40px;
display: flex; margin-bottom: 10px;
justify-content: space-around; .b {
align-items: center; */ margin-left: 40px;
padding: 0px 30px; }
}
} }
.leftyj { .leftyj {
margin-top: 10px; margin-top: 10px;
...@@ -803,16 +765,45 @@ export default { ...@@ -803,16 +765,45 @@ export default {
line-height: 35px; line-height: 35px;
padding: 10px 0 0 0; padding: 10px 0 0 0;
} }
.pieone { .pieone {
width: 50%; width: 80%;
height: 60%; height: 40%;
float: left; // float: left;
margin-top: 30px; margin-top: 30px;
margin-left: 40px;
.pie-title {
color: #fff;
margin-bottom: 10px;
}
.chars-wrapper {
width: 100%;
// height: 100%;
display: flex;
}
#myChartpieone {
width: 100px;
height: 100px;
}
} }
.pietwo { .pietwo {
width: 50%; width: 80%;
height: 60%; height: 40%;
float: right; margin-left: 40px;
margin-top: 30px; .pie-title {
color: #fff;
margin-bottom: 10px;
}
.chars-wrapper {
width: 100%;
// height: 100%;
display: flex;
}
#myChartpietwo {
width: 100px;
height: 100px;
}
// float: right;
// margin-top: 30px;
} }
</style> </style>
zh-baseversion-web/src/components/bigWindow/rightBar.vue
View file @ 9a2b75e9
...@@ -424,8 +424,26 @@ export default { ...@@ -424,8 +424,26 @@ export default {
changeTimer: false, changeTimer: false,
repeatFinshed: false, repeatFinshed: false,
tableHeight: 135, tableHeight: 185,
tableData: [{unitName:123},{unitName:456},{unitName:45446}], tableData: [
// {
// unitName: 123,
// handledStatus: 123,
// statusName: 345,
// alarmTime: "2014-11-11 10:10:10",
// },
// {
// unitName: 456,
// handledStatus: 123,
// statusName: 345,
// alarmTime: "2014-11-11 10:10:10",
// },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
],
yujingdata: { yujingdata: {
unitName: "省移动", unitName: "省移动",
detectorType: "", detectorType: "",
...@@ -497,7 +515,7 @@ export default { ...@@ -497,7 +515,7 @@ export default {
cancel1() {}, cancel1() {},
getAlarm() { getAlarm() {
return alarmData().then((response) => { return alarmData().then((response) => {
return; // return;
this.tableData = response.data.pageData; this.tableData = response.data.pageData;
if (this.tableData.length > 0) { if (this.tableData.length > 0) {
this.yujingdata = this.tableData[0]; this.yujingdata = this.tableData[0];
...@@ -550,7 +568,8 @@ export default { ...@@ -550,7 +568,8 @@ export default {
); );
clearInterval(this.timer); clearInterval(this.timer);
this.timer = setInterval(async () => { this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) { // console.log(selectWrap.scrollTop,this.scrollHeight)
if (selectWrap.scrollTop >= this.scrollHeight) {
clearInterval(this.timer); clearInterval(this.timer);
await this.getAlarm(); await this.getAlarm();
selectWrap.scrollTop = 0; selectWrap.scrollTop = 0;
...@@ -1140,7 +1159,7 @@ export default { ...@@ -1140,7 +1159,7 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.rightb { .rightb {
width: 98%; width: 98%;
height: 100%; height: 100%;
...@@ -1393,8 +1412,13 @@ titletu2 { ...@@ -1393,8 +1412,13 @@ titletu2 {
.left { .left {
margin-top: 10px; margin-top: 10px;
width: 350px; width: 350px;
height: 55%; height: 75%;
margin-left: 35px; margin-left: 35px;
.right-bottom-data-left {
height: 100%;
// background: red;
}
} }
.yj { .yj {
padding: 0px 10px; padding: 0px 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment