Browse Source

1,文字过长,显示省略,hover显示,复制
2,切换select状态展示
3,图片对象整理

shaun-sheep 5 years ago
parent
commit
bae276123a

+ 36 - 36
src/components/ledger/details/detail/exhibitionBaseInformation.vue

@@ -5,28 +5,17 @@
     <div v-for="(value,keys,index) in val.paths"
          style="width: 47%;display: inline-block;margin-left: 20px">
       <span> {{value.InfoPointName}}:</span>
-      <span>{{value.Value}}</span>
-<!--                <el-popover-->
-<!--                  placement="top-start"-->
-<!--                  width="160"-->
-<!--                  trigger="hover"-->
-<!--                  v-model="visible">-->
-<!--                  <p>{{value.Value}}</p>-->
-<!--                  <div style="text-align: right; margin: 0">-->
-<!--                    <el-button-->
-<!--                      type="primary"-->
-<!--                      size="mini"-->
-<!--                      @click="handleCopy"-->
-<!--                    >复制-->
-<!--                    </el-button>-->
-<!--                  </div>-->
-<!--                  <el-button-->
-<!--                    slot="reference"-->
-<!--                    type="text"-->
-<!--                  >xxxx</el-button>-->
-<!--                </el-popover>-->
-
 
+      <el-popover v-if="value.Value && value.Value.length && value.Value.length>12" placement="top" width="160"
+                  trigger="hover" >
+        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
+        <p>{{value.Value}}</p>
+        <div style="text-align: center; margin: 0">
+          <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
+        </div>
+        <el-button slot="reference" type="text">{{handleName(value.Value)}}</el-button>
+      </el-popover>
+      <span v-else>{{value.Value}}</span>
     </div>
 
 
@@ -35,22 +24,27 @@
 </template>
 
 <script>
