Browse Source

1.编辑信息点,自定义公司时,input自动获取焦点
2.基础类型,图片上传设置文件类型

yunxing 4 years ago
parent
commit
6d1feffd9d

+ 1 - 1
src/components/editview/leftToolBar/addSpaceDialog.vue

@@ -297,7 +297,7 @@ export default {
             // console.trace("getTableData");
             // 东坝地上二层
             const postParams = {
-                equipTypes: [], // 设备类型列表
+                // equipTypes: [], // 设备类型列表
                 zoneTypes: this.spacePartitionType, //空间类型
                 spaceIds: this.spacePartitionInstance, //空间实例id
                 funcTypes: this.curentSelectTree3, //空间功能区类型

+ 3 - 0
src/components/editview/leftToolBar/editInfoPoint.vue

@@ -344,6 +344,9 @@ export default {
         // 展示标签输入框
         showInput() {
             this.inputVisible = true;
+            this.$nextTick(() => {
+                this.$refs.saveTagInput.focus();
+            });
         },
         initDialog() {
             this.spaceData = {

+ 269 - 282
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -1,310 +1,297 @@
 <!-- 基本图片的属性框 -->
 <template>
-  <div class="base-image">
-    <div class="title">属性</div>
-    <ul>
-      <li>
-        <div class="small-title">尺寸大小</div>
-        <div class="property">
-          <div>
-            <span>W</span>
-            <el-input
-              style="width:74px;margin-left:6px"
-              size="mini"
-              v-model="width"
-              @input="changeWidth"
-              placeholder="请输入内容"
-            ></el-input>
-          </div>
-          <div>
-            <span>H</span>
-            <el-input
-              style="width:74px;margin-left:6px"
-              size="mini"
-              v-model="height"
-              @input="changeHeight"
-              placeholder="请输入内容"
-            ></el-input>
-          </div>
-          <el-upload
-            class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :show-file-list="false"
-            :before-upload="beforeAvatarUpload"
-          >
-            <i class="el-icon-link"></i>
-          </el-upload>
-        </div>
-      </li>
-      <li>
-        <div class="small-title">边框</div>
-        <div class="property">
-          <div class="color-box">
-            <div class="cololorSelect">
-              <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
-            </div>
-            <span>颜色</span>
-          </div>
-          <div class="line-width">
-            <el-input-number
-              style="width:80px"
-              v-model="linewidth"
-              controls-position="right"
-              @change="changeLineWidth"
-              size="mini"
-              :min="1"
-              :max="20"
-              :maxlength="100"
-            ></el-input-number>
-            <span>线宽</span>
-          </div>
-          <div class="line-width">
-            <a-select
-              style="width: 80px"
-              v-model="linestyle"
-              :default-value="borderLineOption[0].id"
-              @change="changeLineStyle"
-            >
-              <a-select-option
-                v-for="item in borderLineOption"
-                :key="item.id"
-                :label="item.src"
-                :value="item.id"
-              >
-                <img :src="item.src" alt width="60" />
-              </a-select-option>
-            </a-select>
-            <span>线型</span>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
+    <div class="base-image">
+        <div class="title">属性</div>
+        <ul>
+            <li>
+                <div class="small-title">尺寸大小</div>
+                <div class="property">
+                    <div>
+                        <span>W</span>
+                        <el-input
+                            style="width: 74px; margin-left: 6px"
+                            size="mini"
+                            v-model="width"
+                            @input="changeWidth"
+                            placeholder="请输入内容"
+                        ></el-input>
+                    </div>
+                    <div>
+                        <span>H</span>
+                        <el-input
+                            style="width: 74px; margin-left: 6px"
+                            size="mini"
+                            v-model="height"
+                            @input="changeHeight"
+                            placeholder="请输入内容"
+                        ></el-input>
+                    </div>
+                    <el-upload
+                        class="avatar-uploader"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :show-file-list="false"
+                        :before-upload="beforeAvatarUpload"
+                        accept="image/jpeg,image/jpg,image/png,"
+                    >
+                        <i class="el-icon-link"></i>
+                    </el-upload>
+                </div>
+            </li>
+            <li>
+                <div class="small-title">边框</div>
+                <div class="property">
+                    <div class="color-box">
+                        <div class="cololorSelect">
+                            <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
+                        </div>
+                        <span>颜色</span>
+                    </div>
+                    <div class="line-width">
+                        <el-input-number
+                            style="width: 80px"
+                            v-model="linewidth"
+                            controls-position="right"
+                            @change="changeLineWidth"
+                            size="mini"
+                            :min="1"
+                            :max="20"
+                            :maxlength="100"
+                        ></el-input-number>
+                        <span>线宽</span>
+                    </div>
+                    <div class="line-width">
+                        <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
+                            <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
+                                <img :src="item.src" alt width="60" />
+                            </a-select-option>
+                        </a-select>
+                        <span>线型</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
 </template>
 <script>
 import bus from "@/bus/bus";
 const baseUrl = "/image-service/common/image_get?systemId=dataPlatform&key=";
 import { uploadGroup, getImageGroup } from "@/api/editer";
 export default {
-  props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
-  data() {
-    return {
-      width: 0,
-      height: 0,
-      color: "#cccccc", //颜色
-      linewidth: 1,
-      borderLineOption: [
-        {
-          id: "Solid",
-          src: require("@/assets/images/solidLine.png"),
+    props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
+    data() {
+        return {
+            width: 0,
+            height: 0,
+            color: "#cccccc", //颜色
+            linewidth: 1,
+            borderLineOption: [
+                {
+                    id: "Solid",
+                    src: require("@/assets/images/solidLine.png"),
+                },
+                {
+                    id: "Dashed",
+                    src: require("@/assets/images/dashedLine.png"),
+                },
+                {
+                    id: "Dotted",
+                    src: require("@/assets/images/dotLine.png"),
+                },
+            ],
+            linestyle: "solid",
+            url: "",
+        };
+    },
+    methods: {
+        changeHeight(val) {
+            bus.$emit("updateStyle", "height", val);
         },
-        {
-          id: "Dashed",
-          src: require("@/assets/images/dashedLine.png"),
+        changeWidth(val) {
+            bus.$emit("updateStyle", "width", val);
         },
-        {
-          id: "Dotted",
-          src: require("@/assets/images/dotLine.png"),
+        changeLineWidth(val) {
+            bus.$emit("updateStyle", "lineWidth", val);
         },
-      ],
-      linestyle: "solid",
-      url: "",
-    };
-  },
-  methods: {
-    changeHeight(val) {
-      bus.$emit("updateStyle", "height", val);
-    },
-    changeWidth(val) {
-      bus.$emit("updateStyle", "width", val);
-    },
-    changeLineWidth(val) {
-      bus.$emit("updateStyle", "lineWidth", val);
-    },
-    // 改变线样式
-    changeLineStyle(val) {
-      bus.$emit("updateStyle", "lineStyle", val);
-    },
-    // 改变颜色
-    changeColor(val) {
-      bus.$emit("updateStyle", "strokeColor", val);
-    },
-    beforeAvatarUpload(file) {
-      let that = this;
-      const fileReader = new FileReader();
-      fileReader.readAsDataURL(file); //读取图片
-      const ftype = file.type;
-      const fname = file.name;
-      const uploadKey = file.uid;
-      const imgType = ftype.split(".")[ftype.length - 1];
-      fileReader.addEventListener("load", function () {
-        // 读取完成
-        let res = fileReader.result;
-        //将canvas的base64位图片转换成图片png的file
-        var blob = that.dataURLtoBlob(res, ftype);
-        //将其转换成file对象
-        let file = new File([blob], fname, {
-          type: ftype,
-          lastModified: Date.now(),
-        }); //blob转file
+        // 改变线样式
+        changeLineStyle(val) {
+            bus.$emit("updateStyle", "lineStyle", val);
+        },
+        // 改变颜色
+        changeColor(val) {
+            bus.$emit("updateStyle", "strokeColor", val);
+        },
+        beforeAvatarUpload(file) {
+            let that = this;
+            const fileReader = new FileReader();
+            fileReader.readAsDataURL(file); //读取图片
+            const ftype = file.type;
+            const fname = file.name;
+            const uploadKey = file.uid;
+            const imgType = ftype.split(".")[ftype.length - 1];
+            fileReader.addEventListener("load", function () {
+                // 读取完成
+                let res = fileReader.result;
+                //将canvas的base64位图片转换成图片png的file
+                var blob = that.dataURLtoBlob(res, ftype);
+                //将其转换成file对象
+                let file = new File([blob], fname, {
+                    type: ftype,
+                    lastModified: Date.now(),
+                }); //blob转file
 
-        // try sending
-        let reader = new FileReader();
-        let fileType = file.name.split(".");
-        let imgType = fileType[fileType.length - 1];
-        let CreateTime = that.formatDate(new Date(file.lastModified));
-        reader.onloadend = function () {
-          // 这个事件在读取结束后,无论成功或者失败都会触发
-          if (reader.error) {
-          } else {
-            // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
-            var xhr = new XMLHttpRequest();
-            xhr.open(
-              /* method */
-              "POST",
-              /* target url */
-              "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
-                "&key=" +
-                uploadKey +
-                "." +
-                imgType
+                // try sending
+                let reader = new FileReader();
+                let fileType = file.name.split(".");
+                let imgType = fileType[fileType.length - 1];
+                let CreateTime = that.formatDate(new Date(file.lastModified));
+                reader.onloadend = function () {
+                    // 这个事件在读取结束后,无论成功或者失败都会触发
+                    if (reader.error) {
+                    } else {
+                        // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+                        var xhr = new XMLHttpRequest();
+                        xhr.open(
+                            /* method */
+                            "POST",
+                            /* target url */
+                            "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
+                                "&key=" +
+                                uploadKey +
+                                "." +
+                                imgType
+                        );
+                        xhr.send(reader.result);
+                        xhr.onreadystatechange = function () {
+                            if (xhr.readyState == 4) {
+                                if (xhr.status == 200) {
+                                    that.url = baseUrl + uploadKey + "." + imgType;
+                                    bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
+                                }
+                            }
+                        };
+                    }
+                };
+                reader.readAsArrayBuffer(file);
+            });
+        },
+        dataURLtoBlob(dataURI, type) {
+            var binary = atob(dataURI.split(",")[1]);
+            var array = [];
+            for (var i = 0; i < binary.length; i++) {
+                array.push(binary.charCodeAt(i));
+            }
+            return new Blob([new Uint8Array(array)], { type: type });
+        },
+        formatDate(now) {
+            let year = now.getFullYear();
+            let month = now.getMonth() + 1;
+            let date = now.getDate();
+            let hour = now.getHours();
+            let minute = now.getMinutes();
+            let second = now.getSeconds();
+            return (
+                year +
+                "-" +
+                month +
+                "-" +
+                (date > 10 ? date : "0" + date) +
+                " " +
+                hour +
+                ":" +
+                (minute > 10 ? minute : "0" + minute) +
+                ":" +
+                (second > 10 ? second : "0" + second)
             );
-            xhr.send(reader.result);
-            xhr.onreadystatechange = function () {
-              if (xhr.readyState == 4) {
-                if (xhr.status == 200) {
-                  that.url = baseUrl + uploadKey + "." + imgType;
-                  bus.$emit(
-                    "updateStyle",
-                    "url",
-                    baseUrl + uploadKey + "." + imgType
-                  );
-                }
-              }
-            };
-          }
-        };
-        reader.readAsArrayBuffer(file);
-      });
-    },
-    dataURLtoBlob(dataURI, type) {
-      var binary = atob(dataURI.split(",")[1]);
-      var array = [];
-      for (var i = 0; i < binary.length; i++) {
-        array.push(binary.charCodeAt(i));
-      }
-      return new Blob([new Uint8Array(array)], { type: type });
-    },
-    formatDate(now) {
-      let year = now.getFullYear();
-      let month = now.getMonth() + 1;
-      let date = now.getDate();
-      let hour = now.getHours();
-      let minute = now.getMinutes();
-      let second = now.getSeconds();
-      return (
-        year +
-        "-" +
-        month +
-        "-" +
-        (date > 10 ? date : "0" + date) +
-        " " +
-        hour +
-        ":" +
-        (minute > 10 ? minute : "0" + minute) +
-        ":" +
-        (second > 10 ? second : "0" + second)
-      );
+        },
     },
-  },
 
-  watch: {
-    strokeColor(val) {
-      this.color = val;
-    },
-    lineWidth(val) {
-      this.linewidth = val;
-    },
-    lineStyle(val) {
-      this.linestyle = val;
-    },
-    Width(val) {
-      this.width = val;
-    },
-    Height(val) {
-      this.height = val;
-    },
-    Url(val) {
-      this.url = val;
+    watch: {
+        strokeColor(val) {
+            this.color = val;
+        },
+        lineWidth(val) {
+            this.linewidth = val;
+        },
+        lineStyle(val) {
+            this.linestyle = val;
+        },
+        Width(val) {
+            this.width = val;
+        },
+        Height(val) {
+            this.height = val;
+        },
+        Url(val) {
+            this.url = val;
+        },
     },
-  },
 };
 </script>
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 .base-image {
-  .title {
-    height: 47px;
-    border-bottom: 1px solid #979797;
-    color: #646c73;
-    font-size: 16px;
-    padding-left: 12px;
-    box-sizing: border-box;
-  }
-  ul {
-    width: calc(~"100% - 24px");
-    margin: -1px 12px 0 12px;
-    li {
-      border-top: 1px solid #979797;
-      margin-bottom: 16px;
-      .small-title {
-        font-size: 12px;
-        color: #8d9399;
-        margin: 12px 0;
-      }
-      .property {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        .color-box {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          .cololorSelect {
-            width: 32px;
-            height: 20px;
-            overflow: hidden;
-            position: relative;
-            margin: 4px 0;
-            .fix-box-1 {
-              margin-top: -8px;
-              margin-left: -8px;
-              /deep/ .el-color-picker__trigger {
-                width: 200px;
-                height: 200px;
-              }
+    .title {
+        height: 47px;
+        border-bottom: 1px solid #979797;
+        color: #646c73;
+        font-size: 16px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+    ul {
+        width: calc(~"100% - 24px");
+        margin: -1px 12px 0 12px;
+        li {
+            border-top: 1px solid #979797;
+            margin-bottom: 16px;
+            .small-title {
+                font-size: 12px;
+                color: #8d9399;
+                margin: 12px 0;
+            }
+            .property {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                .color-box {
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    .cololorSelect {
+                        width: 32px;
+                        height: 20px;
+                        overflow: hidden;
+                        position: relative;
+                        margin: 4px 0;
+                        .fix-box-1 {
+                            margin-top: -8px;
+                            margin-left: -8px;
+                            /deep/ .el-color-picker__trigger {
+                                width: 200px;
+                                height: 200px;
+                            }
+                        }
+                    }
+                }
+                .line-width {
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    margin-left: 8px;
+                    position: relative;
+                }
+                span {
+                    font-size: 12px;
+                    color: #1f2429;
+                    margin-top: 4px;
+                }
             }
-          }
-        }
-        .line-width {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          margin-left: 8px;
-          position: relative;
-        }
-        span {
-          font-size: 12px;
-          color: #1f2429;
-          margin-top: 4px;
         }
-      }
     }
-  }
 }
 </style>