绿通前台代码修改
parent
7c33ec3f4d
commit
f633991753
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,190 +0,0 @@
|
||||
<template>
|
||||
<el-row class="tac">
|
||||
<el-col :span="2" v-if="MenuType==0">
|
||||
<el-menu
|
||||
active-text-color="#ffd04b"
|
||||
background-color="#545c64"
|
||||
class="el-menu-vertical-demo"
|
||||
default-active="2"
|
||||
text-color="#fff"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
:style="menuStyle"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<el-menu-item v-for="item in menuList" :index="item.PRMISURL" @click="addTab(item)">
|
||||
<el-icon>
|
||||
<Menu/>
|
||||
</el-icon>
|
||||
<span>{{ item.PRMISNAME }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="MenuType==0?22:24">
|
||||
<div v-if="MenuType==1">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="$route.path"/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
<el-tabs
|
||||
v-model="editableTabsValue"
|
||||
class="demo-tabs"
|
||||
@tab-remove="removeTab"
|
||||
@tab-click="clickTab"
|
||||
v-if="MenuType==0"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in editableTabs"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
:closable="true"
|
||||
>
|
||||
<!-- <div v-html="item.content"></div>-->
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="$route.path"/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
<!-- <keep-alive>-->
|
||||
<!-- <router-view v-if="$route.meta.keepAlive"></router-view>-->
|
||||
<!-- </keep-alive>-->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {selectMenu, getUrlKey, checkOrgOfPRMIS} from "../../util/api/api.js";
|
||||
import {ElMessage} from "element-plus/es";
|
||||
|
||||
export default {
|
||||
name: "MenuIndex",
|
||||
data() {
|
||||
return {
|
||||
sysId: getUrlKey("sid", window.location.href),
|
||||
manno: getUrlKey("id", window.location.href),
|
||||
MenuType: getUrlKey("MenuType", window.location.href),
|
||||
isFirst: true,
|
||||
isCollapse: false,
|
||||
menuList: [],
|
||||
menuStyle: '',
|
||||
editableTabsValue: {},
|
||||
editableTabs: [],
|
||||
activeName: [],
|
||||
myHeight: '84%',
|
||||
tabIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
// console.log(key, keyPath)
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
// console.log(key, keyPath)
|
||||
},
|
||||
selectMenu() {
|
||||
selectMenu({
|
||||
// SYSID: this.sysId
|
||||
SYSID: 1100
|
||||
}).then((res) => {
|
||||
this.menuList = res;
|
||||
if (res != null && res.length > 0) {
|
||||
let item = res[0]
|
||||
this.addTab(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
addTab(item) {
|
||||
let tabNum = 0;
|
||||
const tabs = this.editableTabs;
|
||||
let isAdd = true;
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.title == item.PRMISNAME) {
|
||||
tabNum++;
|
||||
if (tabNum == 2) {
|
||||
this.editableTabsValue = tab.name;
|
||||
isAdd = false;
|
||||
this.$router.push({path: tab.name.substring(tab.name.indexOf('-') + 1)});
|
||||
return;
|
||||
}
|
||||
}
|
||||
})
|
||||
if (isAdd) {
|
||||
checkOrgOfPRMIS({
|
||||
// MANNO:'vp98+kUHT48',
|
||||
MANNO: this.manno,
|
||||
PRMISID: item.PRMISID,
|
||||
MENUTYPE: '3-',
|
||||
}).then((res) => {
|
||||
if (res) {
|
||||
const newTabName = `${++this.tabIndex}` + '-' + item.PRMISURL;
|
||||
this.editableTabs.push({
|
||||
title: item.PRMISNAME,
|
||||
name: newTabName,
|
||||
// content: '<iframe src="http://' + window.location.host + item.PRMISURL + '?sid='+item.SYSID+'" name="myiframe" frameborder="0" style="height:' + this.myHeight + ';visibility:inherit; width:100%;z-index:1;"></iframe>',
|
||||
})
|
||||
this.$router.push({
|
||||
path: item.PRMISURL,
|
||||
query: {sid: item.PRMISID}
|
||||
});
|
||||
this.editableTabsValue = newTabName
|
||||
this.isFirst = false;
|
||||
window.parent.insertUserLogControl('1100', '进入菜单' + item.PRMISNAME);
|
||||
} else {
|
||||
if (!this.isFirst) {
|
||||
ElMessage.error("对不起，您没有此菜单的权限！")
|
||||
} else {
|
||||
this.isFirst = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
clickTab(tab) {
|
||||
this.tabIndex = tab.paneName;
|
||||
this.$router.push({path: tab.props.name.substring(tab.props.name.indexOf('-') + 1)});
|
||||
},
|
||||
removeTab(targetName) {
|
||||
const tabs = this.editableTabs
|
||||
let activeName = this.editableTabsValue
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
const nextTab = tabs[index + 1] || tabs[index - 1]
|
||||
if (nextTab) {
|
||||
this.$router.push({path: nextTab.name.substring(nextTab.name.indexOf('-') + 1)});
|
||||
activeName = nextTab.name
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.editableTabsValue = activeName
|
||||
this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.MenuType == null || this.MenuType == '') {
|
||||
this.MenuType = 0
|
||||
}
|
||||
this.selectMenu();
|
||||
// this.menuStyle = 'height:100%';
|
||||
this.menuStyle = 'height:' + (document.documentElement.clientHeight) * 0.999 + 'px';
|
||||
this.myHeight = (document.documentElement.clientHeight) * 0.915 + 'px';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,314 +0,0 @@
|
||||
<template>
|
||||
<el-form :model="managerForm" size="medium" :rules="managerRules" ref="managerForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车牌号码" :label-width="formLabelWidth" prop="aCarNo">
|
||||
<el-input v-model="managerForm.aCarNo" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车牌颜色" :label-width="formLabelWidth" prop="color">
|
||||
<el-select v-model="managerForm.color" class="m-2" clearable placeholder="请选择车牌颜色"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in CarNoColorList"
|
||||
:label="item.TEXT"
|
||||
:value="item.TEXT"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属单位" :label-width="formLabelWidth" prop="acCount">
|
||||
<el-select v-model="managerForm.acCount" class="m-2" clearable placeholder="请选择所属单位"
|
||||
style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in CompanyList"
|
||||
:label="item.ACOUNTNAME"
|
||||
:value="item.ACOUNTID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用日期" :label-width="formLabelWidth" prop="begDate">
|
||||
<el-date-picker
|
||||
v-model="managerForm.begDate"
|
||||
type="datetime"
|
||||
placeholder="启用日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起始时间" :label-width="formLabelWidth" prop="begDt">
|
||||
<el-date-picker
|
||||
v-model="managerForm.begDt"
|
||||
type="datetime"
|
||||
placeholder="起始时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="终止时间" :label-width="formLabelWidth" prop="endDt">
|
||||
<el-date-picker
|
||||
v-model="managerForm.endDt"
|
||||
type="datetime"
|
||||
placeholder="终止时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="免费车种类" :label-width="formLabelWidth" prop="freeRoad">
|
||||
<el-select v-model="managerForm.freeRoad" class="m-2" clearable placeholder="请选择免费车种类"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in FreeRoadList"
|
||||
:label="item.TEXT"
|
||||
:value="item.VALUE"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" :label-width="formLabelWidth" prop="dataFlag">
|
||||
<el-radio-group v-model="managerForm.dataFlag" class="ml-4" style="width: 100%;">
|
||||
<el-radio :label="1">在用</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="车辆描述" :label-width="formLabelWidth" prop="desCrib">
|
||||
<el-input
|
||||
v-model="managerForm.desCrib"
|
||||
:rows="4"
|
||||
type="textarea"
|
||||
placeholder="请输入车辆描述,最多输入32个汉字!"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="免费站组合" :label-width="formLabelWidth" prop="freeStanList">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="8">
|
||||
<el-select v-model="managerForm.roadItem" value-key="ROADNO" class="m-2" placeholder="路段"
|
||||
style="width: 100%;"
|
||||
@change="getStaNo"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in RoadTableList"
|
||||
:label="item.ROADNAME"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-select v-model="managerForm.startSta" value-key="STANO" class="m-2" placeholder="起始站"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in StaNoList"
|
||||
:label="item.STANAME+':'+item.STANO"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-select v-model="managerForm.endSta" value-key="STANO" class="m-2" placeholder="结束站"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in StaNoList"
|
||||
:label="item.STANAME+':'+item.STANO"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="2" align="center">
|
||||
<el-button type="success" :icon="Plus" size="small" circle style="margin-top: 0px" @click="addTableData"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-table :data="tableData" border
|
||||
highlight-current-row="true"
|
||||
style="width: 100%;"
|
||||
v-if="tableData.length>0"
|
||||
>
|
||||
<el-table-column :resizable="false" fixed prop="roadInfo" label="路段" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" fixed prop="startStaInfo" label="起始站" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" fixed prop="endStaInfo" label="结束站" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" prop="right" label="操作" width="60" align="center">
|
||||
<template v-slot="scope">
|
||||
<el-button style="width: 96%;margin-left: 2%;margin-top: 0px" @click="deleteRow(scope.row)" type="danger"
|
||||
size="small" :icon="Delete">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Plus, Delete} from '@element-plus/icons-vue'
|
||||
import {selectStaNoListByRoadNo, checkACarNo, addCarNo, getMemo, getUrlKey} from "../../util/api/api.js";
|
||||
import {ElMessage} from "element-plus";
|
||||
import qs from "qs";
|
||||
|
||||
export default {
|
||||
name: "FreeStanView",
|
||||
props: ['FreeStanViewData'],
|
||||
data() {
|
||||
return {
|
||||
Plus,
|
||||
Delete,
|
||||
formLabelWidth: '100px',
|
||||
CompanyList: [],
|
||||
FreeRoadList: [],
|
||||
CarNoColorList: [],
|
||||
RoadTableList: [],
|
||||
StaNoList: [],
|
||||
EndStaNoList: [],
|
||||
tableData: [],
|
||||
editThisRow: {},
|
||||
managerForm: {
|
||||
isAdd: true
|
||||
},
|
||||
managerRules: {
|
||||
aCarNo: [{required: true, validator: this.checkACarNo, trigger: 'blur'}],
|
||||
color: [{required: true, message: '请选择车牌颜色', trigger: 'blur'}],
|
||||
acCount: [{required: true, message: '请选择所属单位', trigger: 'blur'}],
|
||||
begDate: [{required: true, message: '请填写启用日期', trigger: 'blur'}],
|
||||
begDt: [{required: true, message: '请填写起始日期', trigger: 'blur'}],
|
||||
endDt: [{required: true, message: '请填写终止日期', trigger: 'blur'}],
|
||||
freeRoad: [{required: true, message: '请选择免费车种类', trigger: 'blur'}],
|
||||
dataFlag: [{required: true, message: '请选择状态', trigger: 'blur'}],
|
||||
desCrib: [{max: 32, message: '最多输入32个汉字', trigger: 'blur'}],
|
||||
freeStanList: [{required: true, validator: this.checkFreeStan, trigger: 'blur'}],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitManagerForm() {
|
||||
this.$refs['managerForm'].validate((valid) => {
|
||||
this.managerForm.staNoList = this.tableData
|
||||
if (valid) {
|
||||
addCarNo(this.managerForm).then((res) => {
|
||||
if (res) {
|
||||
ElMessage.success('操作成功!')
|
||||
this.$parent.$parent.$parent.$parent.$parent.$parent.network();
|
||||
this.$parent.$parent.$parent.$parent.$parent.$parent.managerShow = false;
|
||||
window.parent.insertUserLogControl('1110',(this.managerForm.isAdd?"添加":"修改")+'白名单成功');
|
||||
} else {
|
||||
ElMessage.error('操作失败!')
|
||||
window.parent.insertUserLogControl('1110',(this.managerForm.isAdd?"添加":"修改")+'白名单失败');
|
||||
}
|
||||
return res;
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getStaNo(val) {
|
||||
selectStaNoListByRoadNo({
|
||||
roadNo: val.ROADNO
|
||||
}).then((res) => {
|
||||
this.StaNoList = res;
|
||||
this.managerForm.startSta = '';
|
||||
this.managerForm.endSta = '';
|
||||
})
|
||||
},
|
||||
addTableData() {
|
||||
if (this.managerForm.roadItem != null && this.managerForm.roadItem != ''
|
||||
&& this.managerForm.startSta != null && this.managerForm.startSta != ''
|
||||
&& this.managerForm.endSta != null && this.managerForm.endSta != '') {
|
||||
const roadInfo = this.managerForm.roadItem.ROADNAME + ':' + this.managerForm.roadItem.ROADNO
|
||||
const roadNo = this.managerForm.roadItem.ROADNO
|
||||
const startStaInfo = this.managerForm.startSta.STANAME + ':' + this.managerForm.startSta.STANO
|
||||
const startStaNo = this.managerForm.startSta.STANO
|
||||
const endStaInfo = this.managerForm.endSta.STANAME + ':' + this.managerForm.endSta.STANO
|
||||
const endStaNo = this.managerForm.endSta.STANO
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
if (this.tableData[i].roadNo == roadNo &&
|
||||
(
|
||||
(this.tableData[i].startStaNo == startStaNo && this.tableData[i].endStaNo == endStaNo) ||
|
||||
(this.tableData[i].startStaNo == endStaNo && this.tableData[i].endStaNo == startStaNo)
|
||||
)
|
||||
) {
|
||||
ElMessage.error('该组合已存在，不能重复添加!')
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.tableData.push({
|
||||
roadInfo: roadInfo,
|
||||
roadNo: roadNo,
|
||||
startStaInfo: startStaInfo,
|
||||
startStaNo: startStaNo,
|
||||
endStaInfo: endStaInfo,
|
||||
endStaNo: endStaNo,
|
||||
})
|
||||
} else {
|
||||
ElMessage.error('请选择站!')
|
||||
}
|
||||
},
|
||||
checkACarNo(rule, value, callback) {
|
||||
if (value == null || value == '') {
|
||||
callback(new Error('请输入车牌号'))
|
||||
} else {
|
||||
checkACarNo(qs.stringify({
|
||||
aCarNo: value
|
||||
})).then((res) => {
|
||||
if (res) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请输入正确的车牌号'))
|
||||
}
|
||||
})
|
||||
}
|
||||
// const plateNumber = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/
|
||||
// if (plateNumber.test(value)) {
|
||||
// callback()
|
||||
// } else {
|
||||
// callback(new Error('请输入正确的车牌号'))
|
||||
// }
|
||||
},
|
||||
checkFreeStan(rule, value, callback) {
|
||||
if (this.tableData.length == 0) {
|
||||
callback(new Error('请添加免费站!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
deleteRow(row) {
|
||||
this.tableData = this.tableData.filter((o) => {
|
||||
return o !== row
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.CarNoColorList = this.$props.FreeStanViewData.CarNoColorList
|
||||
this.RoadTableList = this.$props.FreeStanViewData.RoadTableList
|
||||
this.CompanyList = this.$props.FreeStanViewData.CompanyList
|
||||
this.FreeRoadList = this.$props.FreeStanViewData.FreeRoadList
|
||||
if (this.$props.FreeStanViewData.editThisRow != null && this.$props.FreeStanViewData.editThisRow != {}) {
|
||||
this.managerForm = this.$props.FreeStanViewData.editThisRow
|
||||
const memoList=this.managerForm.memo.match(/.{1,10}/g)
|
||||
getMemo(memoList).then((res)=>{
|
||||
this.tableData=res;
|
||||
})
|
||||
this.managerForm.isAdd = false;
|
||||
} else {
|
||||
this.managerForm.isAdd = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div style="padding: 10px 0">
|
||||
<el-input style="width: 150px;margin-left: 0.5%" placeholder="编号" v-model="searchForm.value"></el-input>
|
||||
<el-input style="width: 150px;margin-left: 0.5%" placeholder="名称" v-model="searchForm.text"></el-input>
|
||||
<el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="network">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 搜索 </span>
|
||||
</el-button>
|
||||
<el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="reNetwork">
|
||||
<el-icon>
|
||||
<Refresh/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 重置 </span>
|
||||
</el-button>
|
||||
<el-button type="primary" style="margin-top: 5px;margin-top: 0px;" @click="addItem">
|
||||
<el-icon>
|
||||
<plus/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 新增 </span>
|
||||
</el-button>
|
||||
<el-button type="danger" style="margin-top: 5px;margin-top: 0px;" @click="deleteSelect(null)">
|
||||
<el-icon>
|
||||
<delete/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 删除 </span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border
|
||||
highlight-current-row="true"
|
||||
style="width: 100%;"
|
||||
:height=myHeight
|
||||
@selection-change="handleSelectionChange"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<el-table-column :resizable="false" fixed type="selection" width="50" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" fixed prop="value" label="编号" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" fixed prop="text" label="名称" align="center"></el-table-column>
|
||||
<el-table-column :resizable="false" prop="right" label="操作" width="130" align="center">
|
||||
<template v-slot="scope">
|
||||
<el-button style="width: 48%;margin-left: 1%;margin-top: 2%" @click="editThis(scope.row)" type="warning"
|
||||
size="default"
|
||||
:icon="Edit">
|
||||
</el-button>
|
||||
<el-button style="width: 48%;margin-left: 2%;margin-top: 2%" @click="deleteSelect(scope.row)" type="danger"
|
||||
size="default" :icon="Delete">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-config-provider :locale="locale">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="searchForm.pageNum"
|
||||
:page-sizes="[ 10, 50, 100]"
|
||||
:page-size="searchForm.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="searchForm.total">
|
||||
</el-pagination>
|
||||
</el-config-provider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog title="操作" v-model="managerShow" width="30%" top="5%"
|
||||
destroy-on-close
|
||||
draggable="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form :model="editThisRow" size="medium" :rules="rules" ref="editThisRow">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="编号" :label-width="formLabelWidth" prop="value">
|
||||
<el-input type="number" v-model="editThisRow.value" autocomplete="off"
|
||||
:disabled="!editThisRow.isAdd"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="名称" :label-width="formLabelWidth" prop="text">
|
||||
<el-input v-model="editThisRow.text" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="managerShow=false"> 取消</el-button>
|
||||
<el-button type="primary" @click="toSaveData()"> 确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import {
|
||||
selectComNoPage,
|
||||
checkValue,
|
||||
saveData,
|
||||
deleteComNo, checkACarNo, commitCarUser
|
||||
} from "../../../util/api/api.js";
|
||||
import {Delete, Edit} from '@element-plus/icons-vue'
|
||||
import {ElMessage} from "element-plus/es";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import qs from "qs";
|
||||
|
||||
export default {
|
||||
name: "Manager",
|
||||
data() {
|
||||
return {
|
||||
Delete,
|
||||
Edit,
|
||||
locale: zhCn,
|
||||
tableData: [],
|
||||
searchForm: {
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
value: '',
|
||||
text: ''
|
||||
},
|
||||
formLabelWidth: '130px',
|
||||
myHeight: 500,
|
||||
tableLoading: false,
|
||||
managerShow: false,
|
||||
comManagerShow: false,
|
||||
editThisRow: {},
|
||||
multipleSelection: [],
|
||||
rules: {
|
||||
value: [{required: true, validator: this.checkId, trigger: 'blur'}],
|
||||
text: [{required: true, message: '请选择车牌颜色', trigger: 'blur'}],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkId(rule, value, callback) {
|
||||
if (this.editThisRow.isAdd) {
|
||||
if (value == null || value == '') {
|
||||
callback(new Error('请输入编号'))
|
||||
} else {
|
||||
checkValue(qs.stringify({
|
||||
value: value
|
||||
})).then((res) => {
|
||||
if (res) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('该编号已存在'))
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
handleSelectionChange(row) { //批量删除选择的数据
|
||||
this.multipleSelection = row
|
||||
},
|
||||
deleteSelect(row) {
|
||||
let ids = [];
|
||||
if (row != null) {
|
||||
ids[0] = row.value
|
||||
} else {
|
||||
ids = this.multipleSelection.map(v => v.value)
|
||||
}
|
||||
if (ids.length == 0) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '请选择要删除的数据！',
|
||||
type: 'warning',
|
||||
})
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
'是否批量删除' + ids.length + '条数据？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
deleteComNo(ids).then((res) => {
|
||||
if (res) {
|
||||
ElMessage({
|
||||
message: res + '条删除成功！',
|
||||
type: 'success',
|
||||
})
|
||||
this.network()
|
||||
this.$emit('reload')
|
||||
} else {
|
||||
ElMessage.error('删除失败！')
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消！',
|
||||
})
|
||||
})
|
||||
},
|
||||
editThis(row) {
|
||||
this.editThisRow = row
|
||||
this.editThisRow.isAdd = false;
|
||||
this.managerShow = true;
|
||||
},
|
||||
addItem() {
|
||||
this.editThisRow.isAdd = true;
|
||||
this.managerShow = true;
|
||||
},
|
||||
toSaveData() {
|
||||
this.$refs['editThisRow'].validate((valid) => {
|
||||
if (valid) {
|
||||
saveData(this.editThisRow).then((res) => {
|
||||
if (res) {
|
||||
ElMessage.success('操作成功!')
|
||||
this.managerShow = false;
|
||||
this.editThisRow = {};
|
||||
this.$emit('reload')
|
||||
} else {
|
||||
ElMessage.error('操作失败!')
|
||||
}
|
||||
this.network()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
reNetwork() {
|
||||
this.searchForm = {
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
value: '',
|
||||
text: ''
|
||||
};
|
||||
this.network()
|
||||
},
|
||||
network() {
|
||||
this.tableLoading = true;
|
||||
selectComNoPage(this.searchForm).then((res) => {
|
||||
if (res.records != null) {
|
||||
this.tableData = res.records;
|
||||
this.searchForm.total = res.total;
|
||||
this.searchForm.pageNum = res.current;
|
||||
this.searchForm.pageSize = res.size;
|
||||
} else {
|
||||
ElMessage.error('查询失败！')
|
||||
}
|
||||
this.tableLoading = false;
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) { //页大小改变
|
||||
this.searchForm.pageSize = val
|
||||
this.network()
|
||||
},
|
||||
handleCurrentChange(val) { //当前页改变
|
||||
this.searchForm.pageNum = val
|
||||
this.network()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.network();
|
||||
this.myHeight = (document.documentElement.clientHeight) * 0.5;
|
||||
},
|
||||
beforeUnmount() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,250 +0,0 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="8" v-if="!justShow">
|
||||
<el-form-item label="设备列表" label-width="80px">
|
||||
<el-select v-model="devName" class="m-2" clearable
|
||||
@change="toConnectGPY"
|
||||
style="width: 100%;">
|
||||
<el-option
|
||||
label="未连接"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
v-for="(item,i) in devNameList"
|
||||
:label="item"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" v-if="!justShow">
|
||||
<el-button type="primary" style="margin-left: 5%;margin-top: 0px;" @click="connectGpy"
|
||||
:disabled="gpyConnect"
|
||||
>
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<Link/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 连接高拍仪 </span>
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="5" v-if="!justShow">
|
||||
<el-button type="primary" style="margin-left: 5%;margin-top: 0px;" @click="addImgList"
|
||||
>
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<Link/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 增加图片 </span>
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="!justShow" v-loading="gpyLoading">
|
||||
<div style="width: 100%" align="center">
|
||||
<div id='CameraCtl' :style="CameraStyle"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height: 5px"></div>
|
||||
</el-col>
|
||||
<el-scrollbar ref="scrollbar" :height="scrollbarHeight" style="width: 100%">
|
||||
<el-row ref="rowRef" style="width: 100%">
|
||||
<el-col :span="12" v-for="(item,i) in imgList">
|
||||
<div ref="imgRef">
|
||||
<el-row>
|
||||
<el-col :span="7" v-if="!justShow">
|
||||
<div align="center">
|
||||
<el-button type="primary" style="margin-left: 0.5%;margin-top: 5px;" @click="getImgStr(i)"
|
||||
:disabled="!gpyConnect"
|
||||
>
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<CameraFilled/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 拍照{{ i + 1 }} </span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7" v-if="!justShow">
|
||||
<div align="center">
|
||||
<el-upload
|
||||
:limit="1"
|
||||
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
|
||||
id="upload"
|
||||
:show-file-list="false"
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
:on-change="onUploadChange"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button type="primary" style="margin-left: 10%;margin-top: 5px;" @click="onChange(i)">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<Upload/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 上传 </span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7" v-if="!justShow">
|
||||
<div align="center">
|
||||
<el-button type="danger" style="margin-left: 10%;margin-top: 5px;" @click="deleteImgStr(i)">
|
||||
<el-icon>
|
||||
<delete/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 删除 </span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div style="height: 5px"></div>
|
||||
</el-col>
|
||||
<el-col :span="23">
|
||||
<div align="center" class="imgDiv" :style="imgStyle">
|
||||
<img :src="item" :style="imgStyle" :alt="'图片'+(i+1)" v-if="item!=''"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</el-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Cam_ControlInit,
|
||||
Cam_Photo,
|
||||
CloseConnect,
|
||||
} from '@/plugins/kmGPY/gpyhs';
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
name: "gpy",
|
||||
data() {
|
||||
return {
|
||||
justShow: false,
|
||||
gpyConnect: false,
|
||||
gpyLoading: false,
|
||||
imgStrNum: 0,
|
||||
imgIndex: 0,
|
||||
scrollbarHeight:'220px',
|
||||
CameraStyle: '',
|
||||
imgStyle: '',
|
||||
devNameList: [],
|
||||
devName: '',
|
||||
imgList: ['', ''],
|
||||
imgSrc: '',
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imgSrc: {
|
||||
deep: true,
|
||||
handler(newValue, oldValue) {
|
||||
this.imgList[this.imgStrNum] = newValue;
|
||||
console.log("总合 sum 变化：", newValue, oldValue);
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addImgList() {
|
||||
if (this.imgList.length < 10) {
|
||||
this.imgList[this.imgList.length] = ''
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.scrollbar.setScrollTop(this.$refs.rowRef.clientHeight)
|
||||
this.$refs.scrollbar.setScrollTop(99999)
|
||||
})
|
||||
} else {
|
||||
ElMessage.error('最多只能添加十张！')
|
||||
}
|
||||
|
||||
},
|
||||
getImgStr(num) {
|
||||
this.imgStrNum = num;
|
||||
Cam_Photo("");
|
||||
},
|
||||
onChange(num) {
|
||||
this.imgIndex = num;
|
||||
},
|
||||
onUploadChange(file, fileList) {
|
||||
const _this = this;
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file.raw);
|
||||
reader.onload = () => {
|
||||
_this.imgList[_this.imgIndex] = reader.result;
|
||||
};
|
||||
},
|
||||
showMessage(message) {
|
||||
ElMessage.error(message)
|
||||
},
|
||||
deleteImgStr(num) {
|
||||
this.imgList.splice(num,1);
|
||||
},
|
||||
setImgSrc(src1, src2, src3, src4, src5, src6, src7, src8, src9, src10) {
|
||||
this.setImgList(src1, 0);
|
||||
this.setImgList(src2, 1);
|
||||
this.setImgList(src3, 2);
|
||||
this.setImgList(src4, 3);
|
||||
this.setImgList(src5, 4);
|
||||
this.setImgList(src6, 5);
|
||||
this.setImgList(src7, 6);
|
||||
this.setImgList(src8, 7);
|
||||
this.setImgList(src9, 8);
|
||||
this.setImgList(src10, 9);
|
||||
},
|
||||
setImgList(src, i) {
|
||||
if (src != null) {
|
||||
this.imgList[i] = 'data:image/png;base64,' + src
|
||||
}
|
||||
},
|
||||
closePage() {
|
||||
CloseConnect();
|
||||
},
|
||||
toConnectGPY() {
|
||||
if (this.devName != null && this.devName != '') {
|
||||
this.gpyLoading = true
|
||||
const height = document.documentElement.clientHeight * 0.4;
|
||||
const width = height / 9 * 16;
|
||||
this.imgStyle = 'height:' + height * 0.45 + 'px;';
|
||||
this.CameraStyle = 'width:' + width + 'px;height:' + height + 'px';
|
||||
Cam_ControlInit(document.getElementById("CameraCtl"), 0, 0, width, height, this, false);
|
||||
}
|
||||
},
|
||||
connectGpy() {
|
||||
this.gpyLoading = true
|
||||
const height = document.documentElement.clientHeight * 0.4;
|
||||
const width = height / 9 * 16;
|
||||
Cam_ControlInit(document.getElementById("CameraCtl"), 0, 0, width, height, this, true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!window.WebSocket) {
|
||||
alert("浏览器不支持HTML5,请更新浏览器或者使用其它浏览器");
|
||||
}
|
||||
const height = document.documentElement.clientHeight * 0.4;
|
||||
const width = height / 9 * 16;
|
||||
this.imgStyle = 'height:' + height * 0.45 + 'px;';
|
||||
this.CameraStyle = 'width:' + width + 'px;height:' + height + 'px';
|
||||
this.$nextTick(() => {
|
||||
if(this.justShow){
|
||||
this.scrollbarHeight=(this.$refs.imgRef[0].clientHeight*2)+'px'
|
||||
}else{
|
||||
this.scrollbarHeight=(this.$refs.imgRef[0].clientHeight*1.3)+'px'
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
CloseConnect();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.imgDiv {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<div :id="echartsId" style="width:100%;height: 350px" v-loading="loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import {getNumAndCashOfType} from "../../../util/api/api.js";
|
||||
export default {
|
||||
name: "carTypeFee",
|
||||
data(){
|
||||
return{
|
||||
echartsId:'',
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
props:['echartsId'],
|
||||
methods: {
|
||||
initOption(echartsData) {
|
||||
let dataAxis = echartsData.dataAxis;
|
||||
let data = echartsData.data;
|
||||
let myChart = this.$echarts.init(document.getElementById(this.echartsId))
|
||||
// 绘制图表
|
||||
this.option = {
|
||||
title: {
|
||||
text: '各车型收费金额(万元)',
|
||||
},
|
||||
grid:{
|
||||
left:'5%',
|
||||
right:'5%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
// var HTMLSTR = (params.seriesName == null ? "" : params.seriesName) + "<br/>";
|
||||
var HTMLSTR = "";
|
||||
HTMLSTR += "<table cellpadding='5px'>"
|
||||
HTMLSTR += "<tr><td align='left'>" + params[0].marker + "</span>"
|
||||
+ params[0].name + ':';
|
||||
HTMLSTR += "</td><td align ='right'>"
|
||||
+ params[0].value + "万元</td></tr>";
|
||||
return HTMLSTR;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
z: 10,
|
||||
axisLabel: { //设置x轴的字
|
||||
show:true,
|
||||
interval:0,//使x轴横坐标全部显示
|
||||
// formatter: function (value, index) {
|
||||
// return value;
|
||||
// }
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#188df0'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize:14,
|
||||
color:'black',
|
||||
formatter:'{c}万'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#2378f7'},
|
||||
{offset: 0.5, color: '#2378f7'},
|
||||
{offset: 1, color: '#83bff6'}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
initEcharts(echartsData) {
|
||||
var dataAxis = [];
|
||||
var data = [];
|
||||
if (echartsData != null && echartsData.length > 0) {
|
||||
for (var i = 0; i < echartsData.length; i++) {
|
||||
let item = echartsData[i];
|
||||
dataAxis[i] = item.TEXT
|
||||
data[i] = (item.CASH / 1000000).toFixed(2)
|
||||
}
|
||||
} else {
|
||||
dataAxis[i] = '无数据'
|
||||
data[i] ='0.00'
|
||||
}
|
||||
this.echartsId = this.$props.echartsId
|
||||
this.initOption({
|
||||
dataAxis:dataAxis,
|
||||
data:data
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div :id="echartsId" style="width: 100%;height: 350px" v-loading="loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "carTypePie",
|
||||
data() {
|
||||
return {
|
||||
echartsId: '',
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
props: ['echartsId'],
|
||||
methods: {
|
||||
initOption(data) {
|
||||
let myChart = this.$echarts.init(document.getElementById(this.echartsId))
|
||||
// 绘制图表
|
||||
this.option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '车型占比',
|
||||
type: 'pie',
|
||||
right: "-20%",
|
||||
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
||||
radius: ['40%', '70%'],
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter:'{b}({c})',
|
||||
// position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
initEcharts(echartsData) {
|
||||
var data = [];
|
||||
if (echartsData != null && echartsData.length > 0) {
|
||||
for (var i=0;i<echartsData.length;i++) {
|
||||
let item = echartsData[i];
|
||||
data.push({
|
||||
value: item.CARCOUNT,
|
||||
name: item.TEXT
|
||||
})
|
||||
}
|
||||
}else{
|
||||
data.push({
|
||||
value: 0,
|
||||
name: '无数据'
|
||||
})
|
||||
}
|
||||
this.echartsId = this.$props.echartsId
|
||||
this.initOption(data)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<div :id="echartsId" style="width:100%;height: 350px" v-loading="loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: "portNumBar",
|
||||
data() {
|
||||
return {
|
||||
echartsId: '',
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
props: ['echartsId'],
|
||||
methods: {
|
||||
initOption(echartsData) {
|
||||
let dataAxis = echartsData.dataAxis;
|
||||
let data = echartsData.data;
|
||||
let myChart = this.$echarts.init(document.getElementById(this.echartsId))
|
||||
// 绘制图表
|
||||
this.option = {
|
||||
title: {
|
||||
text: '车道车流量排名',
|
||||
},
|
||||
grid:{
|
||||
left:'5%',
|
||||
right:'5%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
// var HTMLSTR = (params.seriesName == null ? "" : params.seriesName) + "<br/>";
|
||||
var HTMLSTR = "";
|
||||
HTMLSTR += "<table cellpadding='5px'>"
|
||||
HTMLSTR += "<tr><td align='left'>" + params[0].marker + "</span>"
|
||||
+ params[0].name + ':';
|
||||
HTMLSTR += "</td><td align ='right'>"
|
||||
+ params[0].value + "辆</td></tr>";
|
||||
return HTMLSTR;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
z: 10,
|
||||
axisLabel: { //设置x轴的字
|
||||
show:true,
|
||||
interval:0,//使x轴横坐标全部显示
|
||||
// formatter: function (value, index) {
|
||||
// return value;
|
||||
// }
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#188df0'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize:14,
|
||||
color:'black',
|
||||
formatter:'{c}辆'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#2378f7'},
|
||||
{offset: 0.7, color: '#2378f7'},
|
||||
{offset: 1, color: '#83bff6'}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
initEcharts(echartsData) {
|
||||
var dataAxis = [];
|
||||
var data = [];
|
||||
if (echartsData != null && echartsData.length > 0) {
|
||||
for (var i = 0; i < echartsData.length; i++) {
|
||||
let item = echartsData[i];
|
||||
dataAxis[i] = item.STANAME+'\n'+item.PORTNO+'车道'
|
||||
data[i] = item.CARCOUNT
|
||||
}
|
||||
} else {
|
||||
dataAxis[i] = '无数据'
|
||||
data[i] ='0'
|
||||
}
|
||||
this.echartsId = this.$props.echartsId
|
||||
this.initOption({
|
||||
dataAxis:dataAxis,
|
||||
data:data
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<div :id="echartsId" style="width:100%;height: 350px" v-loading="loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: "portSuccRate",
|
||||
data() {
|
||||
return {
|
||||
echartsId: '',
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
props: ['echartsId'],
|
||||
methods: {
|
||||
initOption(echartsData) {
|
||||
let dataAxis = echartsData.dataAxis;
|
||||
let data = echartsData.data;
|
||||
let myChart = this.$echarts.init(document.getElementById(this.echartsId))
|
||||
// 绘制图表
|
||||
this.option = {
|
||||
title: {
|
||||
text: '车道车牌识别成功率排名',
|
||||
},
|
||||
grid:{
|
||||
left:'5%',
|
||||
right:'5%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
// var HTMLSTR = (params.seriesName == null ? "" : params.seriesName) + "<br/>";
|
||||
var HTMLSTR = "";
|
||||
HTMLSTR += "<table cellpadding='5px'>"
|
||||
HTMLSTR += "<tr><td align='left'>" + params[0].marker + "</span>"
|
||||
+ params[0].name + ':';
|
||||
HTMLSTR += "</td><td align ='right'>"
|
||||
+ params[0].value + "%</td></tr>";
|
||||
return HTMLSTR;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
z: 10,
|
||||
axisLabel: { //设置x轴的字
|
||||
show:true,
|
||||
interval:0,//使x轴横坐标全部显示
|
||||
// formatter: function (value, index) {
|
||||
// return value;
|
||||
// }
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#188df0'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize:14,
|
||||
color:'black',
|
||||
formatter:'{c}%'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{offset: 0, color: '#2378f7'},
|
||||
{offset: 0.7, color: '#2378f7'},
|
||||
{offset: 1, color: '#83bff6'}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
initEcharts(echartsData) {
|
||||
var dataAxis = [];
|
||||
var data = [];
|
||||
if (echartsData != null && echartsData.length > 0) {
|
||||
for (var i = 0; i < echartsData.length; i++) {
|
||||
let item = echartsData[i];
|
||||
dataAxis[i] = item.STANAME+'\n'+item.PORTNO+'车道'
|
||||
data[i] = item.SUCCESSRATE
|
||||
}
|
||||
} else {
|
||||
dataAxis[i] = '无数据'
|
||||
data[i] ='0'
|
||||
}
|
||||
this.echartsId = this.$props.echartsId
|
||||
this.initOption({
|
||||
dataAxis:dataAxis,
|
||||
data:data
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div class="demo-collapse">
|
||||
<el-affix :offset="0">
|
||||
<div style="padding: 10px 0">
|
||||
<el-date-picker
|
||||
v-model="timeSpan"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="日期"
|
||||
style="width: 185px;margin-left: 0.5%"
|
||||
/>
|
||||
<el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="collapseChange">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search/>
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;"> 搜索 </span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-affix>
|
||||
<el-collapse v-model="activeNames" @change="collapseChange">
|
||||
<el-collapse-item name="1">
|
||||
<template #title>
|
||||
<span class="collapseTitle"> 台格站车型</span>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<div style="width: 20px"></div>
|
||||
<el-col :span="8">
|
||||
<el-card style="width: 100%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>车型占比</span>
|
||||
</div>
|
||||
</template>
|
||||
<carTypePie ref="taiGeCarTypePie" :echartsId="'taiGeCarTypePie'"></carTypePie>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-card style="width:100%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>各车型收费金额</span>
|
||||
</div>
|
||||
</template>
|
||||
<carTypeFee ref="taiGeCarTypeFee" :echartsId="'taiGeCarTypeFee'"></carTypeFee>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="2">
|
||||
<template #title>
|
||||
<span class="collapseTitle"> 嘎鲁图站车型</span>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<div style="width: 20px"></div>
|
||||
<el-col :span="8">
|
||||
<el-card style="width: 100%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>车型占比</span>
|
||||
</div>
|
||||
</template>
|
||||
<carTypePie ref="gaLuTuCarTypePie" :echartsId="'gaLuTuCarTypePie'"></carTypePie>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<el-card style="width:100%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>各车型收费金额</span>
|
||||
</div>
|
||||
</template>
|
||||
<carTypeFee ref="gaLuTuCarTypeFee" :echartsId="'gaLuTuTypeFee'"></carTypeFee>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="3">
|
||||
<template #title>
|
||||
<span class="collapseTitle"> 车道车流量排名</span>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<div style="width: 20px"></div>
|
||||
<el-col :span="23">
|
||||
<el-card style="width:100%">
|
||||
<portNumBar ref="portNumBar" :echartsId="'portNumBar'"></portNumBar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="4">
|
||||
<template #title>
|
||||
<span class="collapseTitle"> 车道车牌识别成功率排名</span>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<div style="width: 20px"></div>
|
||||
<el-col :span="23">
|
||||
<el-card style="width:100%">
|
||||
<portSuccRate ref="portSuccRate" :echartsId="'portSuccRate'"></portSuccRate>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import carTypePie from './Echarts/carTypePie.vue';
|
||||
import carTypeFee from './Echarts/carTypeFee.vue';
|
||||
import portNumBar from './Echarts/portNumBar.vue';
|
||||
import portSuccRate from './Echarts/portSuccRate.vue';
|
||||
import {getNumAndCashOfType} from "../../util/api/api.js";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "showStanEcharts",
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['0', '1', '2', '3', '4'],
|
||||
timeSpan: moment(new Date()).format('YYYY-MM-DD'),
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
collapseChange() {
|
||||
this.changeLoading(true);
|
||||
let activeNames = this.activeNames;
|
||||
getNumAndCashOfType({
|
||||
timeSpan: this.timeSpan
|
||||
}).then((res) => {
|
||||
const carTypeMap = res.carTypeMap;
|
||||
const CarNumOfPort = res.CarNumOfPort;
|
||||
const SuccessRate = res.SuccessRate;
|
||||
const taiGe = carTypeMap['9691'];
|
||||
const gaLuTu = carTypeMap['9692'];
|
||||
for (let name in activeNames) {
|
||||
if (name == '0') {
|
||||
this.$refs.taiGeCarTypePie.initEcharts(taiGe);
|
||||
this.$refs.taiGeCarTypeFee.initEcharts(taiGe);
|
||||
}
|
||||
if (name == '1') {
|
||||
this.$refs.gaLuTuCarTypePie.initEcharts(gaLuTu);
|
||||
this.$refs.gaLuTuCarTypeFee.initEcharts(gaLuTu);
|
||||
}
|
||||
if (name == '2') {
|
||||
this.$refs.portNumBar.initEcharts(CarNumOfPort);
|
||||
}
|
||||
if (name == '3') {
|
||||
this.$refs.portSuccRate.initEcharts(SuccessRate);
|
||||
}
|
||||
}
|
||||
this.changeLoading(false);
|
||||
})
|
||||
},
|
||||
changeLoading(loading) {
|
||||
this.$refs.taiGeCarTypePie.loading=loading;
|
||||
this.$refs.taiGeCarTypeFee.loading=loading;
|
||||
this.$refs.gaLuTuCarTypePie.loading=loading;
|
||||
this.$refs.gaLuTuCarTypeFee.loading=loading;
|
||||
this.$refs.portNumBar.loading=loading;
|
||||
this.$refs.portSuccRate.loading=loading;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
carTypePie,
|
||||
carTypeFee,
|
||||
portNumBar,
|
||||
portSuccRate
|
||||
},
|
||||
mounted() {
|
||||
this.collapseChange();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.collapseTitle {
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue