admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中建四局(大屏):样式调整

Browse Source
This commit is contained in:
骆乐 2022-09-08 11:10:59 +08:00
parent 881e4f7134
commit 43e587fda8
19 changed files with 70 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

64
src/views/projectAdmin/common/jChart/pie/JRingChart.vue
View File

@ -3,73 +3,77 @@
</template>
<script>
import echarts from 'echarts4'
import echarts from "echarts4";
export default {
props: {
data: {
type: Array,
default: () => [{ value: 1, name: '' }]
default: () => [{ value: 1, name: "" }]
},
color: {
type: Array,
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
default: () => ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"]
},
title: {
type: Object,
default: () => ({
text: '',
subTitle: '',
x: '48%',
y: '36%',
text: "",
subTitle: "",
x: "48%",
y: "36%",
fontSize: 20
})
},
radius: {
type: Array,
default: () => ['65%', '80%']
default: () => ["65%", "80%"]
},
legend:{
type:Boolean,
default: () => true
}
},
mounted() {
this.createRingChart()
this.createRingChart();
},
watch: {
data: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createRingChart()
this.createRingChart();
}
},
deep: true,
deep: true
},
title: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createRingChart()
this.createRingChart();
}
},
deep: true,
deep: true
}
},
methods: {
createRingChart() {
const jRingChart = echarts.init(this.$refs.jRingChart)
const { title } = this
const jRingChart = echarts.init(this.$refs.jRingChart);
const { title } = this;
const option = {
color: this.color,
title: {
show: true,
text: title.text,
x: title.x || '48%',
y: title.y || '36%',
x: title.x || "48%",
y: title.y || "36%",
z: 5,
textAlign: 'center',
textAlign: "center",
textStyle: {
color: 'rgba(255, 255, 255, 1)',
color: "rgba(255, 255, 255, 1)",
fontSize: title.fontSize || 20
},
subtext: title.subTitle,
subtextStyle: {
color: 'rgba(255, 255, 255, 0.8)',
color: "rgba(255, 255, 255, 0.8)",
fontSize: 13
}
},
@ -77,18 +81,22 @@ export default {
right: 0
},
legend: {
show: false
show: this.legend
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '',
type: 'pie',
type: "pie",
name:this.data.name,
radius: this.radius,
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
position: "center"
},
labelLine: {
show: false
@ -96,13 +104,11 @@ export default {
data: this.data
}
]
}
console.log(option, '草')
jRingChart.setOption(option)
}
};
jRingChart.setOption(option);
}
}
};
</script>
<style>

2
src/views/projectAdmin/zjsj/carbon/centerBottom.vue
View File

