ソースを参照

modify pointstabs

haojianlong 5 年 前
コミット
b09ca78a4e
1 ファイル変更411 行追加454 行削除
  1. 411 454
      src/views/data_admin/buildGraphy/graphyTabs.vue

+ 411 - 454
src/views/data_admin/buildGraphy/graphyTabs.vue

@@ -3,49 +3,35 @@ setFalg 插旗事件
 getLocation 定位
 -->
 <template>
-    <div id="graphy-tabs">
-        <el-tabs style="height:100%;" v-model="activeName2" type="card" @tab-click="handleClick">
-            <el-tab-pane label="本层的点位标签" name="point">
-                <div v-if="pointData.length" v-loading="isLoading" style="max-height: 600px;overflow-y:auto;">
-                    <div v-for="(item,index) in pointData" :key="index">
-                        <div class="point">
-                            <span>{{item.Name}}</span>
-                            <el-button size="mini" @click="getDetails(item)">编辑点位标签</el-button>
-                            <el-button :disabled="!map" size="mini" @click="btnClick(item)">{{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}</el-button>
-                        </div>
-                    </div>
-                </div>
-                <div v-if="!pointData.length" class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
-                    <i class="icon-wushuju iconfont"></i>
-                    {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
-                </div>
-      </el-tab-pane>
-      <el-tab-pane label="无法定位到楼层的点位标签" name="noPoint">
-            <div v-if="pointNoData.length" v-loading="isLoading" style="max-height: 600px;">
-                <div v-for="(item,index) in pointNoData" :key="index">
-                    <div class="point">
-                    <span>{{item.Name}}</span>
-                    <el-button @click="getDetails(item)">编辑点位标签</el-button>
-                    <el-button
-                        :disabled="!(item.X == 0 && item.Y == 0)"
-                        @click="btnClick(item)"
-                    >{{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}</el-button>
-                </div>
-            </div>
-            </div>
-            <div v-if="!pointNoData.length" class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
-                <i class="icon-wushuju iconfont"></i>
-                {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
-            </div>
-        </el-tab-pane>
+  <div id="graphy-tabs">
+    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
+      <el-tab-pane label="本层的点位标签" name="point"></el-tab-pane>
+      <el-tab-pane label="无法定位到楼层的点位标签" name="noPoint"></el-tab-pane>
     </el-tabs>
+    <div v-if="pointData.length" v-loading="isLoading" style="padding:0 0 10px;overflow-y:auto;">
+      <div v-for="(item,index) in pointData" :key="index">
+        <div class="point">
+          <span>{{item.Name}}</span>
+          <el-button size="mini" @click="getDetails(item)">编辑点位标签</el-button>
+          <el-button v-if="activeName2=='point'" :disabled="!map" size="mini" @click="btnClick(item)">
+            {{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}
+          </el-button>
+          <el-button v-if="activeName2=='noPoint'" :disabled="!(item.X == 0 && item.Y == 0)" @click="btnClick(item)">
+            {{ item.X == 0 && item.Y == 0 ? '插旗' : '定位'}}
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div v-else class="center" style="height: 400px;padding-top: 260px; box-sizing:border-box;">
+      <i class="icon-wushuju iconfont"></i>
+      {{pointParam.FloorId ? "数据为空" : "请选择楼层"}}
+    </div>
     <el-dialog title="详情" :visible.sync="pointShow" width="500px">
       <div class="qrcode">
         <div class="qrcode-view">
           <img
             :src="'/ScanBuilding/service/qrcode/point?projectId=' + projectId + '&pointId=' + pointDetails.PointId + '&FloorId=' + pointDetails.FloorId + '&width=200&height=200'"
-            alt="点位标签二维码"
-          >
+            alt="点位标签二维码">
         </div>
         <div class="point-edit">
           <p>
@@ -54,22 +40,10 @@ getLocation 定位
             -({{pointDetails.X}},{{pointDetails.Y}})
           </p>
           <div>
-            <form-input
-              :width="100"
-              @change="changeInput"
-              :value="pointDetails.PointName"
-              :keys="'PointName'"
-              :label="'点位标签'"
-              :isRule="false"
-            ></form-input>
-            <form-input
-              :width="100"
-              @change="changeInput"
-              :value="pointDetails.PointLocalId"
-              :keys="'PointLocalId'"
-              :label="'点位本地编码'"
-              :isRule="false"
-            ></form-input>
+            <form-input :width="100" @change="changeInput" :value="pointDetails.PointName" :keys="'PointName'" :label="'点位标签'" :isRule="false">
+            </form-input>
+            <form-input :width="100" @change="changeInput" :value="pointDetails.PointLocalId" :keys="'PointLocalId'" :label="'点位本地编码'"
+              :isRule="false"></form-input>
             <!-- <form-input></form-input> -->
           </div>
         </div>
@@ -97,66 +71,59 @@ getLocation 定位
           <li>
             <span>备注</span>
             <span>
-              <form-input
-                :width="0"
-                @change="changeInput"
-                :value="pointDetails.Note"
-                :keys="'Note'"
-                :label="''"
-                :isRule="false"
-              ></form-input>
+              <form-input :width="0" @change="changeInput" :value="pointDetails.Note" :keys="'Note'" :label="''" :isRule="false"></form-input>
             </span>
           </li>
         </ul>
       </div>
       <div class="point-pic">
-            <p>点位安装位置效果照片</p>
-            <template v-for="(item,index) in installPic">
-                <div class="point-image" :key="index">
-                    <i class="el-icon-delete" @click="delImage(index,installPic)"></i>
-                    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
-                </div>
-            </template>
-            <load-img keyName="安装位置" @getKey="getKey"></load-img>
-        </div>
-        <div class="point-pic">
-            <p>全景照片</p>
-            <template v-for="(item,index) in panorama">
-                <div class="point-image" :key="index">
-                    <i class="el-icon-delete" @click="delImage(index,panorama)"></i>
-                    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
-                </div>
-            </template>
-            <load-img keyName="全景照片" @getKey="getKey"></load-img>
-        </div>
-        <div class="point-pic">
-            <p>周边照片</p>
-            <template v-for="(item,index) in rimPic">
-                <div class="point-image" :key="index">
-                    <i class="el-icon-delete" @click="delImage(index,rimPic)"></i>
-                    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
-                </div>
-            </template>
-            <load-img keyName="周边照片" @getKey="getKey"></load-img>
-        </div>
-        <div class="point-pic">
-            <p>视频资料</p>
-            <template v-for="(item,index) in videoPic">
-                <div class="point-image" :key="index">
-                    <i class="el-icon-delete" @click="delImage(index,videoPic)"></i>
-                    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
-                </div>
-            </template>
-            <load-img keyName="视频" @getKey="getKey"></load-img>
-        </div>
-        <div class="point-pic">
-            <p>其他照片</p>
-            <template v-for="(item,index) in elsePic">
-                <div class="point-image" :key="index">
-                    <i class="el-icon-delete" @click="delImage(index,elsePic)"></i>
-                    <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
-                </div>
-            </template>
+        <p>点位安装位置效果照片</p>
+        <template v-for="(item,index) in installPic">
+          <div class="point-image" :key="index">
+            <i class="el-icon-delete" @click="delImage(index,installPic)"></i>
+            <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
+          </div>
+        </template>
+        <load-img keyName="安装位置" @getKey="getKey"></load-img>
+      </div>
+      <div class="point-pic">
+        <p>全景照片</p>
+        <template v-for="(item,index) in panorama">
+          <div class="point-image" :key="index">
+            <i class="el-icon-delete" @click="delImage(index,panorama)"></i>
+            <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
+          </div>
+        </template>
+        <load-img keyName="全景照片" @getKey="getKey"></load-img>
+      </div>
+      <div class="point-pic">
+        <p>周边照片</p>
+        <template v-for="(item,index) in rimPic">
+          <div class="point-image" :key="index">
+            <i class="el-icon-delete" @click="delImage(index,rimPic)"></i>
+            <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
+          </div>
+        </template>
+        <load-img keyName="周边照片" @getKey="getKey"></load-img>
+      </div>
+      <div class="point-pic">
+        <p>视频资料</p>
+        <template v-for="(item,index) in videoPic">
+          <div class="point-image" :key="index">
+            <i class="el-icon-delete" @click="delImage(index,videoPic)"></i>
+            <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
+          </div>
+        </template>
+        <load-img keyName="视频" @getKey="getKey"></load-img>
+      </div>
+      <div class="point-pic">
+        <p>其他照片</p>
+        <template v-for="(item,index) in elsePic">
+          <div class="point-image" :key="index">
+            <i class="el-icon-delete" @click="delImage(index,elsePic)"></i>
+            <img :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200&height=200'" alt>
+          </div>
+        </template>
         <load-img keyName="其他照片" @getKey="getKey"></load-img>
       </div>
     </el-dialog>
@@ -164,360 +131,350 @@ getLocation 定位
 </template>
 
 <script>
-    import {
-        getPT, //获取点位列表
-        getPoint, //获取点位详情
-        updatePoint //修改点位
-    } from "@/api/scan/request";
-    import formInput from "./lib/formInput";
-    import loadImg from "./lib/uploadImg";
-    import {
-        mapGetters,
-        mapActions
-    } from 'vuex';
-    export default {
-        props: {
-            pointParam: {
-                type: Object
-            }
-        },
-        components: {
-            formInput,
-            loadImg
-        },
-        data() {
-            return {
-                activeName2: "point",
-                pointData: [], //tab为本层的点位标签
-                pointNoData: [], //tab为无法定位的点位标签
-                pointShow: false, //标签详情的弹窗
-                pointDetails: {}, //标签详情信息对象
-                // projId: this.$route.query.projId,
-                index: "",
-                installPic: [], //安装位置
-                panorama: [], //全景照片
-                rimPic: [], //周边照片
-                videoPic: [], //视频资料
-                elsePic: [], //其他照片
-                map: true
-            };
-        },
-        computed: {
-            ...mapGetters('layout', ['projectId', 'secret', 'userId'])
-        },
-        methods: {
-            //tabs被点击
-            handleClick(tab, event) {
-                this.index = tab.index;
-                this.getPointList();
-            },
-            //修改input
-            changeInput(val, key) {
-                this.pointDetails[key] = val;
-                this.updatePoint();
-            },
-            //删除图片
-            delImage(index, arr) {
-                arr.splice(index, 1);
-                this.updatePoint();
-            },
-            //获取key的值
-            getKey(val, name) {
-                switch (name) {
-                    case "安装位置":
-                        this.installPic.push({
-                            key: val,
-                            name: name,
-                            type: "image_wz"
-                        });
-                        break;
-                    case "全景照片":
-                        this.panorama.push({
-                            key: val,
-                            name: name,
-                            type: "panorama"
-                        });
-                        break;
-                    case "周边照片":
-                        this.rimPic.push({
-                            key: val,
-                            name: name,
-                            type: "image_zb"
-                        });
-                        break;
-                    case "视频":
-                        this.videoPic.push({
-                            key: val,
-                            name: name,
-                            type: "video"
-                        });
-                        break;
-                    default:
-                        this.elsePic.push({
-                            key: val,
-                            name: name,
-                            type: "image_else"
-                        });
-                }
-                this.updatePoint();
-            },
-            btnClick(item) {
-                if (item.X == 0 && item.Y == 0) {
-                    this.$emit("setFalg", item);
-                } else {
-                    this.$emit("getLocation", item);
-                }
-            },
-            mapPush(detailsArr, pic) {
-                pic.map(item => {
-                    detailsArr.push(item);
-                });
-            },
-            //修改详情
-            updatePoint() {
-                this.pointDetails.ImageList = [];
-                this.mapPush(this.pointDetails.ImageList, this.installPic);
-                this.mapPush(this.pointDetails.ImageList, this.panorama);
-                this.mapPush(this.pointDetails.ImageList, this.rimPic);
-                this.mapPush(this.pointDetails.ImageList, this.videoPic);
-                this.mapPush(this.pointDetails.ImageList, this.elsePic);
-                let param = {
-                    ProjId: this.pointParam.ProjId,
-                    UserId: this.pointParam.UserId,
-                    PointList: this.pointDetails
-                };
-                updatePoint(param).then(res => {
-                    this.$message.success("修改成功");
-                });
-            },
-            getDetails(item) {
-                let params = {
-                    ProjId: this.projectId,
-                    UserId: this.userId,
-                    PointId: item.Id
-                };
-                getPoint(params).then(res => {
-                    let data = res.data;
-                    if (data.Result == "success") {
-                        this.pointShow = true;
-                        this.pointDetails = data.PointList[0];
-                        this.getPic(data.PointList[0].ImageList);
-                    } else {
-                        this.$message.error("请求出错");
-                    }
-                });
-            },
-            getPic(imgArr) {
-                this.installPic = [];
-                this.panorama = [];
-                this.rimPic = [];
-                this.videoPic = [];
-                this.elsePic = [];
-                imgArr.map((item, index) => {
-                    switch (item.name) {
-                        case "安装位置":
-                            this.installPic.push(item);
-                            break;
-                        case "全景照片":
-                            this.panorama.push(item);
-                            break;
-                        case "周边照片":
-                            this.rimPic.push(item);
-                            break;
-                        case "视频":
-                            this.videoPic.push(item);
-                            break;
-                        default:
-                            this.elsePic.push(item);
-                    }
-                });
-            },
-            //获取point
-            getPointList() {
-                this.isLoading = true;
-                if (this.pointParam.FloorId) {
-                    let param = {
-                        FloorId: this.pointParam.FloorId,
-                        ProjId: this.pointParam.ProjId,
-                        UserId: this.pointParam.UserId
-                    };
-                    console.log(param)
-                    //当index为1时FloorId为空
-                    if (this.index == "1") {
-                        param.FloorId = "";
-                    }
-                    getPT(param).then(res => {
-                        res.data.PointList.splice(0, 1);
-                        if (this.index == "1") {
-                            this.pointNoData = res.data.PointList;
-                        } else {
-                            this.$emit("getPointList", res.data.PointList);
-                            this.pointData = res.data.PointList;
-                        }
-                        this.isLoading = false;
-                    });
-                }
-            },
-            //初始化
-            reset(data, map) {
-                this.map = map
-                this.pointParam.FloorId = data.FloorId;
-                this.pointParam.fllorName = data.fllorName;
-                this.activeName2 = "point";
-                this.getPointList();
-            }
-        },
-        watch: {
-            pointShow: {
-                deep: true,
-                handler: function(old, val) {
-                    if (old == false && val == true) {
-                        this.getPointList();
-                    }
-                }
-            },
-            projectId(){
-                this.pointData= []
-                this.pointNoData= []
-                this.activeName2 = "point"
-            }
-        }
+import {
+  getPT, //获取点位列表
+  getPoint, //获取点位详情
+  updatePoint //修改点位
+} from "@/api/scan/request";
+import formInput from "./lib/formInput";
+import loadImg from "./lib/uploadImg";
+import {
+  mapGetters,
+  mapActions
+} from 'vuex';
+export default {
+  props: {
+    pointParam: {
+      type: Object
+    }
+  },
+  components: {
+    formInput,
+    loadImg
+  },
+  data() {
+    return {
+      activeName2: "point",
+      pointData: [], //tab为本层的点位标签
+      pointShow: false, //标签详情的弹窗
+      pointDetails: {}, //标签详情信息对象
+      // projId: this.$route.query.projId,
+      index: 0,
+      installPic: [], //安装位置
+      panorama: [], //全景照片
+      rimPic: [], //周边照片
+      videoPic: [], //视频资料
+      elsePic: [], //其他照片
+      map: true
     };
+  },
+  computed: {
+    ...mapGetters('layout', ['projectId', 'secret', 'userId'])
+  },
+  methods: {
+    //tabs被点击
+    handleClick(tab, event) {
+      this.index = tab.index;
+      this.getPointList();
+    },
+    //修改input
+    changeInput(val, key) {
+      this.pointDetails[key] = val;
+      this.updatePoint();
+    },
+    //删除图片
+    delImage(index, arr) {
+      arr.splice(index, 1);
+      this.updatePoint();
+    },
+    //获取key的值
+    getKey(val, name) {
+      switch (name) {
+        case "安装位置":
+          this.installPic.push({
+            key: val,
+            name: name,
+            type: "image_wz"
+          });
+          break;
+        case "全景照片":
+          this.panorama.push({
+            key: val,
+            name: name,
+            type: "panorama"
+          });
+          break;
+        case "周边照片":
+          this.rimPic.push({
+            key: val,
+            name: name,
+            type: "image_zb"
+          });
+          break;
+        case "视频":
+          this.videoPic.push({
+            key: val,
+            name: name,
+            type: "video"
+          });
+          break;
+        default:
+          this.elsePic.push({
+            key: val,
+            name: name,
+            type: "image_else"
+          });
+      }
+      this.updatePoint();
+    },
+    btnClick(item) {
+      if (item.X == 0 && item.Y == 0) {
+        this.$emit("setFalg", item);
+      } else {
+        this.$emit("getLocation", item);
+      }
+    },
+    mapPush(detailsArr, pic) {
+      pic.map(item => {
+        detailsArr.push(item);
+      });
+    },
+    //修改详情
+    updatePoint() {
+      this.pointDetails.ImageList = [];
+      this.mapPush(this.pointDetails.ImageList, this.installPic);
+      this.mapPush(this.pointDetails.ImageList, this.panorama);
+      this.mapPush(this.pointDetails.ImageList, this.rimPic);
+      this.mapPush(this.pointDetails.ImageList, this.videoPic);
+      this.mapPush(this.pointDetails.ImageList, this.elsePic);
+      let param = {
+        ProjId: this.pointParam.ProjId,
+        UserId: this.pointParam.UserId,
+        PointList: this.pointDetails
+      };
+      updatePoint(param).then(res => {
+        this.$message.success("修改成功");
+      });
+    },
+    getDetails(item) {
+      let params = {
+        ProjId: this.projectId,
+        UserId: this.userId,
+        PointId: item.Id
+      };
+      getPoint(params).then(res => {
+        let data = res.data;
+        if (data.Result == "success") {
+          this.pointShow = true;
+          this.pointDetails = data.PointList[0];
+          this.getPic(data.PointList[0].ImageList);
+        } else {
+          this.$message.error("请求出错");
+        }
+      });
+    },
+    getPic(imgArr) {
+      this.installPic = [];
+      this.panorama = [];
+      this.rimPic = [];
+      this.videoPic = [];
+      this.elsePic = [];
+      imgArr.map((item, index) => {
+        switch (item.name) {
+          case "安装位置":
+            this.installPic.push(item);
+            break;
+          case "全景照片":
+            this.panorama.push(item);
+            break;
+          case "周边照片":
+            this.rimPic.push(item);
+            break;
+          case "视频":
+            this.videoPic.push(item);
+            break;
+          default:
+            this.elsePic.push(item);
+        }
+      });
+    },
+    //获取point
+    getPointList() {
+      this.isLoading = true;
+      if (this.pointParam.FloorId) {
+        //当index为1时FloorId为空
+        let param = {
+          FloorId: this.index == 0 ? this.pointParam.FloorId : '',
+          ProjId: this.pointParam.ProjId,
+          UserId: this.pointParam.UserId
+        };
+        getPT(param).then(res => {
+          res.data.PointList.splice(0, 1);
+          this.pointData = res.data.PointList;
+          if (this.index == 0) {
+            this.$emit("getPointList", res.data.PointList);
+          }
+          this.isLoading = false;
+        });
+      }
+    },
+    //初始化
+    reset(data, map) {
+      this.map = map
+      this.pointParam.FloorId = data.FloorId;
+      this.pointParam.fllorName = data.fllorName;
+      this.activeName2 = "point";
+      this.getPointList();
+    }
+  },
+  watch: {
+    pointShow: {
+      deep: true,
+      handler: function (old, val) {
+        if (old == false && val == true) {
+          this.getPointList();
+        }
+      }
+    },
+    projectId() {
+      this.pointData = []
+      this.activeName2 = "point"
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-    #graphy-tabs {
+#graphy-tabs {
+  height: 100%;
+  border-left: 1px solid #e4e7ed;
+  .el-tabs__content {
+    height: calc(100% - 60px) !important;
+    background: red;
+  }
+  .el-dialog__body {
+    max-height: 400px;
+  }
+  .saga-message {
+    height: calc(100vh - 220px);
+    line-height: 400px;
+    color: #ccc;
+    font-size: 24px;
+    text-align: center;
+  }
+  .point {
+    padding: 5px 0 5px 20px;
+    line-height: 30px;
+    span {
+      float: left;
+      width: 180px;
+      display: block;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 12px;
+    }
+  }
+  .point:hover {
+    background-color: #f2f6fc;
+  }
+  .qrcode {
+    width: 100%;
+    height: 180px;
+    overflow: hidden;
+    .qrcode-view {
+      width: 180px;
+      height: 180px;
+      overflow: hidden;
+      float: left;
+      img {
+        width: 100%;
         height: 100%;
-        border-left: 1px solid #E4E7ED;
-        .el-tabs__content {
-            height: calc(100% - 60px) !important;
-            background: red;
-        }
-        .el-dialog__body{
-            max-height: 400px;
-        }
-        .saga-message {
-            height: calc(100vh - 220px);
-            line-height: 400px;
-            color: #ccc;
-            font-size: 24px;
-            text-align: center;
-        }
-        .point {
-            padding-left: 20px;
-            height: 30px;
-            span {
-                font-size: 12px;
-                width: 180px;
-                display: inline-block;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
-            button {
-                margin-bottom: 5px;
-            }
-        }
-        .point:hover {
-            background-color: #f2f6fc;
-        }
-        .qrcode {
-            width: 100%;
-            height: 180px;
-            overflow: hidden;
-            .qrcode-view {
-                width: 180px;
-                height: 180px;
-                overflow: hidden;
-                float: left;
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .point-edit {
-                height: 180px;
-                display: inline-block;
-                padding-top: 10px;
-                overflow-x: hidden;
-                width: calc(100% - 180px);
-            }
-        }
-        .point-coding {
-            width: 100%;
-            height: 120px;
-            margin-top: 5px;
-            overflow: hidden;
-            p {
-                height: 30px;
-                line-height: 30px;
-                padding-left: 10px;
-                font-weight: 500;
-                font-size: 16px;
-                text-align: left;
-            }
-            ul {
-                width: 100%;
-                border: 1px solid #ccc;
-                border-bottom: none;
-                box-sizing: border-box;
-                li {
-                    line-height: 40px;
-                    height: 40px;
-                    span {
-                        display: block;
-                        float: left;
-                        padding-left: 10px;
-                        box-sizing: border-box;
-                        border-right: 1px solid #ccc;
-                        border-bottom: 1px solid #ccc;
-                        border-left: 1px solid #ccc;
-                        height: 40px;
-                        overflow: hidden;
-                    }
-                    span:first-child {
-                        width: 30%;
-                    }
-                    span:last-child {
-                        width: 70%;
-                    }
-                }
-            }
+      }
+    }
+    .point-edit {
+      height: 180px;
+      display: inline-block;
+      padding-top: 10px;
+      overflow-x: hidden;
+      width: calc(100% - 180px);
+    }
+  }
+  .point-coding {
+    width: 100%;
+    height: 120px;
+    margin-top: 5px;
+    overflow: hidden;
+    p {
+      height: 30px;
+      line-height: 30px;
+      padding-left: 10px;
+      font-weight: 500;
+      font-size: 16px;
+      text-align: left;
+    }
+    ul {
+      width: 100%;
+      border: 1px solid #ccc;
+      border-bottom: none;
+      box-sizing: border-box;
+      li {
+        line-height: 40px;
+        height: 40px;
+        span {
+          display: block;
+          float: left;
+          padding-left: 10px;
+          box-sizing: border-box;
+          border-right: 1px solid #ccc;
+          border-bottom: 1px solid #ccc;
+          border-left: 1px solid #ccc;
+          height: 40px;
+          overflow: hidden;
         }
-        .point-pic {
-            width: 100%;
-            overflow: hidden;
-            p {
-                height: 25px;
-                line-height: 25px;
-                padding-left: 10px;
-                font-weight: 500;
-                font-size: 16px;
-                margin-top: 5px;
-                margin-bottom: 5px;
-            }
+        span:first-child {
+          width: 30%;
         }
-        .point-image {
-            width: 180px;
-            height: 180px;
-            float: left;
-            position: relative;
-            margin-right: 10px;
-            margin-bottom: 10px;
-            border: 1px solid #ccc;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-            i {
-                position: absolute;
-                bottom: 10px;
-                right: 10px;
-                background-color: #fff;
-                padding: 5px;
-                cursor: pointer;
-            }
+        span:last-child {
+          width: 70%;
         }
+      }
+    }
+  }
+  .point-pic {
+    width: 100%;
+    overflow: hidden;
+    p {
+      height: 25px;
+      line-height: 25px;
+      padding-left: 10px;
+      font-weight: 500;
+      font-size: 16px;
+      margin-top: 5px;
+      margin-bottom: 5px;
+    }
+  }
+  .point-image {
+    width: 180px;
+    height: 180px;
+    float: left;
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    i {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      background-color: #fff;
+      padding: 5px;
+      cursor: pointer;
     }
+  }
+}
 </style>