<!-- 地图表单组件 -->
|
<template>
|
<view class="m-form">
|
<view class="m-form-head"><u-icon name="close-circle" color="#fff" size="40" @click="cancel"></u-icon></view>
|
<!-- 添加 -->
|
<view class="m-form-label" v-if="mapType == 'add'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100" :labelStyle="{'color':'rgb(129, 129, 129)'}">
|
<u-form-item label="地图名称" prop="mapname" borderBottom ref="item" @click="chooseImage">
|
<u--input readonly :customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}" placeholderStyle="color:#000" color="#000" v-model="model.mapname" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="X实长" prop="x_Truelength" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.x_Truelength"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="Y实长" prop="y_Truewidth" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.y_Truewidth"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="X0坐标" prop="x0_length" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.x0_length"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="Y0坐标" prop="y0_width" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.y0_width"
|
border="none"
|
></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<!-- 修改 -->
|
<view class="m-form-label" v-if="mapType == 'update'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100" :labelStyle="{'color':'rgb(129, 129, 129)'}">
|
<u-form-item label="地图名称" prop="mapname" borderBottom ref="item">
|
<u--input readonly :customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}" placeholderStyle="color:#000" color="#000" v-model="model.mapname" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="X实长" prop="x_Truelength" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.x_Truelength"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="Y实长" prop="y_Truewidth" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.y_Truewidth"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="X0坐标" prop="x0_length" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.x0_length"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="Y0坐标" prop="y0_width" borderBottom ref="item">
|
<u--input
|
type="number"
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.y0_width"
|
border="none"
|
></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="m-form-button-list"><u-button type="primary" text="确定" @click="save"></u-button></view>
|
</view>
|
</template>
|
|
<script>
|
import { connChart,chooseImage,chooseFile,decompress } from '../../../common/utils.js';
|
import {BASE_URL} from '../../../common/request.js';
|
import {formatDate} from '../../../common/tools.js'
|
export default {
|
props: {
|
mapType: String,
|
mapFormData: Object
|
},
|
data() {
|
return {
|
model: {
|
floor: '',
|
mapname: '',
|
x_Truelength: '',
|
y_Truewidth: '',
|
x0_length: '',
|
y0_width: '',
|
x_Pixel: '',
|
y_Pixel: '',
|
filename:'',
|
filepath:'',
|
minzoom:'',
|
maxzoom:'',
|
},
|
rules: {
|
index: {
|
type: 'string',
|
required: true,
|
message: '请填写名称',
|
trigger: ['blur', 'change']
|
}
|
},
|
file: null,
|
labelModel:null
|
};
|
},
|
methods: {
|
//保存
|
save() {
|
if (this.mapType == 'add') {
|
//添加
|
this.labelModel.insert({
|
addTime:formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'),
|
mapname: this.model.mapname,
|
filename: this.model.filename,
|
filepath: this.model.filepath,
|
minzoom: this.model.minzoom,
|
maxzoom: this.model.maxzoom,
|
x_Truelength: this.model.x_Truelength,
|
y_Truewidth: this.model.y_Truewidth,
|
x0_length: this.model.x0_length,
|
y0_width: this.model.y0_width,
|
}, (err, results) => {
|
console.log(err);
|
console.log(results);
|
this.$emit('submitMapForm');
|
});
|
} else if (this.mapType == 'update') {
|
this.labelModel.update(`id='${this.model.id}'`,{
|
mapname: this.model.mapname,
|
x_Truelength: this.model.x_Truelength,
|
y_Truewidth: this.model.y_Truewidth,
|
x0_length: this.model.x0_length,
|
y0_width: this.model.y0_width,
|
},(err,results)=>{
|
console.log(err,results);
|
this.$emit('submitMapForm');
|
});
|
}
|
},
|
//取消
|
cancel() {
|
this.$emit('cancelMapForm');
|
},
|
chooseImage() {
|
//选择文件
|
chooseFile().then(res=>{
|
//解压缩包
|
decompress(res.name,res.path).then(resp=>{
|
this.model.filename=res.name
|
this.model.mapname=res.name
|
this.model.filepath=re.path
|
this.model.minzoom=resp.dirList[0]
|
this.model.maxzoom=resp.dirList[resp.dirList.length-1]
|
})
|
})
|
|
},
|
connDB() {
|
this.labelModel = connChart('map')
|
}
|
},
|
mounted() {
|
if (this.mapType == 'update') {
|
this.model = this.mapFormData;
|
}
|
this.connDB()
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.m-form {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgba(233, 233, 233,0.8);
|
width: 60%;
|
display: flex;
|
flex-direction: column;
|
z-index: 99999;
|
}
|
.m-form-head {
|
width: 100%;
|
border-bottom: 1px solid #fff;
|
}
|
.m-form-head .u-icon {
|
float: right;
|
}
|
/deep/ .u-form-item__body__left__content__label {
|
color: #fff;
|
}
|
.m-form-label {
|
width: 80%;
|
margin: 0 auto;
|
margin-bottom: 0.5em;
|
}
|
input {
|
width: 50px;
|
}
|
.m-form-button-list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 1em;
|
}
|
.m-form-button-list .u-button {
|
width: 5em;
|
}
|
.m-form-button-list .u-button:nth-child(2),
|
.m-form-button-list .u-button:nth-child(3),
|
.m-form-button-list .u-button:nth-child(4) {
|
margin-top: 2em;
|
}
|
</style>
|
