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 @@
}
.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) {
background-color: #e6e6e6;
......@@ -195,8 +212,9 @@
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: rgb(11 22 37);
background-color: #062A45;
&:hover td {
background-color: #7bf8f430 !important;
......@@ -205,13 +223,18 @@
td {
.cell {
// 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) {
background-color: #213b52;
// background-color: #213b52;
background-color: #062A45;
&:hover td {
background-color: #7bf8f430 !important;
......@@ -219,6 +242,7 @@
td {
.cell {
line-height: 14px;
color: #fff;
}
}
......@@ -621,6 +645,7 @@
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
......
zh-baseversion-web/src/components/bigWindow/leftBar.vue
View file @ 9a2b75e9
......@@ -36,16 +36,10 @@
<div class="div-p" @click="$router.push('/regulation/supervise')">
从业人员数(人)
</div>
<span
style="
font-family: 'arialbd';
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.peopleNum }}</span
>
<div class="div-p-value">
{{ allNum.peopleNum }}
</div>
<div></div>
</div>
</div>
<!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> -->
......@@ -62,15 +56,7 @@
<div class="div-p" @click="$router.push('/regulation/pipe')">
管道长度(m)
</div>
<span
style="
font-family: 'arialbd';
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.allPipeLength }}</span
>
<div class="div-p-value">{{ allNum.allPipeLength }}</div>
</div>
</div>
</div>
......@@ -89,26 +75,35 @@
<div class="rightline2"></div>
</div>
<div class="pieone">
<div
id="myChartpieone"
:style="{ width: '100%', height: '100%' }"
></div>
<div class="titleTex">
<div :style="{ color: '#5470c6' }">● 已完成:{{ allNum.typeOne }}</div>
<div :style="{ color: '#fa8167' }">● 未完成:{{ allNum.typeTwo }}</div>
<div class="pie-title">巡检任务数量(个)</div>
<div class="chars-wrapper">
<div id="myChartpieone"></div>
<div class="titleTex">
<div class="titleTex-item">
<span>已完成巡检</span>
<span class="b">{{ allNum.typeOne }}</span>
</div>
<div class="titleTex-item">
<span>未完成巡检</span>
<span class="b">{{ allNum.typeTwo }}</span>
</div>
</div>
</div>
</div>
<div class="pietwo">
<div
id="myChartpietwo"
:style="{ width: '100%', height: '100%' }"
></div>
<div class="titleTex">
<div :style="{ color: '#5470c6' }">
● 已完成:{{ this.allNum.hiddenBookFinish }}
</div>
<div :style="{ color: '#fa8167' }">
● 未完成:{{ this.allNum.hiddenBookUnFinish }}
<div class="pie-title">隐患整治数量(个)</div>
<div class="chars-wrapper">
<div id="myChartpietwo"></div>
<div class="titleTex">
<div class="titleTex-item">
<span>已完成整治</span>
<span class="b">{{ allNum.hiddenBookFinish }}</span>
</div>
<div class="titleTex-item">
<span>未完成整治</span>
<span class="b">{{ allNum.hiddenBookUnFinish }}</span>
</div>
</div>
</div>
</div>
......@@ -116,7 +111,7 @@
<!-- 任务完成率 -->
<div class="leftbar3">
<div class="item1">
<div class="item3">
<!-- <div class="fong-div"></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 {
// 绘制图表
pieone.setOption({
title: {
text:
"巡检任务数(个) : " + (this.allNum.typeOne + this.allNum.typeTwo),
text: "总量",
subtext: this.allNum.typeOne + this.allNum.typeTwo || "0",
left: "center",
top: 0,
top: 25,
textStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
subtextStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
tooltip: {
trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
},
series: [
{
name: "任务概况",
color: ["#35A1FF", "#1EC9E3"],
name: "Access From",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: this.allNum.typeTwo,
name: "未完成",
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",
},
},
},
radius: ["70%", "90%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: "#fff",
borderWidth: 0,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
label: {
show: false,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
},
],
});
pietwo.setOption({
title: {
text:
"隐患整治数(个) : " +
(this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish),
text: "总量",
subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0",
left: "center",
top: 0,
top: 25,
textStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
subtextStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
tooltip: {
trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
},
series: [
{
name: "任务概况",
color: ["#FEA754", "#D8583E"],
name: "Access From",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: this.allNum.hiddenBookUnFinish,
name: "未完成",
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",
},
},
},
radius: ["70%", "90%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: "#fff",
borderWidth: 0,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
label: {
show: false,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
},
],
});
......@@ -593,8 +534,8 @@ export default {
margin-left: 2%;
}
.leftbar1 {
width: 85%;
height: 20%;
width: 80%;
height: 25%;
padding-top: 10%;
pointer-events: auto;
}
......@@ -607,7 +548,7 @@ export default {
.leftbar3 {
width: 85%;
height: 32%;
padding-top: 15px;
padding-top: 20px;
padding-bottom: 35px;
pointer-events: auto;
}
......@@ -630,7 +571,16 @@ export default {
font-size: 16px;
font-weight: 700;
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 {
width: 4px;
......@@ -644,7 +594,6 @@ export default {
height: 2px;
float: right;
background-image: linear-gradient(to left, #47a0ff, #ffffff00);
margin-top: 10px;
margin-right: 50px;
}
......@@ -714,13 +663,25 @@ export default {
}
} */
.div-p {
width: 100%;
background: url("../../assets/ranqifirst/div-p.png");
// width: 100%;
width: 155px;
// background: url("../../assets/ranqifirst/div-p.png");
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
text-align: center;
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 {
......@@ -769,15 +730,16 @@ export default {
color: #1e516f;
} */
.titleTex {
width: 100%;
height: 20px;
margin-top: 0px;
text-align: center;
/* font-size: 15px;
display: flex;
justify-content: space-around;
align-items: center; */
padding: 0px 30px;
flex: 1;
align-content: center;
.titleTex-item {
color: #fff;
margin-left: 40px;
margin-bottom: 10px;
.b {
margin-left: 40px;
}
}
}
.leftyj {
margin-top: 10px;
......@@ -803,16 +765,45 @@ export default {
line-height: 35px;
padding: 10px 0 0 0;
}
.pieone {
width: 50%;
height: 60%;
float: left;
width: 80%;
height: 40%;
// float: left;
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 {
width: 50%;
height: 60%;
float: right;
margin-top: 30px;
width: 80%;
height: 40%;
margin-left: 40px;
.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>
zh-baseversion-web/src/components/bigWindow/rightBar.vue
View file @ 9a2b75e9
......@@ -424,8 +424,26 @@ export default {
changeTimer: false,
repeatFinshed: false,
tableHeight: 135,
tableData: [{unitName:123},{unitName:456},{unitName:45446}],
tableHeight: 185,
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: {
unitName: "省移动",
detectorType: "",
......@@ -497,7 +515,7 @@ export default {
cancel1() {},
getAlarm() {
return alarmData().then((response) => {
return;
// return;
this.tableData = response.data.pageData;
if (this.tableData.length > 0) {
this.yujingdata = this.tableData[0];
......@@ -550,7 +568,8 @@ export default {
);
clearInterval(this.timer);
this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) {
// console.log(selectWrap.scrollTop,this.scrollHeight)
if (selectWrap.scrollTop >= this.scrollHeight) {
clearInterval(this.timer);
await this.getAlarm();
selectWrap.scrollTop = 0;
......@@ -1140,7 +1159,7 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
.rightb {
width: 98%;
height: 100%;
......@@ -1393,8 +1412,13 @@ titletu2 {
.left {
margin-top: 10px;
width: 350px;
height: 55%;
height: 75%;
margin-left: 35px;
.right-bottom-data-left {
height: 100%;
// background: red;
}
}
.yj {
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