feat: ”大屏修改“

This commit is contained in:
Li xia 2024-08-19 14:14:34 +08:00
parent d8b7e344bd
commit be467d3f93
5 changed files with 89 additions and 46 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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: {

View File

@ -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;