地级大屏页面初始化2
This commit is contained in:
parent
1ee6c36361
commit
2a92ac163f
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
|
|
@ -6,7 +6,61 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
<div class="topView">
|
||||
<div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="topTab1 fs-24">线路</div>
|
||||
<div class="topTab2 fs-24">变电</div>
|
||||
<div class="topTab3 fs-24">电缆</div>
|
||||
</div>
|
||||
<div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
|
||||
<div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/icon3.png" class="icon" />
|
||||
<span class="text" style="">项目数:</span>
|
||||
<span class="num">10</span>
|
||||
<span class="unit">个</span>
|
||||
</div>
|
||||
<div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
|
||||
<span class="text" style="">在用装备数:</span>
|
||||
<span class="num">10</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableHeader">
|
||||
<div class="header" style="width: 10%;">排名</div>
|
||||
<div class="header" style="width: 25%;">工程名称</div>
|
||||
<div class="header" style="width: 20%;">在用装备数(台)</div>
|
||||
<div class="header">投资额(万元)</div>
|
||||
<div class="header">现场人员(人)</div>
|
||||
<div class="header">风险等级</div>
|
||||
<div class="header">地理特征</div>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<div class="tableTr" v-for="(item,index) in tableList" :key="index">
|
||||
<div class="tableTd" style="width: 10%;">
|
||||
{{ index+1 }}
|
||||
</div>
|
||||
<div class="tableTd" style="width: 25%;">
|
||||
{{ item.major }}
|
||||
</div>
|
||||
<div class="tableTd" style="width: 20%;">
|
||||
{{ item.devicesNum }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.amount }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.person }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.riskLevel }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.geography }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,7 +69,97 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
return {
|
||||
tableList:[
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
devicesNum:"15",
|
||||
amount:"2289",
|
||||
person:89,
|
||||
riskLevel:5,
|
||||
geography:"平原",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -52,17 +196,169 @@ export default {
|
|||
height: 85%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.topView{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.fs-24{
|
||||
font-size: 24px;
|
||||
}
|
||||
.topTab1{
|
||||
width: 33%;
|
||||
height: 80%;
|
||||
color: #45ADF1;
|
||||
background-image: url("../../../../../assets/cityScreen/tab11.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.topTab2{
|
||||
width: 33%;
|
||||
height: 80%;
|
||||
color: #45ADF1;
|
||||
background-image: url("../../../../../assets/cityScreen/tab21.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.topTab3{
|
||||
width: 33%;
|
||||
height: 80%;
|
||||
color: #45ADF1;
|
||||
background-image: url("../../../../../assets/cityScreen/tab31.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.text{
|
||||
color: #C0C2C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.tableHeader{
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background-image: url("../../../../../assets/cityScreen/tableHeader.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tableBox{
|
||||
width: 100%;
|
||||
height: 68%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tableTr{
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background-image: url("../../../../../assets/cityScreen/tableTr.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
}
|
||||
.tableTd{
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header{
|
||||
color: #72B1F1;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.header{
|
||||
font-size: 10px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.text{
|
||||
font-size: 10px;
|
||||
}
|
||||
.tableTd{
|
||||
font-size: 10px;
|
||||
}
|
||||
.fs-24{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.header{
|
||||
font-size: 24px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.text{
|
||||
font-size: 20px;
|
||||
}
|
||||
.tableTd{
|
||||
font-size: 24px;
|
||||
}
|
||||
.fs-24{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,9 +15,34 @@
|
|||
<div class="item-title">
|
||||
<span class="title2">线路装备</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">50</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">0.027</span>
|
||||
<span class="unit">亿元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChartOne" style="width: 100%;height: 20%;"></div>
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num2">
|
||||
<span class="unit2">5年</span>
|
||||
<span style="font-weight: 700;">30</span>
|
||||
<span class="unit2">73%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #00FEFC;">23%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #1E8DFF;">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view-item">
|
||||
|
|
@ -28,7 +53,34 @@
|
|||
<div class="item-title">
|
||||
<span class="title2">变电装备</span>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">50</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">0.027</span>
|
||||
<span class="unit">亿元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChartTwo" style="width: 100%;height: 20%;"></div>
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num2">
|
||||
<span class="unit2">5年</span>
|
||||
<span style="font-weight: 700;">30</span>
|
||||
<span class="unit2">73%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #00FEFC;">23%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #1E8DFF;">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view-item">
|
||||
|
|
@ -39,7 +91,34 @@
|
|||
<div class="item-title">
|
||||
<span class="title2">电缆装备</span>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">50</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 700;">0.027</span>
|
||||
<span class="unit">亿元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChartThree" style="width: 100%;height: 20%;"></div>
|
||||
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div class="num2">
|
||||
<span class="unit2">5年</span>
|
||||
<span style="font-weight: 700;">30</span>
|
||||
<span class="unit2">73%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #00FEFC;">23%</span>
|
||||
</div>
|
||||
<div class="num2" style="color: #00FEFC;">
|
||||
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
||||
<span style="font-weight: 700;">15</span>
|
||||
<span class="unit2" style="color: #1E8DFF;">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -50,6 +129,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -59,8 +139,170 @@ export default {
|
|||
|
||||
},
|
||||
mounted() {
|
||||
this.InitEChartsOne()
|
||||
this.InitEChartsTwo()
|
||||
this.lineChartThree()
|
||||
},
|
||||
methods: {
|
||||
InitEChartsOne() {
|
||||
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
var legendData = [
|
||||
{ name: '5年', data: 30 },
|
||||
{ name: '5-10年', data: 15 },
|
||||
{ name: '10年以上', data: 15 }
|
||||
];
|
||||
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
|
||||
var seriesList = [];
|
||||
for (var i = 0; i < legendData.length; i++) {
|
||||
seriesList.push({
|
||||
type: 'bar',
|
||||
stack: '2',
|
||||
legendHoverLink: false,
|
||||
barWidth: 6,
|
||||
data: [
|
||||
{
|
||||
value: legendData[i].data,
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
var option = {
|
||||
grid: {
|
||||
show: true,
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
borderColor: "transparent"
|
||||
},
|
||||
// backgroundColor: '#fff',
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
inverse: true,
|
||||
data: [''],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: seriesList,
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
|
||||
this.myCharts1.setOption(option)
|
||||
// });
|
||||
},
|
||||
InitEChartsTwo() {
|
||||
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
var legendData = [
|
||||
{ name: '5年', data: 30 },
|
||||
{ name: '5-10年', data: 15 },
|
||||
{ name: '10年以上', data: 15 }
|
||||
];
|
||||
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
|
||||
var seriesList = [];
|
||||
for (var i = 0; i < legendData.length; i++) {
|
||||
seriesList.push({
|
||||
type: 'bar',
|
||||
stack: '2',
|
||||
legendHoverLink: false,
|
||||
barWidth: 6,
|
||||
data: [
|
||||
{
|
||||
value: legendData[i].data,
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
var option = {
|
||||
grid: {
|
||||
show: true,
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
borderColor: "transparent"
|
||||
},
|
||||
// backgroundColor: '#fff',
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
inverse: true,
|
||||
data: [''],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: seriesList,
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartTwo'));
|
||||
this.myCharts1.setOption(option)
|
||||
// });
|
||||
},
|
||||
lineChartThree() {
|
||||
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
var legendData = [
|
||||
{ name: '5年', data: 30 },
|
||||
{ name: '5-10年', data: 15 },
|
||||
{ name: '10年以上', data: 15 }
|
||||
];
|
||||
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
|
||||
var seriesList = [];
|
||||
for (var i = 0; i < legendData.length; i++) {
|
||||
seriesList.push({
|
||||
type: 'bar',
|
||||
stack: '2',
|
||||
legendHoverLink: false,
|
||||
barWidth: 6,
|
||||
data: [
|
||||
{
|
||||
value: legendData[i].data,
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
var option = {
|
||||
grid: {
|
||||
show: true,
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
borderColor: "transparent"
|
||||
},
|
||||
// backgroundColor: '#fff',
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
inverse: true,
|
||||
data: [''],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: seriesList,
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartThree'));
|
||||
this.myCharts1.setOption(option)
|
||||
// });
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -108,6 +350,25 @@ export default {
|
|||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 26px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.num2{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
}
|
||||
.unit2{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
|
|
@ -115,6 +376,23 @@ export default {
|
|||
.title2{
|
||||
font-size: 10px;
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.num2{
|
||||
color: #83D3F8;
|
||||
font-size: 10px;
|
||||
}
|
||||
.unit2{
|
||||
font-size: 8px;
|
||||
color: #ccc;
|
||||
margin-right: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
|
|
@ -124,6 +402,23 @@ export default {
|
|||
.title2{
|
||||
font-size: 20px;
|
||||
}
|
||||
.num{
|
||||
font-size: 26px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.num2{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
}
|
||||
.unit2{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,24 +6,187 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
<div id="lineChartFour" style="width: 100%;height: 90%;"></div>
|
||||
<div class="text">备注说明：在用装备包含共享装备。</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
barWidth:40,
|
||||
size:[40, 20],
|
||||
Offset1:[-0, 10],
|
||||
Offset2:[-0, -10],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
console.log(window.innerWidth, window.innerHeight);
|
||||
if(window.innerWidth<3000){
|
||||
this.barWidth=20
|
||||
this.size=[20, 5]
|
||||
this.Offset1=[-0, 2]
|
||||
this.Offset2=[-0, -2]
|
||||
}
|
||||
this.InitEChartsOne()
|
||||
},
|
||||
methods: {
|
||||
InitEChartsOne() {
|
||||
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
var option = {
|
||||
xAxis: {
|
||||
data: ['在用', '在库', '在修', '共享'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
margin: 26, //刻度标签与轴线之间的距离。
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
// name:"单位：t",
|
||||
nameTextStyle:{
|
||||
color: '#fff',
|
||||
fontSize:15,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth:this.barWidth,
|
||||
z: 10,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#217CA7',
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#217CA7'
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#2B9CCC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2B9CCC'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: 0,
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
formatter: function(params) {
|
||||
console.log(params)
|
||||
var str = "" + params.value + "\n\n";
|
||||
return str;
|
||||
},
|
||||
},
|
||||
data:[220, 182, 191, 234]
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
barWidth:this.barWidth,
|
||||
"type": "pictorialBar",
|
||||
symbol: 'diamond',
|
||||
"symbolSize": this.size,
|
||||
"symbolOffset": this.Offset1,
|
||||
"z": 1,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#217CA7',
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#217CA7'
|
||||
},
|
||||
{
|
||||
offset: .5,
|
||||
color: '#2B9CCC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2B9CCC'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
"data": [1, 1, 1, 1]
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
barWidth:this.barWidth,
|
||||
"type": "pictorialBar",
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
"symbolSize": this.size,
|
||||
"symbolOffset": this.Offset2,
|
||||
"z": 50,
|
||||
itemStyle:{
|
||||
opacity: 1,
|
||||
color:'#2B9CCC',
|
||||
},
|
||||
"data": [220, 182, 191, 234]
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartFour'));
|
||||
this.myCharts1.setOption(option)
|
||||
// });
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -52,7 +215,10 @@ export default {
|
|||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
.text{
|
||||
width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
|
|
@ -60,6 +226,9 @@ export default {
|
|||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
.text{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
|
|
@ -69,6 +238,9 @@ export default {
|
|||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
.text{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,35 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
<div class="tableHeader">
|
||||
<div class="header">专业</div>
|
||||
<div class="header">主工序</div>
|
||||
<div class="header">子工序</div>
|
||||
<div class="header">装备名称</div>
|
||||
<div class="header">周转率</div>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<div class="tableTr" v-for="(item,index) in tableList" :key="index">
|
||||
<div class="tableTd">
|
||||
{{ index+1 }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.major }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.mainProcess }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.subProcess }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.equipment }}
|
||||
</div>
|
||||
<div class="tableTd">
|
||||
{{ item.maintenanceStatus }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,6 +43,95 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableList:[
|
||||
{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装塔材吊装塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},
|
||||
{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装塔材吊装塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
},{
|
||||
major:"变电站工程",
|
||||
mainProcess:"组塔施工",
|
||||
subProcess:"塔材吊装",
|
||||
equipment:"牵引机",
|
||||
maintenanceStatus:"2.25次/年",
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -52,17 +168,69 @@ export default {
|
|||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
.tableHeader{
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background-image: url("../../../../../assets/cityScreen/tableHeader.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tableBox{
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tableTr{
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background-image: url("../../../../../assets/cityScreen/tableTr.png");
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
}
|
||||
.tableTd{
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header{
|
||||
color: #72B1F1;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.header{
|
||||
font-size: 10px;
|
||||
}
|
||||
.tableTd{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.header{
|
||||
font-size: 24px;
|
||||
}
|
||||
.tableTd{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
<img src="../../../../../assets/cityScreen/usingBg.png" style="width: 80%;height: 100%;position: absolute;top: 0;left: 15%;" />
|
||||
<div class="all-box">
|
||||
<div>60%</div>
|
||||
<div class="title2">总体在用率</div>
|
||||
</div>
|
||||
<div class="bd-box">
|
||||
<div>60%</div>
|
||||
<div class="title3">变电装备在用率</div>
|
||||
</div>
|
||||
<div class="line-box">
|
||||
<div>60%</div>
|
||||
<div class="title3">线路装备在用率</div>
|
||||
</div>
|
||||
<div class="cable-box">
|
||||
<div>60%</div>
|
||||
<div class="title3">电缆装备在用率</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -50,19 +66,125 @@ export default {
|
|||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
padding-left: 8%;
|
||||
position: relative;
|
||||
}
|
||||
.title2{
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
.title3{
|
||||
color: #ccc;
|
||||
font-size: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.all-box{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 43%;
|
||||
}
|
||||
.bd-box{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #63C7DC;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
position: absolute;
|
||||
top:38%;
|
||||
left: 12%;
|
||||
}
|
||||
.line-box{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #9EABFE;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
position: absolute;
|
||||
top:19%;
|
||||
right: 0%;
|
||||
}
|
||||
.cable-box{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #8CFED7;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
position: absolute;
|
||||
top:74%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.title2{
|
||||
font-size: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.title3{
|
||||
font-size: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.all-box{
|
||||
font-size: 12px;
|
||||
}
|
||||
.bd-box{
|
||||
font-size: 12px;
|
||||
}
|
||||
.line-box{
|
||||
font-size: 12px;
|
||||
}
|
||||
.cable-box{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.title2{
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.title3{
|
||||
font-size: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.all-box{
|
||||
font-size: 28px;
|
||||
}
|
||||
.bd-box{
|
||||
font-size: 28px;
|
||||
}
|
||||
.line-box{
|
||||
font-size: 28px;
|
||||
}
|
||||
.cable-box{
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
<div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
|
||||
<span class="text" style="">装备预警总数:</span>
|
||||
<span class="num">10</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
<div style="width: 100%;height: 85%;overflow-y: auto;">
|
||||
<el-table :data="tableList">
|
||||
<el-table-column label="序号" align="center" type="index"></el-table-column>
|
||||
<el-table-column label="工序" align="center" prop="process"/>
|
||||
<el-table-column label="设备" align="center" prop="equipment"/>
|
||||
<el-table-column label="维保情况" align="center" prop="maintenanceStatus"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,6 +28,54 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableList:[
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -52,17 +112,141 @@ export default {
|
|||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
.text{
|
||||
color: #C0C2C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
/*最外层透明*/
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 表格内背景颜色 */
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table tr,
|
||||
::v-deep .el-table td {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(3, 40, 70, 0.9) !important;
|
||||
}
|
||||
/*去除底边框*/
|
||||
::v-deep.el-table td.el-table__cell {
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-table th.el-table__cell.is-leaf {
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #2893cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 标题行 */
|
||||
::v-deep .el-table__header-wrapper {
|
||||
/* border: 1px solid #15c0ff !important; */
|
||||
background-color: rgba(65, 129, 255, 0.4);
|
||||
}
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
|
||||
/* 高亮当前行 */
|
||||
::v-deep .el-table__body tr.current-row > td {
|
||||
background-color: #15c0ff20 !important;
|
||||
}
|
||||
::v-deep .el-table__body tr.current-row .cell {
|
||||
color: #ffffff !important;
|
||||
|
||||
}
|
||||
::v-deep .el-table__body tr:hover > td {
|
||||
background-color: #15c0ff20 !important;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.text{
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.text{
|
||||
font-size: 20px;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
font-size: 20px!important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
font-size: 20px!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
<div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/icon2.png" class="icon" />
|
||||
<span class="text" style="">退役预警总数:</span>
|
||||
<span class="num">10</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
<div style="width: 100%;height: 85%;overflow-y: auto;">
|
||||
<el-table :data="tableList">
|
||||
<el-table-column label="序号" align="center" type="index"></el-table-column>
|
||||
<el-table-column label="工序" align="center" prop="process"/>
|
||||
<el-table-column label="设备" align="center" prop="equipment"/>
|
||||
<el-table-column label="预警情况" align="center" prop="maintenanceStatus"/>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,6 +29,54 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableList:[
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
{
|
||||
process:"组塔施工",
|
||||
equipment:"抱杆",
|
||||
maintenanceStatus:"正常",
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -31,7 +92,7 @@ export default {
|
|||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/retireBg.png");
|
||||
background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
|
||||
background-size: 110% 100%;
|
||||
|
||||
}
|
||||
|
|
@ -52,16 +113,137 @@ export default {
|
|||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
.text{
|
||||
color: #C0C2C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
/*最外层透明*/
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 表格内背景颜色 */
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table tr,
|
||||
::v-deep .el-table td {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(3, 40, 70, 0.9) !important;
|
||||
}
|
||||
/*去除底边框*/
|
||||
::v-deep.el-table td.el-table__cell {
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-table th.el-table__cell.is-leaf {
|
||||
border: 0;
|
||||
}
|
||||
::v-deep.el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #2893cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 标题行 */
|
||||
::v-deep .el-table__header-wrapper {
|
||||
/* border: 1px solid #15c0ff !important; */
|
||||
background-color: rgba(65, 129, 255, 0.4);
|
||||
}
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
}
|
||||
|
||||
/* 高亮当前行 */
|
||||
::v-deep .el-table__body tr.current-row > td {
|
||||
background-color: #15c0ff20 !important;
|
||||
}
|
||||
::v-deep .el-table__body tr.current-row .cell {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
::v-deep .el-table__body tr:hover > td {
|
||||
background-color: #15c0ff20 !important;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.text{
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
font-size: 10px!important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.num{
|
||||
color: #83D3F8;
|
||||
font-size: 24px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.text{
|
||||
font-size: 20px;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
// color: #15c0ff !important;
|
||||
color: #fff;
|
||||
font-size: 20px!important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell > .cell {
|
||||
color: #e1f1fe !important;
|
||||
font-size: 20px!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue