feat: ”大屏修改“
This commit is contained in:
parent
d8b7e344bd
commit
be467d3f93
|
@ -150,8 +150,8 @@ export default {
|
||||||
}],
|
}],
|
||||||
activeName:10,
|
activeName:10,
|
||||||
tabOptions:[
|
tabOptions:[
|
||||||
{ label: "进出厂车辆运输台账", name: 10 },
|
{ label: "进出厂运输车辆台账", name: 10 },
|
||||||
{ label: "进出厂车辆运输台账", name: 20 },
|
{ label: "厂内运输车辆台账", name: 20 },
|
||||||
{ label: "非道路移动机械电子台账", name: 30 },
|
{ label: "非道路移动机械电子台账", name: 30 },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -160,7 +160,10 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
//返回地图
|
||||||
|
backtoMap() {
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -21,25 +21,30 @@
|
||||||
runningStateEnum[scope.row.running_state]?.text }}</el-tag>
|
runningStateEnum[scope.row.running_state]?.text }}</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="颗粒物实测(mg/m3)" width="180">
|
|
||||||
<template #default="scope">
|
<el-table-column label="SO2(mg/m3)" width="130">
|
||||||
{{ scope.row.envdata.dust_rtd ? scope.row.envdata.dust_rtd : '-' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="SO2(mg/m3)" width="160">
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row.envdata.so2_zs ? scope.row.envdata.so2_zs : '-' }}
|
{{ scope.row.envdata.so2_zs ? scope.row.envdata.so2_zs : '-' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="NOX(mg/m3)" width="160">
|
<el-table-column label="SO2达标率(%)" width="130">
|
||||||
|
23%
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="NOX(mg/m3)" width="130">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row.envdata.nox_zs ? scope.row.envdata.nox_zs : '-' }}
|
{{ scope.row.envdata.nox_zs ? scope.row.envdata.nox_zs : '-' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="颗粒物折算(mg/m3)" width="180">
|
<el-table-column label="NOX达标率(%)" width="130">
|
||||||
|
36%
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="颗粒物折算(mg/m3)" width="130">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row.envdata.dust_zs ? scope.row.envdata.dust_zs : '-' }}
|
{{ scope.row.envdata.dust_zs ? scope.row.envdata.dust_zs : '-' }}
|
||||||
</template>
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="颗粒物折算达标率(%)" width="130">
|
||||||
|
45%
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="温度(℃)">
|
<el-table-column label="温度(℃)">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
|
|
|
@ -12,9 +12,14 @@
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header class="searchWrap">
|
<el-header class="searchWrap">
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<div class="left-panel">洗车行为统计</div>
|
<div class="left-panel">洗车行为统计
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right-panel">
|
<div class="right-panel">
|
||||||
|
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
|
||||||
|
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" style="width: 100%"
|
||||||
|
clearable />
|
||||||
<el-select v-model="query.station" placeholder="洗车台" @change="handleQuery" clearable>
|
<el-select v-model="query.station" placeholder="洗车台" @change="handleQuery" clearable>
|
||||||
<el-option v-for="item in stationOptions" :key="item" :label="item.name"
|
<el-option v-for="item in stationOptions" :key="item" :label="item.name"
|
||||||
:value="item.id"></el-option>
|
:value="item.id"></el-option>
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
|
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
|
||||||
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" style="width: 100%"
|
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" style="width: 100%"
|
||||||
clearable />
|
clearable />
|
||||||
<el-select v-model="query.type" placeholder="出入类型" clearable @change="handleQuery">
|
<el-select v-model="query.type" placeholder="车辆类型" clearable @change="handleQuery">
|
||||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
|
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
<el-table-column prop="dzbh" label="道闸编号"></el-table-column>
|
<el-table-column prop="dzbh" label="道闸编号"></el-table-column>
|
||||||
<el-table-column prop="dtgfs" label="抬杆方式"></el-table-column>
|
<el-table-column prop="dtgfs" label="抬杆方式"></el-table-column>
|
||||||
<el-table-column prop="jcsj" label="进厂时间"></el-table-column>
|
<el-table-column prop="jcsj" label="进厂时间"></el-table-column>
|
||||||
<el-table-column prop="ccsj" label="出场时间"></el-table-column>
|
<el-table-column prop="ccsj" label="出厂时间"></el-table-column>
|
||||||
<el-table-column prop="gcllx" label="车俩类型"></el-table-column>
|
<el-table-column prop="gcllx" label="车俩类型"></el-table-column>
|
||||||
<el-table-column prop="hclys" label="车辆颜色"></el-table-column>
|
<el-table-column prop="hclys" label="车辆颜色"></el-table-column>
|
||||||
<el-table-column prop="cph" label="车牌号"></el-table-column>
|
<el-table-column prop="cph" label="车牌号"></el-table-column>
|
||||||
|
@ -53,8 +53,11 @@
|
||||||
<el-table-column prop="fdjhm" label="发动机号码"></el-table-column>
|
<el-table-column prop="fdjhm" label="发动机号码"></el-table-column>
|
||||||
|
|
||||||
</scTable>
|
</scTable>
|
||||||
<el-dialog width="650px" v-model="dialogFormVisible" title="车辆运输台账详情" >
|
<el-dialog width="650px" style="border-color: var(--el-border-color-light);
|
||||||
<el-descriptions :column="2" width="600px">
|
background: rgb(4, 50, 83);
|
||||||
|
background-color: rgb(4, 50, 83);
|
||||||
|
box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109)" v-model="dialogFormVisible" title="车辆运输台账详情" >
|
||||||
|
<el-descriptions :column="3" width="600px">
|
||||||
<el-descriptions-item label="出入口编号">{{ ysdata.crkbh }}</el-descriptions-item>
|
<el-descriptions-item label="出入口编号">{{ ysdata.crkbh }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="道闸编号">{{ ysdata.dzbh }}</el-descriptions-item>
|
<el-descriptions-item label="道闸编号">{{ ysdata.dzbh }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="抬杆方式">{{ ysdata.tgfs }}</el-descriptions-item>
|
<el-descriptions-item label="抬杆方式">{{ ysdata.tgfs }}</el-descriptions-item>
|
||||||
|
@ -76,11 +79,27 @@
|
||||||
<el-descriptions-item label="出厂运输货物名称">{{ ysdata.cchwmc }}</el-descriptions-item>
|
<el-descriptions-item label="出厂运输货物名称">{{ ysdata.cchwmc }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="出厂运输货物量">{{ ysdata.cchwl }}</el-descriptions-item>
|
<el-descriptions-item label="出厂运输货物量">{{ ysdata.cchwl }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="车队名称">{{ ysdata.cdmc }}</el-descriptions-item>
|
<el-descriptions-item label="车队名称">{{ ysdata.cdmc }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="进厂照片">{{ ysdata.jczp }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="随车清单">{{ ysdata.sdqd }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="行驶证">{{ ysdata.xsz }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="手动抬杆照片">{{ ysdata.sdtgzp }}</el-descriptions-item>
|
|
||||||
|
|
||||||
|
<el-descriptions-item label="进厂照片">
|
||||||
|
<div class="demo-image__preview">
|
||||||
|
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
|
||||||
|
<el-descriptions-item label="行驶证">
|
||||||
|
<div class="demo-image__preview">
|
||||||
|
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="手动抬杆照片">
|
||||||
|
<div class="demo-image__preview">
|
||||||
|
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="随车清单">{{ ysdata.sdqd }}</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
|
@ -104,7 +123,7 @@ export default {
|
||||||
tgfs:"自动",
|
tgfs:"自动",
|
||||||
jcsj:"2024-08-02",
|
jcsj:"2024-08-02",
|
||||||
ccsj:"2024-08-02",
|
ccsj:"2024-08-02",
|
||||||
cllx:"运输车辆",
|
cllx:"罐车",
|
||||||
clys:"白色",
|
clys:"白色",
|
||||||
cph:"Ad1233",
|
cph:"Ad1233",
|
||||||
zcdjsj:"",
|
zcdjsj:"",
|
||||||
|
@ -112,8 +131,8 @@ export default {
|
||||||
clppxh:"",
|
clppxh:"",
|
||||||
fdjhm:"",
|
fdjhm:"",
|
||||||
rllx:"",
|
rllx:"",
|
||||||
pfjd:"",
|
pfjd:"国五",
|
||||||
syxz:"",
|
syxz:"汽油",
|
||||||
lxzt:"",
|
lxzt:"",
|
||||||
jcyshwmc:"",
|
jcyshwmc:"",
|
||||||
jchwl:"",
|
jchwl:"",
|
||||||
|
@ -151,6 +170,11 @@ export default {
|
||||||
timeOptions: ['日', '月', '年'],
|
timeOptions: ['日', '月', '年'],
|
||||||
apiObj: this.$API.enp.vehicle_access,
|
apiObj: this.$API.enp.vehicle_access,
|
||||||
params: {},
|
params: {},
|
||||||
|
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||||
|
srcList: [
|
||||||
|
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
||||||
|
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -357,17 +357,7 @@
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<div class="chart" id="pieChart"></div>
|
<div class="chart" id="pieChart"></div>
|
||||||
<div class="carStaticWrap">
|
<div class="carStaticWrap">
|
||||||
<div style="display:flex">
|
|
||||||
<div
|
|
||||||
class="todyCarItem"
|
|
||||||
v-for="item in pieData"
|
|
||||||
:key="item"
|
|
||||||
>
|
|
||||||
<span class="carStaticText" style="color: #d5d5d5">{{item.name}}</span>
|
|
||||||
<span class="carStaticNum">{{ item.value }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex">
|
<div style="display:flex">
|
||||||
<div
|
<div
|
||||||
class="todyCarItem"
|
class="todyCarItem"
|
||||||
|
@ -391,6 +381,15 @@
|
||||||
src="img/enp_blue/block_title.png"
|
src="img/enp_blue/block_title.png"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<scScrollTavle
|
||||||
|
v-if="table4Visible"
|
||||||
|
:tableHeight="containerHeight"
|
||||||
|
:rowData="lineData4"
|
||||||
|
:titleData="liData4"
|
||||||
|
:refValue="refValue4"
|
||||||
|
class="bigScreenTable"
|
||||||
|
:noIndex="noIndex"
|
||||||
|
></scScrollTavle>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 左右两条边框线 -->
|
<!-- 左右两条边框线 -->
|
||||||
|
@ -610,20 +609,23 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{ value: 2, name: "新能源" },
|
{ value: 2, name: "国五" },
|
||||||
{ value: 6, name: "其他" },
|
{ value: 6, name: "国六" },
|
||||||
|
{ value: 6, name: "清洁运输" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
pieData: [
|
pieData: [
|
||||||
{ value: 2, name: "新能源" },
|
{ value: 2, name: "国五" },
|
||||||
{ value: 6, name: "其他" },
|
{ value: 6, name: "国六" },
|
||||||
|
{ value: 8, name: "清洁运输" },
|
||||||
|
|
||||||
],
|
],
|
||||||
containerHeight: null,
|
containerHeight: null,
|
||||||
refValue1: "moocBox1",
|
refValue1: "moocBox1",
|
||||||
table1Visible: false,
|
table1Visible: false,
|
||||||
lineData: [],
|
lineData: [],
|
||||||
liData1: ["设备名称", "颗粒物", "SO₂", "NOx" , "氨气"],
|
liData1: ["设备名称", "颗粒物", "SO₂", "NOx" , "氨"],
|
||||||
refValue2: "moocBox2",
|
refValue2: "moocBox2",
|
||||||
table2Visible: false,
|
table2Visible: false,
|
||||||
lineData2: [],
|
lineData2: [],
|
||||||
|
@ -632,6 +634,10 @@ export default {
|
||||||
table3Visible: false,
|
table3Visible: false,
|
||||||
lineData3: [],
|
lineData3: [],
|
||||||
liData3: ["设备名称", "PM10", "PM2.5"],
|
liData3: ["设备名称", "PM10", "PM2.5"],
|
||||||
|
table4Visible: false,
|
||||||
|
lineData4: ["环卫车","洒水"],
|
||||||
|
liData4: ["车辆类型", "作业情况"],
|
||||||
|
refValue4:liData4,
|
||||||
noIndex: true,
|
noIndex: true,
|
||||||
eqNumData: {
|
eqNumData: {
|
||||||
sc: 0,
|
sc: 0,
|
||||||
|
@ -913,6 +919,7 @@ export default {
|
||||||
this.table1Visible = true;
|
this.table1Visible = true;
|
||||||
this.table2Visible = true;
|
this.table2Visible = true;
|
||||||
this.table3Visible = true;
|
this.table3Visible = true;
|
||||||
|
this.table4Visible = true;
|
||||||
},
|
},
|
||||||
// bindBtnClass(index) {
|
// bindBtnClass(index) {
|
||||||
// let classInfo = { btns: true, btnsActive: false };
|
// let classInfo = { btns: true, btnsActive: false };
|
||||||
|
@ -1418,7 +1425,7 @@ header {
|
||||||
/* 车辆统计-start */
|
/* 车辆统计-start */
|
||||||
.carStaticWrap{
|
.carStaticWrap{
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
width: 150px;
|
width: 200px;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -1426,7 +1433,6 @@ header {
|
||||||
.todyCarItem {
|
.todyCarItem {
|
||||||
width:75px;
|
width:75px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 16px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
@ -1435,7 +1441,7 @@ header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.carStaticNum{
|
.carStaticNum{
|
||||||
font-size: 35px;
|
font-size: 25px;
|
||||||
color: #00f6ff;
|
color: #00f6ff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
Loading…
Reference in New Issue