363 lines
12 KiB
Vue
363 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
v-hasPermi="['system:config:add']"
|
||
icon="el-icon-plus"
|
||
plain
|
||
size="mini"
|
||
type="primary"
|
||
@click="handleAdd"
|
||
>添加模版
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
v-hasPermi="['system:config:export']"
|
||
icon="el-icon-download"
|
||
plain
|
||
size="mini"
|
||
type="warning"
|
||
@click="handleDel"
|
||
>删除
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
v-hasPermi="['system:config:export']"
|
||
icon="el-icon-download"
|
||
plain
|
||
size="mini"
|
||
type="warning"
|
||
@click="handleExport"
|
||
>导出
|
||
</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<!--容量-->
|
||
<el-container>
|
||
<el-aside width="200px">
|
||
<div v-for="template in templateList" v-if="templateList.length!=0">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span style="font-size: 18px;font-weight: 900;">{{ template.templateName}}</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text" @click="templateConfiguration(template.templateId)">模版配置</el-button>
|
||
</div>
|
||
<div v-for="o in 1" :key="o" class="text item">
|
||
{{template.templateDescribe}}
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</el-aside>
|
||
<el-container>
|
||
<el-header >
|
||
<el-form :model="form">
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="报文类别" label-width="150px">
|
||
<el-select v-model="form.messageClass" placeholder="请选择活动区域" label-width="150px">
|
||
<el-option label="车辆基础" value="vehicleFoundation"></el-option>
|
||
<el-option label="车辆数据" value="vehicleData"></el-option>
|
||
<el-option label="设备状态" value="deviceStatus"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="编码" label-width="150px">
|
||
<el-input v-model="form.messageCode" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="标签" label-width="150px">
|
||
<el-input v-model="form.messageField" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="起始位" label-width="150px">
|
||
<el-input v-model="form.startIndex" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="终止位" label-width="150px">
|
||
<el-input v-model="form.endIndex" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据类型ID" label-width="150px">
|
||
<el-select v-model="form.dataTypeId" placeholder="请选择" @change="changeDataType(form.dataTypeId)">
|
||
<el-option
|
||
v-for="item in dataTypeList"
|
||
:key="item.dataTypeId"
|
||
:label="item.dataTypeName"
|
||
:value="item.dataTypeId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="最小值" label-width="150px" v-show="start">
|
||
<el-input v-model="form.fixedValue" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最大值" label-width="150px" v-show="start">
|
||
<el-input v-model="form.rangeValue" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-button type="primary" @click="addMessageType">确 定</el-button>
|
||
</el-row>
|
||
</el-form>
|
||
</el-header>
|
||
<br>
|
||
<br>
|
||
<el-main>
|
||
<template>
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="车辆基础" name="vehicleFoundation">
|
||
<template>
|
||
<el-table
|
||
:data="vehicleFoundationData"
|
||
stripe
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="messageCode"
|
||
label="编码"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="messageField"
|
||
label="标签"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="startIndex"
|
||
label="起始位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="endIndex"
|
||
label="终止位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="数据类型ID">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.dataTypeId==1">
|
||
<el-tag size="small">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
<span v-if="scope.row.dataTypeId==2">
|
||
<el-tag size="small" type="danger">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="车辆数据" name="vehicleData">
|
||
|
||
<template>
|
||
<el-table
|
||
:data="vehicleData"
|
||
stripe
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="messageCode"
|
||
label="编码"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="messageField"
|
||
label="标签"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="startIndex"
|
||
label="起始位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="endIndex"
|
||
label="终止位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="数据类型ID">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.dataTypeId==1">
|
||
<el-tag size="small">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
<span v-if="scope.row.dataTypeId==2">
|
||
<el-tag size="small" type="danger">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="设备状态" name="deviceStatus">
|
||
<template>
|
||
<el-table
|
||
:data="deviceStatusData"
|
||
stripe
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="messageCode"
|
||
label="编码"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="messageField"
|
||
label="标签"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="startIndex"
|
||
label="起始位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="endIndex"
|
||
label="终止位">
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="数据类型ID">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.dataTypeId==1">
|
||
<el-tag size="small">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
<span v-if="scope.row.dataTypeId==2">
|
||
<el-tag size="small" type="danger">{{scope.row.dataTypeName}}</el-tag>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</template>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {
|
||
addMessageTemplate,
|
||
findDataTypeList, finddeviceStatusData, findvehicleData,
|
||
findvehicleFoundationData,
|
||
messageTemplateTypeList,
|
||
templateList
|
||
} from '@/api/saas/saas'
|
||
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
return {
|
||
tableData:[],
|
||
dialogTableVisible: false,
|
||
dialogFormVisible: false,
|
||
form:{},
|
||
dataTypeList:[],
|
||
start:false,
|
||
templateList:[],
|
||
activeName:'',
|
||
vehicleFoundationData:[],
|
||
vehicleData:[],
|
||
deviceStatusData:[],
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
//点击模版配置查看相应的模版
|
||
templateConfiguration(templatedId){
|
||
alert(templatedId)
|
||
var code="vehicleFoundation";
|
||
var code1="vehicleData";
|
||
var code2="deviceStatus";
|
||
findvehicleFoundationData(templatedId,code).then(res=>{
|
||
if(res.code==200){
|
||
this.vehicleFoundationData=res.data;
|
||
}
|
||
}),
|
||
findvehicleData(templatedId,code1).then(res=>{
|
||
if(res.code==200){
|
||
this.vehicleData=res.data;
|
||
}
|
||
}),
|
||
finddeviceStatusData(templatedId,code2).then(res=>{
|
||
if(res.code==200){
|
||
this.deviceStatusData=res.data;
|
||
}
|
||
})
|
||
},
|
||
findTemplateList(){
|
||
templateList().then(res=>{
|
||
if(res.code==200){
|
||
this.templateList=res.data;
|
||
}
|
||
})
|
||
},
|
||
addMessageType(){
|
||
addMessageTemplate(this.form).then(res=>{
|
||
if(res.code==200){
|
||
alert("添加成功");
|
||
this.dialogFormVisible=false;
|
||
this.findMessageList();
|
||
}
|
||
})
|
||
},
|
||
findDataTypeList(){
|
||
findDataTypeList().then(res=>{
|
||
if(res.code==200){
|
||
this.dataTypeList=res.data;
|
||
}
|
||
})
|
||
},
|
||
findMessageList(){
|
||
messageTemplateTypeList().then(res=>{
|
||
if(res.code==200){
|
||
this.tableData=res.data;
|
||
}
|
||
})
|
||
},
|
||
handleAdd(){
|
||
this.dialogFormVisible=true;
|
||
},
|
||
changeDataType(dataTypeId){
|
||
if(dataTypeId==1){
|
||
this.start=true;
|
||
}
|
||
|
||
}
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.findMessageList();
|
||
this.findDataTypeList();
|
||
this.findTemplateList();
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|