YaolongHan преди 4 години
родител
ревизия
484f164e1e

+ 9 - 0
src/api/editer.ts

@@ -11,3 +11,12 @@ export function saveGroup(postParams: any): any {
 export function readGroup(postParams: any): any {
     return httputils.postJson(`/labsl${baseApi}read`, postParams)
 }
+
+// 上传图片
+export function uploadGroup(postParams: any): any {
+    return httputils.postJson(`/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true`, postParams)
+}
+// 上传图片
+export function getImageGroup(params: any): any {
+    return httputils.getJson(`/image-service/common/image_get?systemId=dataPlatform`, params)
+}

+ 1 - 3
src/components/editClass/persagy-edit/item/SPersagyImageEdit.ts

@@ -105,15 +105,13 @@ export class SPersagyImageEdit extends SImageEdit {
         let that = this;
         dom.onchange = function (a) {
             //继续使用上文的fileList
-            console.log(a.path[0].files)
             let file = a.path[0].files[0];
-            console.log(a.path[0].files)
             const fileReader = new FileReader()
             fileReader.readAsDataURL(file) //读取图片
             fileReader.addEventListener('load', function () {
                 // 读取完成
                 let res = fileReader.result;
-                console.log(res,'sersrf')
+                console.log(fileReader,'sersrf')
                 that.url = res
                 // res是base64格式的图片
             })

+ 1 - 1
src/components/editview/baseTopoEditer.vue

@@ -10,7 +10,7 @@ import { SGraphView } from "@persagy-web/graph";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
 import bus from "@/bus/bus";
-import { saveGroup, readGroup } from "@/api/editer";
+import { saveGroup, readGroup, uploadGroup, getImageGroup } from "@/api/editer";
 export default {
   components: { topoTooltip },
   data() {

+ 107 - 29
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -1,20 +1,38 @@
 <!-- 基本图片的属性框 -->
 <template>
   <div class="base-image">
-    <!-- <div class="title">属性</div>
+    <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="input" placeholder="请输入内容"></el-input>
+            <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="input" placeholder="请输入内容"></el-input>
+            <el-input
+              style="width:74px;margin-left:6px"
+              size="mini"
+              v-model="height"
+              @input="changeHeight"
+              placeholder="请输入内容"
+            ></el-input>
           </div>
           <i class="el-icon-link"></i>
+          <el-upload
+            action="/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >12</el-upload>
         </div>
       </li>
       <li>
@@ -29,7 +47,7 @@
           <div class="line-width">
             <el-input-number
               style="width:80px"
-              v-model="num"
+              v-model="linewidth"
               controls-position="right"
               @change="handleChange"
               size="mini"
@@ -39,29 +57,40 @@
             ></el-input-number>
             <span>线宽</span>
           </div>
-          <div class="color-box">
-            <div class="cololorSelect">
-              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
-            </div>
-            <span>背景颜色</span>
+          <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> -->
+    </ul>
   </div>
 </template>
 <script>
 import bus from "@/bus/bus";
-// import { Select } from 'ant-design-vue';
+import { uploadGroup, getImageGroup } from "@/api/editer";
 export default {
-  // components:{Select},
+  props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
   data() {
     return {
-      size: 12, //font-size
-      text: "", //文本
+      width: 0,
+      height: 0,
       color: "#cccccc", //颜色
-      activeName: "",
-      num: 1,
+      linewidth: 1,
       borderLineOption: [
         {
           id: "solid",
@@ -76,26 +105,75 @@ export default {
           src: require("@/assets/images/dotLine.png"),
         },
       ],
-      borderStyle: "solid",
+      linestyle: "solid",
     };
   },
   methods: {
-    // 改变文本大小
-    updateSize(val) {
-      bus.$emit("baseTextSize", val);
+    changeHeight(val) {
+      bus.$emit("updateStyle", "height", val);
+    },
+    changeWidth(val) {
+      bus.$emit("updateStyle", "width", val);
     },
-    // 输入文本
-    handleChangeText() {},
     handleChange() {},
-    // 改变文字颜色
-    changeColor() {},
-    handleClick(tab, event) {
-      console.log(tab, event);
+    changeLineStyle() {},
+    updataImage() {
+      let dom = document.createElement("input");
+      dom.type = "file";
+      dom.name = "file";
+      dom.accept = "image/*";
+      dom.click();
+      dom.onchange = function (a) {
+        //继续使用上文的fileList
+        let file = a.path[0].files[0];
+        var reads = new FileReader();
+        reads.readAsDataURL(file);
+        reads.onload = function (e) {
+          const myform = new FormData();
+          console.log(file);
+          myform.append("xxx", file);
+          console.log(myform);
+          let data = { data: myform };
+          uploadGroup(data).then((res) => {
+            console.log("resresres", res);
+          });
+        };
+      };
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    handleAvatarSuccess(res, file) {
+      console.log("res, file", res, file);
+      this.imageUrl = URL.createObjectURL(file.raw);
     },
-    changeBorder() {},
   },
-  mounted() {
-    // console.log(Select)
+
+  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;
+    },
   },
 };
 </script>

+ 1 - 1
src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -84,7 +84,7 @@ export default {
     },
     // 改变线样式
     changeLineStyle(val) {
-       bus.$emit("updateStyle", "lineStyle", val);
+      bus.$emit("updateStyle", "lineStyle", val);
     },
   },
   mounted() {

+ 23 - 3
src/components/editview/rightPropertyBar/property.vue

@@ -21,7 +21,15 @@
       :backgroundColor="backgroundColor"
       v-show="itemType == 'BaseExplain'"
     ></BaseExplainPro>-->
-    <BaseImagePro v-show="itemType == 'BaseImage'"></BaseImagePro>
+    <BaseImagePro
+      :lineStyle="lineStyle"
+      :lineWidth="lineWidth"
+      :strokeColor="strokeColor"
+      :Url="Url"
+      :Width="Width"
+      :Height="Height"
+      v-show="itemType == 'BaseImage'"
+    ></BaseImagePro>
   </div>
 </template>
 <script>
@@ -49,6 +57,9 @@ export default {
       fontSize: 12, //字体大小
       textMsg: "", // 文本
       backgroundColor: "", // 背景色
+      Width: 0, //item 宽
+      Height: 0, //item 高
+      Url: "", // 路径
     };
   },
   mounted() {
@@ -73,12 +84,21 @@ export default {
         this.strokeColor = item.strokeColor.toRgba();
         this.lineStyle = lineStyle[item.lineStyle];
         this.lineWidth = item.lineWidth;
-      } else if (this.itemType == "BaseText") {
+      } else if (
+        this.itemType == "BaseText" ||
+        this.itemType == "BaseExplain"
+      ) {
         this.strokeColor = item.strokeColor.toRgba();
         this.backgroundColor = item.backgroundColor.toRgba();
-        console.log("text", item.font.size);
         this.textMsg = item.text;
         this.fontSize = item.font.size;
+      } else if (this.itemType == "BaseImage") {
+        console.log("this.itemType", item);
+        this.Width = item.width; //item 宽
+        this.Height = item.height; //item 高
+        this.Url = item.url; // 路径
+        this.lineStyle = lineStyle[item.lineStyle];
+        this.lineWidth = item.lineWidth;
       }
     },
   },

+ 8 - 0
vue.config.js

@@ -13,6 +13,14 @@ module.exports = {
                     '^/labsl': '/labsl',
                 },
             },
+            // 图片服务器
+            '/image-service': {
+                target: 'http://adm.sagacloud.cn/',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/image-service': '/image-service',
+                },
+            },
         },
     },
     lintOnSave: false,