-    export default {
-      name: "exhibition-baseInformation",
-      props: ['exhibitionBaseInformation'],
-      data() {
-        return {
-          visible: false,
-        }
+  export default {
+    name: "exhibition-baseInformation",
+    props: ['exhibitionBaseInformation'],
+    data() {
+      return {}
+    },
+    methods: {
+      handleCopy(data) {
+        let oInput = document.createElement('input')
+        oInput.value = data
+        document.body.appendChild(oInput)
+        oInput.select()
+        document.execCommand('Copy')
+        this.$message.success('复制成功')
+        oInput.remove()
       },
-      methods: {
-        handleCopy() {
-          this.visible = false
-          document.execCommand('Copy')
-          this.$message.success('复制成功')
-        }
+      handleName(val) {
+        return val.length > 12 ? val.substr(1, 12) + '...' : val
       }
     }
+  }
 </script>
 
 <style scoped lang="less">
@@ -58,11 +52,17 @@
     section {
       /*border: 1px solid #eeeeee;*/
       /*margin: 10px;*/
-      .base{
+
+      .base {
         margin: 10px;
         font-weight: 600;
         text-indent: 10px;
-        border-bottom:1px dashed #eee ;
+        border-bottom: 1px dashed #eee;
+      }
+
+      /deep/ .el-button--text {
+        color: #555 !important;
+        font-size: 14px;
       }
     }
     .ml-10{

+ 25 - 16
src/components/ledger/details/detail/exhibitionImage.vue

@@ -4,34 +4,43 @@
       <span class=" el-icon-picture"></span>
       {{exhibitionImage.title}}</p>
     <div class="image">
-      <el-image
-        :preview-src-list="srcList"
-        :src="item"
-        style="width: 20rem;height: 15rem;"
-        v-for="(item, index) in url" :key="index">
-      </el-image>
+<!--      <el-image-->
+<!--        :preview-src-list="srcList"-->
+<!--        :src="item"-->
+<!--        style="width: 20rem;height: 15rem;"-->
+<!--        v-for="(item, index) in url" :key="index">-->
+<!--      </el-image>-->
+<!--      <lookImage :readOnly="false" :keysArr="deepcopy(keysArr)"/>-->
+
     </div>
 
   </div>
 </template>
 
 <script>
+  import lookImage from "./lookImage";
   export default {
     name: "exhibition-image",
     props: ['exhibitionImage'],
+    components:{lookImage},
     data() {
       return {
-        url: [
-          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
-        ],
-        srcList: [
-          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
-        ],
+        // url: [
+        //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //   'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        //   'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        // ],
+        // srcList: [
+        //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //   'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        //   'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        // ],
       }
+    },
+    methods:{
+      deepcopy(obj) {
+        return JSON.parse(JSON.stringify(obj));
+      },
     }
   }
 </script>

+ 367 - 0
src/components/ledger/details/detail/lookImage.vue

@@ -0,0 +1,367 @@
+<!--
+    @param keysArr 承接数组
+    @param readOnly  删除按钮是否显示,上传是否显示
+    @param max     上传最大数限制
+    @click change  承接数组发生变化时触发函数
+-->
+<template>
+  <div id="sagaUploads">
+    <div class="saga-upload-images">
+      <div v-if="type != 'video'" class="point-view" v-for="(item,index) in imagesArr">
+        <div class="point-image">
+<!--          <i v-if="!readOnly" class="el-icon-delete" @click="delImage(index,item)"></i>-->
+          <img @click="lookImg" :src="imageGetUrl + '&key=' +item.Key" alt v-load>
+        </div>
+        <p v-if="readOnly" >{{item.Name}}</p>
+<!--        <form-input v-else :label="''" @change="getName" :keys="index" :value="item.Name" :width="10"></form-input>-->
+      </div>
+<!--      <div v-if="type == 'video'" class="point-view" v-for="(item,index) in imagesArr">-->
+<!--        <div class="point-image">-->
+<!--          <i v-if="!readOnly" class="el-icon-delete" @click="delImage(index,item)"></i>-->
+<!--          <video-->
+<!--            width="100%"-->
+<!--            height="100%;"-->
+<!--            :src="imageGetUrl + '&key=' +item.Key"-->
+<!--            controls="controls"-->
+<!--          >您的浏览器不支持 video 标签。</video>-->
+<!--        </div>-->
+<!--        <p v-if="readOnly" >{{item.Name}}</p>-->
+<!--        <form-input v-else :label="''" @change="getName" :keys="index" :value="item.Name" :width="10"></form-input>-->
+<!--      </div>-->
+<!--      <div v-if="!readOnly" style="float:left;">-->
+<!--        <el-upload-->
+<!--          class="avatar-uploader"-->
+<!--          :http-request="uploadAndSubmit"-->
+<!--          :show-file-list="false"-->
+<!--          :accept="accept"-->
+<!--          action-->
+<!--          drag-->
+<!--          style="position: relative"-->
+<!--        >-->
+<!--          <i class="el-icon-plus avatar-uploader-icon"></i>-->
+<!--        </el-upload>-->
+<!--        <video style="display:none;" id="video" controls/>-->
+<!--      </div>-->
+    </div>
+    <details-dialog :title="'图片'" :iframeSrc="iframeSrc" :dialog="dialog" :setData="imagesArr"></details-dialog>
+  </div>
+</template>
+<script>
+  import tools from "@/utils/scan/tools";
+  import formInput from "@/components/business_space/lib/formInput"
+  import detailsDialog from "@/components/business_space/lib/detailsDia"
+
+  export default {
+    components: {
+      formInput,
+      detailsDialog
+    },
+    props: {
+      keysArr: {
+        type: [Array, String]
+      },
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
+      max: {
+        type: [Number, String],
+        default: 6
+      },
+      accept: {
+        type: String,
+        default: "image/*"
+      },
+      type: {
+        type: String,
+        default: "image"
+      },
+      defined: null,
+      videoPicArr: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        baseUrl: "",
+        imageGetUrl: "/image-service/common/image_get?systemId=dataPlatform",
+        imageUploadUrl: "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true",
+        imagesArr: [],
+        iframeSrc: "",
+        dialog: {
+          details: false
+        }
+      };
+    },
+    created() {
+      this.imageFalg();
+    },
+    methods: {
+      getName(name, index) {
+        this.imagesArr[index].Name = name
+        this.$emit("change", this.imagesArr, this.defined, this.videoPicArr);
+      },
+      //判断是否为空
+      imageFalg() {
+        let type = typeof this.keysArr;
+        if (type == "string") {
+          this.imagesArr = [this.keysArr];
+        } else {
+          this.imagesArr = tools.copyArr(this.keysArr);
+        }
+
+        if (!this.keysArr) {
+          this.imagesArr = [];
+        }
+      },
+
+      //查看图片
+      lookImg() {
+        this.dialog.details = true
+        this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
+      },
+
+      //删除图片
+      delImage(i, key) {
+        if (this.type == "video") {
+          this.videoPicArr = this.videoPicArr.map(item => {
+            if (item.key.substring(0, item.length - 3) == this.imagesArr[i].key.substring(0, this.imagesArr[i].length - 3)) {
+              return undefined
+            } else {
+              return item
+            }
+          }).filter(p => p)
+        }
+        this.imagesArr.splice(i, 1);
+        this.$emit("change", this.imagesArr, this.defined, this.videoPicArr);
+      },
+
+      //上传
+      uploadAndSubmit(item, key) {
+        // var form = document.forms["demoForm"];
+
+        // if (form["file"].files.length > 0) {
+        // 寻找表单域中的 <input type="file" ... /> 标签
+        // var file = form["file"].files[0];
+
+        console.log("lalala", item)
+        let file = item.file;
+        // try sending
+        let reader = new FileReader();
+
+        let vm = this;
+
+        let fileType = file.name.split(".");
+        let type = fileType[fileType.length - 1];
+        let CreateTime = tools.formatDate(new Date(file.lastModified))
+
+        let uploadKey = file.uid
+        if (!!key) {
+          uploadKey = key
+        }
+
+        reader.onloadstart = function () {
+          // 这个事件在读取开始时触发
+        };
+        reader.onprogress = function (p) {
+          // 这个事件在读取进行中定时触发
+        };
+
+        reader.onload = function () {
+          // 这个事件在读取成功结束后触发
+        };
+        reader.onloadend = function () {
+          // 这个事件在读取结束后,无论成功或者失败都会触发
+          if (reader.error) {
+          } else {
+            // document.getElementById("bytesRead").textContent = file.size;
+            // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+            var xhr = new XMLHttpRequest();
+            xhr.open(
+              /* method */
+              "POST",
+              /* target url */
+              vm.imageUploadUrl + "&key=" + uploadKey + "." + type
+              /*, async, default to true */
+            );
+            //xhr.overrideMimeType("application/octet-stream");
+            xhr.send(reader.result);
+            xhr.onreadystatechange = function () {
+              if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                  if (vm.type == 'image') {
+                    vm.imagesArr.push({
+                      Name: uploadKey + '',
+                      Key: uploadKey + "." + type,
+                      SystemId: "dataPlatform",
+                      Type: "image",
+                      CreateTime
+                    });
+                  }
+                  if (type == 'mp4') {
+                    vm.imagesArr.push({
+                      Name: uploadKey + '',
+                      Key: uploadKey + "." + type,
+                      SystemId: "dataPlatform",
+                      Type: "video",
+                      CreateTime
+                    });
+                    vm.creatImg(vm.imageGetUrl + "&key=" + uploadKey + "." + type, uploadKey)
+                  }
+                  if (vm.type == "video" && type == "png") {
+                    vm.videoPicArr.push({
+                      Name: uploadKey + '',
+                      Key: uploadKey + "." + type,
+                      SystemId: "dataPlatform",
+                      Type: "image_video",
+                      CreateTime
+                    })
+                  }
+                  vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
+                }
+              }
+            };
+          }
+        };
+        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 });
+      },
+
+      creatImg(reader, key) {
+        var videoDom = document.getElementById('video');
+        videoDom.src = reader;
+        let vm = this
+        videoDom.onloadeddata = function () {
+          // 这里可以打印视频时长
+          // 这里取得视频封面
+          var canvas = document.createElement('canvas');
+          canvas.width = 300;
+          canvas.height = 300 * this.videoHeight / this.videoWidth;
+          canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
+          //将canvas的base64位图片转换成图片png的file
+          var blob = vm.dataURLtoBlob(canvas.toDataURL('image/png'), "image/png")
+          //将其转换成file对象
+          var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() })//blob转file
+          vm.uploadAndSubmit({ file: file }, key)
+        }
+      },
+    },
+    watch: {
+      keysArr: function (val) {
+        this.imageFalg();
+      }
+    },
+    //自定义指令
+    directives: {
+      load: function (el) {
+        let imgDom = document.createElement("img");
+        imgDom.style.position = "absolute";
+        imgDom.style.top = "-999px";
+        imgDom.style.opacity = 0;
+        imgDom.src = el.src;
+        el.src = "";
+        imgDom.onload = () => {
+          let width = imgDom.width;
+          let height = imgDom.height;
+          if (width > height) {
+            el.style.height = "100%";
+            el.style.width = "auto";
+            el.style.position = "absolute";
+            el.style.left = "50%";
+            el.style.top = "0";
+            el.style.transform = "translateX(-50%)";
+            el.style.webkitTransform = "translateX(-50%) translateY(0)";
+            el.style.MozTransform = "translateX(-50%) translateY(0)";
+            el.style.msTransform = "translateX(-50%) translateY(0)";
+            el.style.OTransform = "translateX(-50%) translateY(0)";
+          } else if (width < height) {
+            el.src = imgDom.src;
+            el.style.width = "100%";
+            el.style.height = "auto";
+            el.style.position = "absolute";
+            el.style.top = "50%";
+            el.style.left = "0";
+            el.style.transform = "translateY(-50%) translateX(0)";
+            el.style.webkitTransform = "translateY(-50%) translateX(0)";
+            el.style.MozTransform = "translateY(-50%) translateX(0)";
+            el.style.msTransform = "translateY(-50%) translateX(0)";
+            el.style.OTransform = "translateY(-50%) translateX(0)";
+          } else {
+            el.style.width = "100%";
+            el.style.height = "100%";
+            el.style.position = "absolute";
+            el.style.top = "0";
+            el.style.left = "0";
+            el.style.transform = "translateY(0) translateX(0)";
+            el.style.webkitTransform = "translateY(0) translateX(0)";
+            el.style.MozTransform = "translateY(0) translateX(0)";
+            el.style.msTransform = "translateY(0) translateX(0)";
+            el.style.OTransform = "translateY(0) translateX(0)";
+          }
+          el.src = imgDom.src;
+        };
+      }
+    }
+  };
+</script>
+<style lang="less">
+  #sagaUploads {
+    overflow: hidden;
+    .avatar-uploader {
+      height: 180px;
+      width: 180px;
+      overflow: hidden;
+      .el-upload {
+        width: 180px;
+        height: 180px;
+        .el-upload-dragger {
+          width: 180px;
+          height: 180px;
+          .el-icon-plus {
+            display: block;
+            width: 20px;
+            height: 20px;
+            font-size: 20px;
+            margin: 80px;
+          }
+        }
+      }
+    }
+    .point-view {
+      float: left;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      overflow: hidden;
+      height: 240px;
+    }
+    .point-image {
+      width: 180px;
+      height: 180px;
+      position: relative;
+      border: 1px solid #ccc;
+      overflow: hidden;
+      img {
+        z-index: 11;
+      }
+      i {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        background-color: #fff;
+        padding: 5px;
+        cursor: pointer;
+        z-index: 66;
+      }
+    }
+  }
+</style>

