upload

report-ui/src/assets/iconfont/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe70f;</span>
+                <div class="name">文件</div>
+                <div class="code-name">&amp;#xe70f;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe724;</span>
                 <div class="name">上</div>
@@ -714,9 +720,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1625116809861') format('woff2'),
-       url('iconfont.woff?t=1625116809861') format('woff'),
-       url('iconfont.ttf?t=1625116809861') format('truetype');
+  src: url('iconfont.woff2?t=1625204671216') format('woff2'),
+       url('iconfont.woff?t=1625204671216') format('woff'),
+       url('iconfont.ttf?t=1625204671216') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -742,6 +748,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont iconfolder-o"></span>
+            <div class="name">
+              文件
+            </div>
+            <div class="code-name">.iconfolder-o
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont iconjinlingyingcaiwangtubiao01"></span>
             <div class="name">
@@ -1732,6 +1747,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfolder-o"></use>
+                </svg>
+                <div class="name">文件</div>
+                <div class="code-name">#iconfolder-o</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#iconjinlingyingcaiwangtubiao01"></use>

report-ui/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1513211 */
-  src: url('iconfont.woff2?t=1625116809861') format('woff2'),
-       url('iconfont.woff?t=1625116809861') format('woff'),
-       url('iconfont.ttf?t=1625116809861') format('truetype');
+  src: url('iconfont.woff2?t=1625204671216') format('woff2'),
+       url('iconfont.woff?t=1625204671216') format('woff'),
+       url('iconfont.ttf?t=1625204671216') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfolder-o:before {
+  content: "\e70f";
+}
+
 .iconjinlingyingcaiwangtubiao01:before {
   content: "\e724";
 }

report-ui/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15461480",
+      "name": "文件",
+      "font_class": "folder-o",
+      "unicode": "e70f",
+      "unicode_decimal": 59151
+    },
     {
       "icon_id": "182207",
       "name": "上",

report-ui/src/views/report/bigscreen/designer/form/customUpload.vue

@@ -1,18 +1,20 @@
 <template>
-  <el-upload
-    class="upload-demo"
-    :action="requestUrl"
-    :on-success="handleSucess"
-    :on-remove="handleRemove"
-    :file-list="fileList"
-    :headers="headers"
-    :limit="1"
-    list-type="picture"
-  >
-    <el-button size="small" type="primary">点击上传</el-button>
-  </el-upload>
+  <div>
+    <el-input
+      clearable
+      v-model.trim="uploadImgUrl"
+      size="mini"
+      @change="changeInput"
+    >
+      <template slot="append">
+        <i class="iconfont iconfolder-o"></i>
+        <input type="file" class="file" ref="files" @change="getImages" />
+      </template>
+    </el-input>
+  </div>
 </template>
 <script>
+import axios from "axios";
 import { getToken } from "@/utils/auth";
 export default {
   model: {
@@ -21,8 +23,8 @@ export default {
   },
   props: {
     value: {
-      type: Array,
-      default: []
+      type: "",
+      default: ""
     }
   },
   data() {
@@ -31,25 +33,69 @@ export default {
       headers: {
         Authorization: getToken()
       },
-      fileList: []
+      fileList: [],
+      uploadImgUrl: ""
     };
   },
   created() {
-    this.fileList = this.value;
+    this.uploadImgUrl = this.value;
   },
   methods: {
-    handleSucess(file) {
-      console.log(file);
-      this.fileList = [{ name: file.data.fileType, url: file.data.urlPath }];
-      this.$emit("input", this.fileList);
-      this.$emit("change", this.fileList);
+    getImages(el) {
+      var file = el.target.files[0];
+      var type = file.type.split("/")[0];
+      if (type === "image") {
+        this.upload(file);
+      } else {
+        this.$message.warn("只能上次图片格式");
+      }
     },
-    handleRemove(file) {
-      this.fileList = [];
-      this.$emit("input", []);
-      this.$emit("change", []);
+    upload(imgUrl) {
+      var that = this;
+      console.log(that.headers);
+      var formdata = new FormData();
+      formdata.append("file", imgUrl);
+      axios
+        .post(this.requestUrl, formdata, {
+          headers: that.headers
+        })
+        .then(response => {
+          let res = response.data;
+          if (res.code == "200") {
+            that.uploadImgUrl = res.data.urlPath;
+            that.$emit("input", that.uploadImgUrl);
+            that.$emit("change", that.uploadImgUrl);
+          }
+        });
+    },
+    changeInput(e) {
+      if (e) {
+        this.uploadImgUrl = e;
+      } else {
+        this.$refs.files.value = "";
+        this.uploadImgUrl = "";
+      }
+      this.$emit("input", this.uploadImgUrl);
+      this.$emit("change", this.uploadImgUrl);
     }
   }
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.file {
+  position: absolute;
+  width: 100%;
+  padding: 100%;
+  right: 0;
+  top: 0;
+  opacity: 0;
+}
+/deep/.el-input-group__append,
+/deep/.el-input-group__prepend {
+  padding: 0 10px !important;
+  overflow: hidden;
+}
+.iconfont {
+  font-size: 12px;
+}
+</style>

report-ui/src/views/report/bigscreen/designer/index.vue

@@ -319,6 +319,7 @@ export default {
       widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
 
       var middleWidth = this.bodyWidth - widthLeftAndRight;
+      console.log(middleWidth, this.bodyWidth, widthLeftAndRight);
       return middleWidth;
     },
     middleHeight() {
@@ -399,15 +400,15 @@ export default {
         }
       }
       return {
-        backgroundColor: data.backgroundColor,
-        backgroundImage: data.backgroundImage,
-        height: data.height,
-        title: data.title,
-        width: data.width
+        backgroundColor: (data && data.backgroundColor) || "",
+        backgroundImage: (data && data.backgroundImage) || "",
+        height: (data && data.height) || "",
+        title: (data && data.title) || "",
+        width: (data && data.width) || ""
       };
     },
     handleInitEchartsData(data) {
-      const widgets = data.dashboard.widgets;
+      const widgets = data.dashboard ? data.dashboard.widgets : [];
       const widgetsData = [];
       for (let i = 0; i < widgets.length; i++) {
         var obj = {};

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -649,7 +649,7 @@ const widgetTools = [
           name: 'imageAdress',
           required: false,
           placeholder: '',
-          value: [{url: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg'}],
+          value: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg',
         },
         {
           type: 'vue-color',

report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue

@@ -45,10 +45,7 @@ export default {
     },
     imgStyle() {
       return {
-        imageAdress:
-          this.options.setup.imageAdress.length > 0
-            ? this.options.setup.imageAdress[0].url
-            : "",
+        imageAdress: this.transStyle.imageAdress,
         "border-radius": this.transStyle.borderRadius + "px",
         opacity: this.transStyle.transparency / 100
       };