@ -84,7 +84,7 @@ export default {
font-size: 12px;
color: rgba(255, 255, 254, 0.6);
width: 100%;
margin: 40px 30px 0px;
margin: 20px 30px 0px;
.weatherItem {
float: left;
width: 13.28%;

2
src/views/projectAdmin/zjsj/carbon/leftBottom.vue
View File

@ -119,7 +119,7 @@ export default {
// });
switch (this.checked) {
case 1:
this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
this.data = [90, 125, 100, 96, 100, 150, 190, 125 ]
break;
case 2:
this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]

5
src/views/projectAdmin/zjsj/carbon/leftCenter.vue
View File

@ -81,15 +81,14 @@ export default {
margin-left: 5px;
}
.greenTable {
margin-top: 30px;
th {
color:#72bdc9;
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
line-height: 35px;
}
td {
color: #c5c7cc;
line-height: 25px;
line-height: 35px;
}
}
.alarmType {

2
src/views/projectAdmin/zjsj/carbon/leftTop.vue
View File

@ -41,7 +41,7 @@ export default {
width: 100%;
height: 100%;
display: flex;
margin-top: 5%;
margin-top: 2%;
.left,
.right {

2
src/views/projectAdmin/zjsj/command/rightOne.vue
View File

@ -31,7 +31,7 @@
</div>
<div class="bottom">
<span class="label">安全生产起始日期：</span>
<span class="label">起始日期：</span>
<div class="value">
<span>2019</span>年
<span>03</span>月

2
src/views/projectAdmin/zjsj/command/rightTwo.vue
View File

@ -70,7 +70,7 @@ export default {
type: 'pie',
radius: ['76%', '88%'],
center: ['50%', '50%'],
hoverAnimation: true,
hoverAnimation: false,
label: {
normal: {
position: 'center'

8
src/views/projectAdmin/zjsj/quality/leftTop.vue
View File

@ -4,10 +4,11 @@
<div class="dllm">
<div class="chart">
<JRingChart
:title="{ text: '质量验收', subTitle: '987条件',fontSize: 14 }"
:title="{ text: '质量验收', subTitle: '2314条件',fontSize: 14 }"
:color="['#6EE4F0', '#E7622A']"
:data="[{ value: 2314 }, { value: 987 }]"
:data="[{ value: 2314, name: '已验收' }, { value: 987 ,name: '未验收'}]"
:radius="['60%', '80%']"
:legend="false"
/>
</div>
<div class="legend">
@ -36,8 +37,9 @@
<JRingChart
:title="{ text: '质量整改', subTitle: '987条件',fontSize: 14 }"
:color="['#6EE4F0', '#E7622A']"
:data="[{ value: 2314 }, { value: 987 }]"
:data="[{ value: 2314,name: '已整改' }, { value: 987,name: '未整改' }]"
:radius="['60%', '80%']"
:legend="false"
/>
</div>
<div class="legend">

8
src/views/projectAdmin/zjsj/security/centerBottom.vue
View File

@ -23,7 +23,7 @@
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 8" :key="i">
<div class="row" v-for="i in 3" :key="i">
<div class="td">{{i}}</div>
<div class="td">深基坑临边防护</div>
<div class="td">砌筑200mm以上挡水墙</div>
@ -66,7 +66,7 @@
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 8" :key="i">
<div class="row" v-for="i in 3" :key="i">
<div class="td">中建四项目深基坑</div>
<div class="td">沉降监测3号</div>
<div class="td">深层水平位移</div>
@ -159,7 +159,7 @@ export default {
line-height: 40px;
.td {
&:nth-child(1) {
width: 80px;
width: 120px;
}
&:nth-child(2) {
flex: 1;
@ -183,7 +183,7 @@ export default {
}
.dataImg {
margin-left: 500px;
margin-top: 50px;
margin-top: 20px;
p {
margin-left: 4%;
}

4
src/views/projectAdmin/zjsj/security/index.vue
View File

@ -45,10 +45,10 @@ export default {
width: calc(60% - 40px);
height: 100%;
.top {
height: 60%;
height: 65%;
}
.bottom {
height: 40%;
height: 35%;
}
}
.right {

2
src/views/projectAdmin/zjsj/security/leftBottom.vue
View File

@ -10,7 +10,7 @@
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 9" :key="i">
<div class="row" v-for="i in 3" :key="i">
<div>
<img src="../assets/images/common/bg_fgy.png" />
</div>

10
src/views/projectAdmin/zjsj/security/leftTop.vue
View File

@ -6,8 +6,9 @@
<JRingChart
:title="{ text: '安全隐患', subTitle: '987条件', fontSize: 14 }"
:color="['#6EE4F0', '#E7622A']"
:data="[{ value: 2314 }, { value: 987 }]"
:data="[{ value: 2314,name:'已处理' }, { value: 987,name:'未处理' }]"
:radius="['60%', '85%']"
:legend="false"
/>
</div>
<div class="legend">
@ -34,10 +35,11 @@
<div class="dllm">
<div class="woria">
<JRingChart
:title="{ text: '质量整改', subTitle: '987条件', fontSize: 14 }"
:title="{ text: '今日巡检', subTitle: '4400条件', fontSize: 14 }"
:color="['#6EE4F0', '#E7622A']"
:data="[{ value: 2314 }, { value: 987 }]"
:data="[{ value: 2314,name:'已巡检' }, { value: 987,name:'未巡检' }]"
:radius="['60%', '85%']"
:legend="false"
/>
</div>
<div class="legend">
@ -96,7 +98,6 @@ export default {
{ type: 3, datetime: '2022-02-02 13:39:09', status: 3 },
{ type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
{ type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
{ type: 3, datetime: '2022-02-02 13:39:09', status: 3 }
]
}
},
@ -177,6 +178,7 @@ export default {
color: #fff;
.thead {
color: #6ae3eb;
margin-bottom: 5px;
}
.tbody {
height: calc(100% - 36px);

8
src/views/projectAdmin/zjsj/security/rightTop.vue
View File

@ -2,7 +2,7 @@
<Card title="设备监控">
<div class="devices">
<vue-scroll>
<div class="device" v-for="i in 6" :key="i">
<div class="device" v-for="i in 4" :key="i">
<div class="device-name">空压机{{i}}</div>
<div class="info">
<img class="image" src="../assets/images/common/bg_kyj.png" />
@ -37,9 +37,9 @@ export default {
width: 100%;
height: 176px;
.device-name {
margin-top: 20px;
height: 36px;
line-height: 36px;
// margin-top: 20px;
height: 40px;
line-height: 40px;
font-size: 12px;
}
.info {

5
src/views/projectAdmin/zjsj/sourse/components/CarTable.vue
View File

@ -35,9 +35,6 @@ export default {
{ src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"渣土车", time: "2022-08-03 12:30" },
{ src:require("../../assets/images/common/bg_BluCar.png"),car: "鄂C254522",carType:"垃圾车", time: "2022-04-15 10:17" },
{ src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
{ src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"垃圾车", time: "2022-07-03 11:24" },
{ src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-02-15 15:30" },
{ src:require("../../assets/images/common/bg_BluCar.png"),car: "粤B888888",carType:"垃圾车", time: "2022-06-03 15:30" },
]
}
}
@ -60,7 +57,7 @@ export default {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 12px;
margin-bottom: 8px;
}
div {
text-align: center;

2
src/views/projectAdmin/zjsj/sourse/components/MaterialTable.vue
View File

@ -37,8 +37,6 @@ export default {
{ name: "玻璃", kg: "15", time: "2022-04-15 10:17" },
{ name: "水泥", kg: "23", time: "2022-06-03 15:30" },
{ name: "钢筋", kg: "12", time: "2022-07-03 11:24" },
{ name: "玻璃", kg: "18", time: "2022-02-15 15:30" },
{ name: "水泥", kg: "19", time: "2022-06-03 15:30" },
]
};
}

4
src/views/projectAdmin/zjsj/sourse/index.vue
View File

@ -42,10 +42,10 @@ export default {
width: 22%;
height: 100%;
.top {
height: 50%;
height: 60%;
}
.bottom {
height: 50%;
height: 40%;
}
}
.right {

2
src/views/projectAdmin/zjsj/sourse/leftBottom.vue
View File

@ -17,7 +17,7 @@ export default {
<style lang="less" scoped>
.list {
box-sizing: border-box;
padding-top: 20px;
padding-top: 10px;
height:100%;
}
</style>

2
src/views/projectAdmin/zjsj/sourse/leftTop.vue
View File

@ -44,7 +44,7 @@ export default {
}
.list {
box-sizing: border-box;
padding-top: 20px;
padding-top: 30px;
height: calc(100% - 120px);
}
</style>