+ 49 - 27
src/views/ledger/facility/details/index.vue

@@ -58,7 +58,28 @@
   import tools from "../../../../utils/buildfloor/tools";
   import {getDataDictionary, queryEquip} from "@/api/scan/request";
   import {mapGetters} from "vuex";
+  function flattenKeys(obj) {
+    let res = {}
 
+    function isObject(val) {
+      return typeof val === 'object' && !Array.isArray(val)
+    }
+
+    function digKeys(prev, obj) {
+      Object.entries(obj).forEach(([key, value]) => {
+        const currentKey = prev ? `${prev}.${key}` : key
+        if (isObject(value)) {
+          digKeys(currentKey, value)
+        } else {
+          res[currentKey] = value
+        }
+      })
+    }
+
+    digKeys('', obj)
+
+    return res
+  }
   export default {
     name: "deviceDetails",
     components: {
@@ -118,9 +139,11 @@
         exhibitionCrux: {
           title: '关键信息点:',
           cruxArray: [],
+          allMessage:[],//全部信息点
         },
         exhibitionImage: {
-          title: '图片'
+          title: '图片',
+          list:{}
         }
       }
     },
@@ -163,7 +186,7 @@
           //  图片和文件的处理
           this.handlePicList(arr)
 
-        } else if (val == 2) { //有值
+        } else if (val == 2) { //有值信息点
           let list = this.pointData
           list.map(j => {
             if (this.exampleData.hasOwnProperty(j.Path)) {
@@ -174,7 +197,7 @@
             }
             arr = list.filter(k => k.value)
           })
-        } else { //全部
+        } else { //全部信息点
           arr = this.pointData
         }
         this.displayData(arr)
@@ -182,35 +205,33 @@
       handlePicList(arr) {
         let picObject = {}
         //处理数据格式
-        let obj = tools.formatData(this.exampleData)
-        console.log(obj, '==obj==')
+        let obj = flattenKeys(this.exampleData)
         arr.map(i => {
-            if (obj.hasOwnProperty('LedgerParam.PhotoDoc.Drawing')) {
+            if(i.InputMode == 'F2') {
+              switch (i.Path) {
+                case 'LedgerParam.PhotoDoc.Drawing':
+                case 'LedgerParam.Siteinstall.InstallPic':
+                case 'LedgerParam.Siteinstall.InstallDrawing':
+                case 'LedgerParam.PhotoDoc.Nameplate':
+                  if (obj.hasOwnProperty(i.Path)) {
+                    i.PicList = obj[i.Path]
+                  }
+                  if (picObject[i.InfoPointName]) {
 
-              console.log(obj['LedgerParam.PhotoDoc.Drawing'], '===i.Path==')
-              // i.picList = obj[i.Path]
-            }
-          //   console.log(i.picList,'picList')
-          switch (i.Path) {
-            case 'LedgerParam.PhotoDoc.Drawing':
-            case 'LedgerParam.Siteinstall.InstallPic':
-            case 'LedgerParam.Siteinstall.InstallDrawing':
-            case 'LedgerParam.PhotoDoc.Nameplate':
-              break
-          }
-          // if (picObject[i.InfoPointName]) {
-          //   picObject[i.InfoPointName].push({
-          //     Path: i.Path,
-          //     InfoPointName: i.InfoPointName,
-          //     InfoPointCode: i.InfoPointCode,
-          //   })
-          // } else {
-          //   picObject[i.InfoPointName] = []
-          // }
+                  } else {
+                    picObject[i.InfoPointName] = []
+                  }
 
+                  picObject[i.InfoPointName].push({
+                    ...i,
+                  })
+                  break
+              }
+            }
 
         })
-        console.log(picObject, 'picObject')
+        //展示图片
+        this.exhibitionImage.list = picObject
       },
       displayData(arr) {//对数据进行处理传给组件展示
         const result = {}
@@ -238,6 +259,7 @@
           }
         })
         this.exhibitionBaseInformation.information = result
+        this.exhibitionCrux.allMessage = result
       },
       goBack() {
         this.$router.push({path: "/ledger/facility"})