9f16b523 by 焦泽平
2 parents aee9af55 f326cbb9
No preview for this file type
[属性描述]
格式版本号=1.0
数据产生单位=国土资源信息中心
数据产生日期=2013-06-06
坐标系=80国家大地坐标系
几度分带=3
投影类型=高斯克吕格
计量单位=米
带号=36
精度=0.01
转换参数=0,0,0,0,0,0,0
[地块坐标]
24,0.2208,1,南州村0076地块,面,,土地开垦,,@
J1,1,2463703.8585,36531532.3508
J2,1,2463702.9272,36531526.0600
J3,1,2463703.0435,36531520.8176
J4,1,2463705.0225,36531515.5752
J5,1,2463711.3086,36531507.3037
J6,1,2463721.4852,36531497.3517
J7,1,2463734.8724,36531483.0222
J8,1,2463742.5555,36531476.2652
J9,1,2463753.2985,36531471.8972
J10,1,2463761.7966,36531467.0041
J11,1,2463762.1610,36531466.5756
J12,1,2463761.8898,36531473.4882
J13,1,2463758.4897,36531483.3309
J14,1,2463754.5525,36531495.4999
J15,1,2463753.2146,36531498.4235
J16,1,2463738.9903,36531524.8811
J17,1,2463732.0653,36531534.9303
J18,1,2463730.6173,36531539.4498
J19,1,2463725.3825,36531545.7865
J20,1,2463723.4140,36531550.0816
J21,1,2463722.7101,36531553.4604
J22,1,2463721.4368,36531552.6210
J23,1,2463710.3776,36531540.9715
J24,1,2463703.8585,36531532.3508
12,0.0190,2,南洲林场0003地块,面,,土地开垦,,@
J1,1,2463808.0212,36532005.7911
J2,1,2463804.6898,36532002.0500
J3,1,2463806.2514,36531991.6196
J4,1,2463805.5426,36531984.8565
J5,1,2463807.0018,36531981.6012
J6,1,2463809.2139,36531978.2832
J7,1,2463813.1225,36531974.6382
J8,1,2463813.1224,36531990.7858
J9,1,2463812.7449,36532000.9968
J10,1,2463812.3011,36532002.5509
J11,1,2463810.1033,36532005.2700
J12,1,2463808.0212,36532005.7911
\ No newline at end of file
......@@ -217,6 +217,13 @@ export function exportShp(data) {
})
}
export function exportExcel(data) {
return request({
url:"/tx/excelGeo/exportExcelp",
method:"post",
params:data
})
}
/**
* 获取该宗地上的所有自然幢
......@@ -241,3 +248,4 @@ export function ZdHb(data) {
data:data
})
}
......
{
"exprotTextAttr": "[属性描述]\n格式版本号=1.0\n数据产生单位=国土资源信息中心\n数据产生日期=2013-06-06\n坐标系=80国家大地坐标系\n几度分带=3\n投影类型=高斯克吕格\n计量单位=米\n带号=36\n精度=0.01\n转换参数=0,0,0,0,0,0,0\n"
}
\ No newline at end of file
......@@ -58,13 +58,13 @@
>
<li @click="postionToMap">定位</li>
<li @click="importGeo">导入图形</li>
<li @click="exportToShp">
<li>
导出图形
<ul class="contextmenu childUl">
<li>文本</li>
<li>CAD</li>
<li>Excel</li>
<li>ESRI Shape</li>
<li @click="exportText">文本</li>
<li @click="exportCad">CAD</li>
<li @click="exportExcel">Excel</li>
<li @click="exportToShp">ESRI Shape</li>
</ul>
</li>
<li v-show="isZD">导入属性</li>
......@@ -112,12 +112,13 @@
</template>
<script>
import lineItem from "./lineItem.vue";
import {deleteZdInfoByBsm,exportShp} from "../../api/zd";
import {deleteZdInfoByBsm,exportShp,exportExcel} from "../../api/zd";
import Create from "../../views/panel/create/index";
import ImportGeo from './tx/importGeo'
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
import {deleteLjz,deleteZdy} from "./../../api/lpb"
import exportTemJson from '@/assets/json/exportTemplate.json'
export default {
inheritAttrs: false,
props: {
......@@ -456,27 +457,106 @@ export default {
}
});
},
//导出
//导出文本文件
exportText(){
var self = this;
var type = this.zdData.type;
var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM,type,function (features){
if(features && features.length > 0){
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var textCotent = "";
textCotent += exportTemJson.exprotTextAttr;
textCotent += "[地块坐标]\n";
var dkMc = "",dkYt = "";
if(type == 'zd'){
dkMc = data.attributes.ZL;
dkYt = data.attributes.YT;
}else {
dkMc = data.attributes.XMMC + data.attributes.JZWMC ;
dkYt = "建设用地";
}
textCotent += ",,,"+dkMc+",面,,"+dkYt+",,@\n";
for(var i = 0;i < jzdInfo.length;i++){
textCotent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
jzdInfo[i].x+","+jzdInfo[i].y+"\n"
}
self.downloadTxt(textCotent,"outPut.txt");
}
});
},
//导出shp文件
exportToShp(){
var self = this;
var BSM = this.zdData.zdbsm;
var type = this.zdData.type;
var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM,type,function (features){
var data = JSON.stringify(features[0]);
if(features && features.length > 0){
var data = JSON.stringify(features[0]);
window.location.href = "/api/tx/shpUtils/writeShp?strObj="+encodeURI(data)
/*exportShp({
/* exportShp({
"strObj":encodeURI(data)
}).then(res => {
debugger
});*/
}else{
self.$message.warning("暂无空间信息!!!!");
}
});
},
//导出excel
exportExcel(){
var self = this;
var type = this.zdData.type;
var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM,type,function (features) {
if (features && features.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var submitData = [];
for (var i = 0; i < jzdInfo.length; i++) {
var obj = {
jzdHao: jzdInfo[i].jzdh,
x: jzdInfo[i].x,
y: jzdInfo[i].y,
diKuaiQuanHao: jzdInfo.sxh
}
submitData.push(obj);
}
exportExcel(submitData).then((res) => {
if (res.status == 200) {
var path = res.data.result;
window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
}
});
}else {
self.$message.warning("还没有空间信息!!!!")
}
})
},
//导出CAD
exportCad(){
//TODO
},
downloadTxt(text, fileName){
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
//图形定位
postionToMap(){
var type = this.zdData.type;
var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
if(this.$route.path == "/viewMap"){
//定位到当前空间位置
// TODO 这个方法只是为了支撑功能
this.postionToThisGeo(BSM,type);
return;
}
var curretRouterInfo = {
path:this.$route.path,
query:this.$route.query
......@@ -485,8 +565,8 @@ export default {
this.$router.push({
path: "/viewMap",
query: {
bsm: this.zdData.zdbsm,
type: this.zdData.type ? 'zd' : 'zrz'
bsm: BSM,
type: type
}
});
},
......
<template>
<div >
<div v-if="!resultDialog" class="importDiv">
<div v-if="!resultDialog && !txtResultDialog" class="importDiv">
<el-upload
class="upload-demo"
action="#"
accept=".txt"
:auto-upload="false"
:show-file-list="false"
:on-change="txtFileChange"
>
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<div class="fileUpload">
<div slot="trigger" class="uploadLeft">
<i class="iconfont iconwenbenwendang"></i>
<i class="iconfont icontxt"></i>
</div>
<div solt="tip" class="uploadRight">
<div solt="tip" class="title">TXT文本格式</div>
<div slot="tip" class="el-upload__tip">支持TXT文本格式,点击查看详情<a href="">文本详情</a></div>
<div class="el-upload__tip" slot="tip">支持TXT文本格式,点击查看详情<a class="down" href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt','txttemplet.txt')" >文本详情</a></div>
</div>
</div>
</el-upload>
......@@ -29,7 +30,7 @@
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<div class="fileUpload">
<div slot="trigger" class="uploadLeft">
<i class="iconfont iconuploadicon03"></i>
<i class="iconfont iconzip"></i>
</div>
<div solt="tip" class="uploadRight">
<div solt="tip" class="title">ESRI Shape文件格式</div>
......@@ -47,7 +48,7 @@
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<div solt="tip" class="fileUpload">
<div slot="trigger" class="uploadLeft">
<i class="iconfont icontubiao_daoruCAD"></i>
<i class="iconfont icondaoruCAD"></i>
</div>
<div solt="tip" class="uploadRight">
<div solt="tip" class="title">CAD文件</div>
......@@ -69,7 +70,7 @@
</div>
<div solt="tip" class="uploadRight">
<div slot="tip" class="title">Excel文件格式</div>
<div slot="tip" class="el-upload__tip">.xls、.xlsx版本,点击查看详情<a href="">Excel格式</a></div>
<div class="el-upload__tip" slot="tip">.xls、.xlsx版本,点击查看详情<a class="downloadFile" @click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx','exceltemplet.xlsx')" href="#">Excel格式</a></div>
</div>
</div>
</el-upload>
......@@ -98,6 +99,30 @@
</el-form-item>
</el-form>
</div>
<div v-if="txtResultDialog">
<el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent class="demo-ruleForm">
<el-form-item
label="地块名称"
prop="name"
:rules="[
{ required: true, message: '请选择地块', trigger: 'change' },
]"
>
<el-select v-model="txtZd.name" filterable placeholder="请选择">
<el-option
v-for="(item,index) in txtResult"
:key="index"
:label="item.attributes.name"
:value="item.attributes.name">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
<el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
......@@ -123,7 +148,12 @@ export default {
zdForm:{
zdBsm: ""
},
currentClickZd:null
currentClickZd:null,
txtResult:[],
txtResultDialog:null,
txtZd:{
name:""
}
}
},
methods:{
......@@ -133,9 +163,63 @@ export default {
fileReader.readAsText(file.raw);
fileReader.onload = function (res){
var content = this.result;
self.$emit("closeImportDialog");
if(!content || content.length == 0){
self.$message.warning("文件内容为空!!!");
return;
}
self.analysisTextFile(content);
}
},
analysisTextFile(content){
var index = content.indexOf("[地块坐标]"),
geoInfos = content.substr(index),
geoList = geoInfos.split("\n");
if(geoList.length < 1){
this.$message.warning("文本内容格式有误,请效验文本内容格式!!!");
return;
}
//this.$emit("closeImportDialog");
var features = [],attributes = {},points = [];
for(var i =1;i < geoList.length;i++){
var rowData = geoList[i];
if(rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0){
//解析坐标点信息
var pointInfo = rowData.split(",");
var point = [parseFloat(pointInfo[2]),parseFloat(pointInfo[3])];
points.push(point);
}else {
if(points.length > 0){
var graphic = {
attributes:JSON.parse(JSON.stringify(attributes)),
geometry:{
rings:[[points.concat()]]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
var info = rowData.split(",");
attributes.name = info[3];
}
}
if(points.length > 0){
var graphic = {
attributes:JSON.parse(JSON.stringify(attributes)),
geometry:{
rings:[[points.concat()]]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
this.txtResult = features;
this.txtZd.name = "";
this.txtResultDialog = true;
},
shpFileSuccess(response, file, fileList){
var self = this;
if(response.success){
......@@ -180,6 +264,49 @@ export default {
this.$message.warning(response.message);
}
},
//文本文档导入
submitTxtForm(formName){
var self = this;
this.$refs[formName].validate((valid) => {
if(valid){
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var graphics = self.txtResult.filter(item => {
return item.attributes.name == self.txtZd.name;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt:wkt
}
//校验完整性 直接调用空间方法 提交空间表
self.geoJoint(geometry,function (isJoint,message) {
if(isJoint){
self.$message.warning(message)
return;
}else {
if(self.propertyInfo.type == "zd"){
self.saveZd(graphic);
}else{
self.saveZRZ(graphic);
}
}
});
}else{
console.log('error submit!!');
return false;
}
})
},
//下载文档模板
downloadFile(url,fileName){
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
//导入
submitForm(formName){
//校验完整性 直接调用空间方法 提交空间表
......@@ -370,13 +497,18 @@ export default {
cancel(){
this.zdForm.zdBsm = "";
this.currentClickZd = null;
this.resultDialog = false;
},
//取消文本选择的弹出框
cancelTxtForm(){
this.txtZd.name = "";
this.txtResultDialog = false;
},
//宗地选择发生改变
zdChange(value){
this.zdForm.zdBsm = value.XMMC;
this.currentClickZd = value;
}
}
}
</script>
......

export default {
methods:{
downloadTxt(text, fileName){
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
createTextContent(jzdInfo){
var textContent = "";
for(var i = 0;i < jzdInfo.length;i++){
textContent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
jzdInfo[i].x+","+jzdInfo[i].y+"\n"
}
return textContent;
},
}
}
\ No newline at end of file
......@@ -9,7 +9,7 @@ import {loadModules} from "esri-loader"
import featureUpdate from "@libs/map/featureUpdate";
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
import {maps} from '@/libs/map/mapUtils'
export default {
data(){
......@@ -158,6 +158,18 @@ export default {
}*/
return arcgisParser.convert(primitive)
},
postionToThisGeo(bsm,type){
var view = maps["testMap"];
var layer = view.map.findLayerById("highlightLayer");
if(layer){
var graphics = layer.graphics;
if(graphics.length > 0 && graphics.items[0].attributes.BSM == bsm){
view.extent = graphics.items[0].geometry.extent;
}
}else {
this.$message.warning("暂无图形信息!!!");
}
},
//导入空间图形是 先判断数据是否跨界
geoJoint(geometry,callBacFunction){
var self = this;
......
......@@ -68,7 +68,8 @@ export default {
},
provide(){
return{
getRightTree: this.getRightTree
getRightTree: this.getRightTree,
getRightTreeByZrzbsm:this.getRightTreeByZrzbsm
}
},
data() {
......
......@@ -56,6 +56,7 @@ import layers from '@/assets/json/layers.json'
import findTask from '@/libs/map/findTask'
export default {
inject:['getRightTree','getRightTreeByZrzbsm'],
components:{
EsriMap,
MapTools
......@@ -75,10 +76,16 @@ export default {
},
mixins:[mapLayerManager,findTask],
mounted(){
var query = this.$route.query;
if(query && JSON.stringify(query) != "{}"){
this.addGeoByBsm(query.bsm,query.type,this.viewId);
}
var query = this.$route.query;
if(query && JSON.stringify(query) != "{}"){
//self.addGeoByBsm(query.bsm,query.type,self.viewId);
if(query.type == 'zd'){
this.getRightTree(query.bsm)
}else if(query.type == 'zrz'){
this.getRightTreeByZrzbsm(query.bsm);
}
}
},
methods:{
addLayer(){
......@@ -108,6 +115,10 @@ export default {
}]
});
view.map.add(mapImageLayer,1);
var query = self.$route.query;
if(query && JSON.stringify(query) != "{}"){
self.addGeoByBsm(query.bsm,query.type,self.viewId);
}
}).catch(err => {
throw(err);
})
......@@ -115,9 +126,14 @@ export default {
//缩放至
toMap(attr){
var self = this;
this.extentToGraphic(attr,this.heighGraphic,this.viewId,function () {
self.heighGraphic = attr;
});
if(attr.geometry){
this.extentToGraphic(attr,this.heighGraphic,this.viewId,function () {
self.heighGraphic = attr;
});
}else {
this.$message.warning("没有图形信息!!")
}
},
//图层选择事件
selectLayerChange(){
......@@ -133,8 +149,9 @@ export default {
doSearch(){
var self = this;
if(!this.inputBsm){
this.$message.warning(" 请输入标识码!!!");
return;
}else if(this.inputBsm.length != 19){
}else if(this.inputBsm.length != 32){
this.$message.warning("标识码格式输入有误!!!");
return;
}
......@@ -185,7 +202,7 @@ export default {
delete feature.attributes[key]
}
}
layerResult.features.push(feature);
layerResult[0].features.push(feature);
}else{
if(layer){
this.resultLayers.push({
......@@ -242,7 +259,7 @@ export default {
position: absolute;
top: 12px;
left: 7px;
width: 35%;
width: 30%;
max-height: 100%;
/deep/ .el-input-group__append{
background-color: #409eff;
......
......@@ -56,7 +56,7 @@ export default {
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
view.center = graphic.geometry.extent.center;
view.extent = graphic.geometry.extent;
}).catch( err => {
thow(err);
})
......@@ -91,8 +91,11 @@ export default {
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var features = searchResult[i].features;
for(var j = 0;j < features.length;j++){
features[j].symbol = symbol;
layer.add(features[j]);
if(features[j].geometry){
features[j].symbol = symbol;
layer.add(features[j]);
}
}
}
}).catch(err=>{
......@@ -108,7 +111,7 @@ export default {
}
feature.symbol = highlightSymbol;
var view = maps[viewId];
view.center = feature.geometry.type == 'point' ? feature.geometry : feature.geometry.extent.center;
feature.geometry.type == 'point' ?view.center = feature.geometry :view.extent = feature.geometry.extent;
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction();
}
......
<template>
<div class="tools">
<el-button-group>
<el-button type="primary" title="全图" icon="iconfont icondiqiu" @click="fullMap"></el-button>
<el-button type="primary" title="测面" icon="iconfont iconmianceliang" @click="measureMent('area')"></el-button>
<el-button type="primary" title="全图" icon="iconfont iconquantu" @click="fullMap"></el-button>
<el-button type="primary" title="测面" icon="iconfont iconcemianji" @click="measureMent('area')"></el-button>
<el-button type="primary" title="测距" icon="iconfont iconceju" @click="measureMent('distance')"></el-button>
<el-button type="primary" title="放大" icon="iconfont iconfangda" @click="zoomOut"></el-button>
<el-button type="primary" title="缩小" icon="iconfont iconsuoxiao" @click="zoomIn"></el-button>
<el-button type="primary" title="点选" icon="iconfont iconshuxing" @click="info"></el-button>
<el-button type="primary" title="清除" icon="el-icon-delete" @click="clear"></el-button>
<el-button type="primary" title="放大" icon="iconfont iconlakuangfangda" @click="zoomOut"></el-button>
<el-button type="primary" title="缩小" icon="iconfont iconlakuangsuoxiao" @click="zoomIn"></el-button>
<el-button type="primary" title="点选" icon="iconfont iconchaxunshuxing" @click="info"></el-button>
<el-button type="primary" title="清除" icon="iconfont iconqingchu" @click="clear"></el-button>
</el-button-group>
</div>
......
......@@ -10,7 +10,6 @@
:on-error="uploadError"
:show-file-list="false"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">上传</el-button>
......@@ -157,7 +156,8 @@
},
handleExceed(files, fileList) {
console.log(fileList)
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
// this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
this.$message.warning("上传失败")
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
......
......@@ -343,9 +343,9 @@
<el-button type="primary" @click="submitZDxx">提交</el-button>
<el-button type="primary" @click="registerCall">登记调用</el-button>
</div> -->
<div class="header-button" :style="{width:mainBoxWidth+'px'}">
<el-button type="primary" class="saveBtn" @click="updateZDxx">保存</el-button>
<el-button type="primary" @click="submitZDxx">提交</el-button>
<el-button type="primary" @click="registerCall">登记调用</el-button>
......@@ -880,7 +880,7 @@ export default {
width: 100%;
}
}
.header-button {
height: 50px;
position: fixed;
......
......@@ -590,8 +590,13 @@
if(res.code===200){
this.form = res.result;
if(res.result.qszt !== '0'){
console.log(JSON.stringify(res)+":res")
console.log(JSON.stringify(res.result)+":res.result")
console.log(res.result.qszt+":res.result.qszt")
console.log(res.result.qszt !== '0'+":res.result.qszt!==0")
this.disableFlag = true;
}
console.log(this.disableFlag)
if(this.form.scyclx==='0'){
this.$set(this.form,"ycjzmj", this.form.jzmj)
this.$set(this.form,"yctnjzmj", this.form.tnjzmj)
......
......@@ -57,6 +57,7 @@
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
......@@ -111,6 +112,7 @@
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
......@@ -170,6 +172,7 @@
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
......@@ -214,6 +217,7 @@
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
ref="hBsm"
:key="hsIndex"
......