shaun-sheep 5 vuotta sitten
vanhempi
commit
fc1b86786a

+ 44 - 6
src/components/ledger/details/detail/cruxDialog.vue

@@ -1,9 +1,21 @@
 <template>
-  <el-dialog title="关键信息点" :visible.sync="dialogFormVisible">
+  <el-dialog title="关键信息点" :visible.sync="dialogFormVisible" class="crux-dialog">
+    <section v-for="(val,key,i) in list" :key="i">
+      <h4 class="base">{{key}}</h4>
+      <div v-for="(value,keys,index) in val.paths"
+           :key="index"
+           style="width: 24%;display: inline-block;margin-left: 20px">
+        <el-checkbox
+          v-model="value.KeyWord"
+          :label="value.InfoPointName"
+          @change="changCheckbox(value)"
+        />
+      </div>
+    </section>
 
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      <el-button type="primary" @click="save">保 存</el-button>
     </div>
   </el-dialog>
 </template>
@@ -11,19 +23,45 @@
 <script>
   export default {
     name: "cruxDialog",
+    props: [],
     data() {
       return {
-        dialogFormVisible: false
+        dialogFormVisible: false,
+        list: {},
+        type: '',//设备类型
+        checkList: [],
+        check: {}
       }
     },
     methods: {
-      dialogOpen() {
+      dialogOpen(data, type) {
+        this.type = type
+        this.list = data.allMessage
+        console.log(data)
         this.dialogFormVisible = true
+      },
+      changCheckbox(val) {
+        let arr = []
+        let param = {
+          Type: this.type,
+          oPointCode: val.InfoPointCode,
+          KeyWord: val.KeyWord
+        }
+        let obj = Object.assign({}, param)
+        console.log(obj, 'obj')
+      },
+      save() {
+
       }
     }
   }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .crux-dialog {
+    /deep/ .el-dialog__body {
+      height: 420px;
+      overflow: auto;
+    }
+  }
 </style>

+ 30 - 2
src/components/ledger/details/detail/exhibitionBaseInformation.vue

@@ -6,8 +6,36 @@
          style="width: 47%;display: inline-block;margin-left: 20px">
       <span> {{value.InfoPointName}}:</span>
 
-      <el-popover v-if="value.Value && value.Value.length && value.Value.length>12" placement="top" width="160"
-                  trigger="hover" >
+      <el-popover
+        v-if="value.Value && value.Value.length && value.Value.length>12 && value.Path=='EquipQRCode'"
+        placement="top"
+        width="360"
+        trigger="hover">
+        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
+        <div style="overflow:hidden;">
+          <div style="float:left;width: 60%">
+          <img
+            style="width:200px;height:200px;"
+            :src="'/image-service/common/file_get/'+ value.Value +'?systemId=dataPlatform'"
+            alt="二维码"
+          >
+          </div>
+          <div style="float:right;width: 40%;margin-top: 30px">
+
+          <span>{{value.Value}}</span>
+          </div>
+        </div>
+
+        <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>
+      <el-popover
+        v-else-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">

+ 3 - 3
src/components/ledger/details/detail/exhibitionCrux.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="exhibition-crux">
     <p class="title">{{exhibitionCrux.title}}
-      <span class="el-icon-s-tools setting" @click="setting"></span></p>
+      <span class="icon-shezhi iconfont setting" @click="setting"></span></p>
     <div style="text-align: center" v-if="!exhibitionCrux.cruxArray.length">暂无数据</div>
   <cruxDialog ref="setting"/>
   </section>
@@ -12,14 +12,14 @@
 
   export default {
     name: "exhibition-crux",
-    props: ['exhibitionCrux'],
+    props: ['exhibitionCrux','type'],
     components: {cruxDialog},
     data() {
       return {}
     },
     methods: {
       setting() {
-        this.$refs.setting.dialogOpen()
+        this.$refs.setting.dialogOpen(this.exhibitionCrux,this.type)
       }
     }
   }

+ 27 - 0
src/components/ledger/details/detail/exhibitionEnergy.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="exhibition-energy">
+    <div class="title">
+      <section>
+        <h4 class="base">{{exhibitionEnergy.title}}</h4>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "exhibitionEnergy",
+    props: ['exhibitionEnergy']
+  }
+</script>
+
+<style scoped lang="less">
+  .exhibition-energy {
+    .base {
+      margin: 10px;
+      font-weight: 600;
+      text-indent: 10px;
+      border-bottom: 1px dashed #eee;
+    }
+  }
+</style>

+ 11 - 51
src/components/ledger/details/detail/exhibitionFile.vue

@@ -3,74 +3,34 @@
     <p class="title">
       <span class=" iconfont icon-fujian"></span>
       {{exhibitionFile.title}}</p>
-    <p class="text">xxx</p>
-    <section>
-      <el-row class="content">
-        <template>
-          <el-col :span="10" class="df">
-            <el-image
-              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-              style="width: 70%;height: 70%;"
-            />
-          </el-col>
-          <el-col :span="10" class="df">
-            <div>名称xxx</div>
-            <div>2020-02-02</div>
-          </el-col>
-          <el-col :span="4" class="df">
-            <el-button class="icon-download iconfont" type="text"/>
-          </el-col>
-        </template>
+    <div>
+      <lookFile :exhibitionFile="exhibitionFile"/>
+    </div>
 
-      </el-row>
-      <el-row class="content">
-        <template>
-          <el-col :span="10" class="df">
-            <el-image
-              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-              style="width: 70%;height: 70%;"
-            />
-          </el-col>
-          <el-col :span="10" class="df">
-            <p>名称xxx</p>
-            <p>2020-02-02</p>
-          </el-col>
-          <el-col :span="4" class="df">
-            <el-button class="icon-download iconfont" type="text"/>
-          </el-col>
-        </template>
-
-      </el-row>
-    </section>
   </div>
 </template>
 
 <script>
+  import lookFile from "./lookFile";
     export default {
       name: "exhibition-file",
-      props: ['exhibitionFile']
+      props: ['exhibitionFile'],
+      data() {return{}},
+      components:{lookFile}
     }
 </script>
 
 <style scoped lang="less">
   .exhibition-file {
+    border: 1px solid #eeeeee;
+    background: #FFFFFF;
+    margin-bottom: 10px;
+
     .title {
       border-bottom: 1px solid #eee;
       padding: 10px 0;
       font-weight: 600;
       text-indent: 10px;
     }
-    .content {
-      width: 95%;
-      height: 120px;
-      border: 1px solid #eee;
-      margin: 10px auto;
-    }
-    .df{
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center
-    }
   }
 </style>

+ 7 - 20
src/components/ledger/details/detail/exhibitionImage.vue

@@ -1,17 +1,10 @@
 <template>
   <div class="exhibition-image">
     <p class="title">
-      <span class=" el-icon-picture"></span>
+      <span class=" icon-floorplan iconfont"></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>-->
-<!--      <lookImage :readOnly="false" :keysArr="deepcopy(keysArr)"/>-->
-
+      <lookImage  :exhibitionImage="exhibitionImage"/>
     </div>
 
   </div>
@@ -25,16 +18,7 @@
     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'
-        // ],
+
       }
     },
     methods:{
@@ -47,6 +31,9 @@
 
 <style lang="less" scoped>
   .exhibition-image {
+    border: 1px solid #eeeeee;
+    background: #fff;
+    margin-bottom: 10px;
     .title {
       border-bottom: 1px solid #eee;
       padding: 10px 0;
@@ -56,7 +43,7 @@
 
     .image {
       margin: 10px;
-      text-align: center;
+      /*text-align: center;*/
     }
 
   }

+ 11 - 3
src/components/ledger/details/detail/exhibitionMaintain.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="exhibition-maintain">
     <p class="title">
-      <span class=" iconfont icon-weixiubeijing" style="margin: 0 30px 0 10px"></span>
+      <span class=" iconfont icon-weixiubeijing"></span>
       {{exhibitionMaintain.title}}
       <span class="iconfont icon-right" style="float: right;margin-right: 20px"></span></p>
   </div>
@@ -10,10 +10,18 @@
 <script>
   export default {
     name: "exhibitionMaintain",
-props:['exhibitionMaintain']
+    props: ['exhibitionMaintain']
   }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .exhibition-maintain {
 
+    .title {
+      margin-left: 10px;
+      border-bottom: 1px solid #eee;
+      font-weight: 600;
+      text-indent: 10px;
+    }
+  }
 </style>

+ 51 - 0
src/components/ledger/details/detail/exhibitionVideo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="exhibition-video">
+    <p class="title">
+      <span class=" icon-shipin-tianchong iconfont"></span>
+      {{exhibitionVideo.title}}</p>
+    <div class="image">
+      <lookVideo  :exhibitionVideo="exhibitionVideo"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import lookVideo from "./lookVideo";
+  export default {
+    name: "exhibition-video",
+    props: ['exhibitionVideo'],
+    components:{lookVideo},
+    data() {
+      return {
+
+      }
+    },
+    methods:{
+      deepcopy(obj) {
+        return JSON.parse(JSON.stringify(obj));
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .exhibition-video {
+    border: 1px solid #eeeeee;
+    background: #fff;
+    margin-bottom: 10px;
+    .title {
+      border-bottom: 1px solid #eee;
+      padding: 10px 0;
+      font-weight: 600;
+      text-indent: 10px;
+    }
+
+    .image {
+      margin: 10px;
+      /*text-align: center;*/
+    }
+
+  }
+
+</style>

+ 209 - 0
src/components/ledger/details/detail/lookFile.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="exhibition-file">
+    <div v-if="Object.keys(exhibitionFile.list).length">
+      <div v-for="(val,key,i) in exhibitionFile.list" :key="i">
+        <div class="" v-for="(j,index) in val">
+          <p class="title">{{key}}</p>
+          <div v-if="j.fileList !=undefined && j.fileList.length">
+            <div v-for="(item,index) in j.fileList" class="content">
+              <!--          图标-->
+              <div class="file-box" >
+                <div class="file-box-left ">
+                  <div class="file-box-left-content ">
+                    <span class="iconfont icon-Excel excel fs20"></span>
+                  </div>
+                </div>
+                <div class="file-box-center">
+                  <p style="margin-top: 20px"> {{delFile(item.Name)}}</p>
+                  <p> {{delFile(item.CreateTime)}}</p>
+                </div>
+                <div class="file-box-right ">
+                  <span
+                    style="height: 88px;"
+                    class="iconfont icon-download1 df fs20"
+                    @click="download(item.Key)"/>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
+        </div>
+      </div>
+    </div>
+    <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: ['exhibitionFile'],
+    data() {
+      return {};
+    },
+    created() {
+    },
+    methods: {
+
+      //处理地址
+      delFile(name) {
+        return name.length > 20 ? name.substring(0, 20) + "..." : name
+      },
+      //点击下载
+      download(key) {
+        console.log(key)
+        window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
+      },
+
+      //删除图片
+      deleteFile(i, key) {
+        this.filesArr.splice(i, 1);
+        this.$emit("change", this.filesArr, this.defined);
+      },
+
+      //上传
+      uploadAndSubmit(item) {
+        // var form = document.forms["demoForm"];
+
+        // if (form["file"].files.length > 0) {
+        // 寻找表单域中的 <input type="file" ... /> 标签
+        // var file = form["file"].files[0];
+
+        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 key = "&key=" + fileType[0] + file.uid + "." + type
+        let CreateTime = tools.formatDate(new Date(file.lastModified))
+        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 */
+              "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
+              /*, async, default to true */
+            );
+            //xhr.overrideMimeType("application/octet-stream");
+            xhr.send(reader.result);
+            xhr.onreadystatechange = function () {
+              if (xhr.readyState == 4) {
+                console.log(xhr)
+                if (xhr.status == 200) {
+                  let fileObject = {
+                    Key: key.split("=")[1],
+                    Type: type,
+                    Name: file.name,
+                    CreateTime,
+                    SystemId: 'dataPlatform'
+                  }
+                  vm.filesArr.push(fileObject);
+                  vm.$emit("change", vm.filesArr, vm.defined);
+                } else {
+                  this.$message.error(res.data.ResultMsg)
+                }
+              }
+            };
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      }
+    },
+
+  };
+</script>
+
+<style lang="less" scoped>
+  .exhibition-file {
+    .title {
+      border-left: 8px solid black;
+      margin: 10px;
+      font-weight: 600;
+      text-indent: 10px;
+      display: block;
+      overflow: hidden;
+    }
+
+    .df {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .file-box {
+      border: 1px solid #eee;
+   margin: 10px;
+      height: 88px;
+
+      .file-box-left {
+        display: inline-block;
+        width: 20%;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        .file-box-left-content {
+          background: #eeeeee;
+          width: 50px;
+          height: 50px;
+          margin: 20px 14px;
+          .excel{
+            display: block;
+            padding-top: 5px;
+          }
+        }
+      }
+
+      .file-box-center {
+        display: inline-block;
+        width: 58%;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+      }
+
+      .file-box-right {
+        display: inline-block;
+        width: 19%;
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+
+    .df {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .fs20 {
+      font-size: 20px;
+    }
+
+    .list-name {
+      text-align: center;
+    }
+  }
+</style>

+ 39 - 113
src/components/ledger/details/detail/lookImage.vue

@@ -1,89 +1,35 @@
-<!--
-    @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 v-if="Object.keys(exhibitionImage.list).length">
+        <div v-for="(val,key,i) in exhibitionImage.list" :key="i">
+          <div class="point-view" v-for="(j,index) in val">
+            <p class="title">{{key}}</p>
+            <div v-if="j.PicList !=undefined && j.PicList.length">
+              <template v-for="(item,index) in j.PicList">
+                <div class="point-image">
+                  <img @click="lookImg" :src="imageGetUrl + '&key=' +item.Key" alt v-load>
+                  <p class="pic-name">{{item.Name}}</p>
+                </div>
+              </template>
+            </div>
+            <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
+          </div>
         </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 style="text-align: center" v-else>暂无数据</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 []
-        }
-      }
-    },
+    props: ['exhibitionImage'],
     data() {
       return {
         baseUrl: "",
@@ -96,49 +42,13 @@
         }
       };
     },
-    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"];
@@ -317,13 +227,25 @@
 <style lang="less">
   #sagaUploads {
     overflow: hidden;
+
+    .title {
+      border-left: 8px solid black;
+      margin: 10px;
+      font-weight: 600;
+      text-indent: 10px;
+      display: block;
+      overflow: hidden;
+    }
+
     .avatar-uploader {
       height: 180px;
       width: 180px;
       overflow: hidden;
+
       .el-upload {
         width: 180px;
         height: 180px;
+
         .el-upload-dragger {
           width: 180px;
           height: 180px;
@@ -338,17 +260,21 @@
       }
     }
     .point-view {
-      float: left;
-      margin-right: 10px;
-      margin-bottom: 10px;
-      overflow: hidden;
-      height: 240px;
+      .pic-name {
+        position: absolute;
+        right: 59px;
+        display: inline-block;
+        background: #fff;
+        color: #000;
+        padding: 3px;
+        z-index: 99;
+        border-radius: 8px;
+        bottom: 5px;
+      }
     }
     .point-image {
-      width: 180px;
       height: 180px;
       position: relative;
-      border: 1px solid #ccc;
       overflow: hidden;
       img {
         z-index: 11;

+ 297 - 0
src/components/ledger/details/detail/lookVideo.vue

@@ -0,0 +1,297 @@
+<template>
+  <div id="sagaUploads">
+    <div class="saga-upload-images">
+      <div v-if="Object.keys(exhibitionVideo.list).length">
+        <div v-for="(val,key,i) in exhibitionVideo.list" :key="i">
+          <div class="point-view" v-for="(j,index) in val">
+            <p class="title">{{key}}</p>
+            <div v-if="j.PicList !=undefined && j.PicList.length">
+              <template v-for="(item,index) in j.PicList">
+                <div class="point-image">
+                  <video
+                    width="100%"
+                    height="100%;"
+                    :src="imageGetUrl + '&key=' +item.Key"
+                    controls="controls"
+                  >您的浏览器不支持 video 标签。</video>
+                </div>
+              </template>
+            </div>
+            <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
+          </div>
+        </div>
+      </div>
+      <div style="text-align: center" v-else>暂无数据</div>
+    </div>
+    <details-dialog :title="'图片'" :iframeSrc="iframeSrc" :dialog="dialog" :setData="imagesArr"></details-dialog>
+  </div>
+</template>
+<script>
+  import detailsDialog from "@/components/business_space/lib/detailsDia"
+
+  export default {
+    components: {
+      detailsDialog
+    },
+    props: ['exhibitionVideo'],
+    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
+        }
+      };
+    },
+    methods: {
+      //查看图片
+      lookImg() {
+        this.dialog.details = true
+        this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
+      },
+
+      //上传
+      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;
+
+    .title {
+      border-left: 8px solid black;
+      margin: 10px;
+      font-weight: 600;
+      text-indent: 10px;
+      display: block;
+      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 {
+      .pic-name {
+        position: absolute;
+        right: 59px;
+        display: inline-block;
+        background: #fff;
+        color: #000;
+        padding: 3px;
+        z-index: 99;
+        border-radius: 8px;
+        bottom: 5px;
+      }
+    }
+    .point-image {
+      height: 180px;
+      position: relative;
+      overflow: hidden;
+      img {
+        z-index: 11;
+      }
+      i {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        background-color: #fff;
+        padding: 5px;
+        cursor: pointer;
+        z-index: 66;
+      }
+    }
+  }
+</style>

+ 3 - 1
src/components/ledger/details/detail/selectRadio.vue

@@ -6,7 +6,9 @@
         style=" margin: 0 10px;"
         v-model="radio"
         @change="changeRadio"
-        v-for="(item,index) in selectRadio.radioList">
+        v-for="(item,index) in selectRadio.radioList"
+        :key="index"
+      >
         <el-radio :label="item.label">{{item.value}}</el-radio>
       </el-radio-group>
     </template>

+ 3 - 0
src/components/ledger/handsontables/device.vue

@@ -421,6 +421,7 @@
             if (this.tableData && this.tableData.length) {
               if (this.onlyRead) {
                 this.getBatch(this.tableData)
+
               }
               this.initTable();
             }
@@ -486,6 +487,7 @@
             criterias: []
           }
         }
+
         //一级遍历list
         this.tableHeader.map(head => {
           //如果一级标签为动态参数或者设定参数放入数据等待请求
@@ -508,6 +510,7 @@
         })
         if (param.data.criterias.length) {
           BeatchQueryParam(param, res => {
+
             if (!this.onlyRead) {
               return false
             }

+ 1 - 1
src/utils/scan/tools.js

@@ -567,4 +567,4 @@ function dateToDate(date) {
   return sDate;
 }
 
-export default tools
+export default tools

+ 97 - 25
src/views/ledger/facility/details/index.vue

@@ -7,7 +7,7 @@
     <div class="content">
       <div class="content-left">
         <div class="content-keyPoint">
-          <exhibitionCrux :exhibitionCrux="exhibitionCrux"/>
+          <exhibitionCrux :exhibitionCrux="exhibitionCrux" :type="type"/>
         </div>
         <div class="content-showType">
           <selectRadio
@@ -25,7 +25,9 @@
           </div>
           <div class="content-point-right">
             <el-scrollbar style="height:100%;">
-              <div style="height:1000px">6</div>
+              <div style="height:1000px">
+                <exhibitionEnergy :exhibitionEnergy="exhibitionEnergy"/>
+              </div>
             </el-scrollbar>
           </div>
         </div>
@@ -38,6 +40,7 @@
           <el-scrollbar style="height:100%;">
             <div style="height:1000px">
               <exhibitionImage :exhibitionImage="exhibitionImage"/>
+              <exhibitionVideo :exhibitionVideo="exhibitionVideo"></exhibitionVideo>
               <exhibitionFile :exhibitionFile="exhibitionFile"/>
             </div>
           </el-scrollbar>
@@ -52,17 +55,22 @@
   import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
   import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
   import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
+  import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
   import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
+  import exhibitionEnergy from "@/components/ledger/details/detail/exhibitionEnergy";
   import exhibitionMaintain from "@/components/ledger/details/detail/exhibitionMaintain";
   import selectRadio from "@/components/ledger/details/detail/selectRadio";
   import tools from "@/utils/scan/tools"
-  import { getDataDictionary, queryEquip, BeatchQueryParam } from "@/api/scan/request";
-  import { mapGetters, mapActions } from "vuex";
+  import {BeatchQueryParam, 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
@@ -81,10 +89,12 @@
     components: {
       exhibitionBaseInformation,
       exhibitionFile,
+      exhibitionVideo,
       exhibitionImage,
       exhibitionMaintain,
       selectRadio,
-      exhibitionCrux
+      exhibitionCrux,
+      exhibitionEnergy
     },
     created() {
       this.id = this.$route.query.equipId;
@@ -129,17 +139,27 @@
         exhibitionBaseInformation: {
           information: {}
         },
+        exhibitionEnergy:{
+          title:'能耗信息'
+        },
         exhibitionMaintain: {
           title: '维修/维保记录'
         },
-        exhibitionFile: {},
+        exhibitionFile: {
+          title: '文件',
+          list: {}
+        },
         exhibitionCrux: {
           title: '关键信息点:',
           cruxArray: [],
-          allMessage:[],//全部信息点
+          allMessage: [],//全部信息点
         },
         exhibitionImage: {
           title: '图片',
+          list: {}
+        },
+        exhibitionVideo:{
+          title:'视频',
           list:{}
         }
       }
@@ -169,19 +189,32 @@
         })
         Promise.all([promise1, promise2]).then(values => {
           this.pointData = values[0].Content;
-          this.exampleData = values[1].Content[0];
+          let obj = flattenKeys(values[1].Content[0])
+          this.exampleData = obj;
           this.handleRadios(1)
+
           this.pointData.forEach(item => {
             if (item.InputMode == "L" || item.InputMode == "L1" || item.InputMode == "L2" || item.InputMode == "M") {
               let cur = tools.dataForKey(this.exampleData, item.Path);
               if (cur) {
                 this.criterias.push({
-                  id: exampleData.EquipID,
+                  id: this.exampleData.EquipID,
                   code: item.InfoPointCode
                 })
               }
             }
           })
+          let params = { //获取动态参数
+            secret: this.secret,
+            ProjId: this.projectId,
+            criterias: this.criterias
+          }
+          if (this.criterias.length) {
+            BeatchQueryParam(params, res => {
+              console.log(params,'===param===')
+            })
+          }
+
         })
       },
       handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
@@ -190,8 +223,10 @@
           arr = this.pointData.filter(i => i.Visible)
           //关键信息点
           this.exhibitionCrux.cruxArray = arr.filter(i => i.KeyWord) //todo 融合
-          //  图片和文件的处理
+          //  图片和的处理
           this.handlePicList(arr)
+          //  文件处理
+          this.handleFileList(arr)
 
         } else if (val == 2) { //有值信息点
           let list = this.pointData
@@ -203,9 +238,13 @@
               }
             }
             arr = list.filter(k => k.value)
+            this.handlePicList(arr)
+            this.handleFileList(arr)
           })
         } else { //全部信息点
           arr = this.pointData
+          this.handlePicList(arr)
+          this.handleFileList(arr)
         }
         this.displayData(arr)
       },
@@ -240,30 +279,65 @@
         //展示图片
         this.exhibitionImage.list = picObject
       },
+      handleFileList(arr) {
+        let picObject = {}
+        //处理数据格式
+        let obj = flattenKeys(this.exampleData)
+        arr.map(i => {
+          if (i.InputMode == 'F2') {
+            switch (i.Path) {
+              case 'LedgerParam.InsuranceDoc.InsuranceFile':
+              case 'LedgerParam.PhotoDoc.Archive':
+              case 'LedgerParam.Siteinstall.CheckReport':
+                if (obj.hasOwnProperty(i.Path)) {
+                  i.fileList = obj[i.Path]
+                }
+                if (picObject[i.InfoPointName]) {
+
+                } else {
+                  picObject[i.InfoPointName] = []
+                }
+
+                picObject[i.InfoPointName].push({
+                  ...i,
+                })
+                break
+            }
+          }
+
+        })
+        //展示文件
+        this.exhibitionFile.list = picObject
+      },
+
       displayData(arr) {//对数据进行处理传给组件展示
         const result = {}
         arr.forEach(i => {
           if (this.exampleData.hasOwnProperty(i.Path) && this.currentRadio != 2) {
             i.value = this.exampleData[i.Path]
-            console.log(i.value, '======')
           }
-          if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
-            result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
-              Path: i.Path,
-              InfoPointName: i.InfoPointName,
-              InfoPointCode: i.InfoPointCode,
-              Value: i.value
-            })
-          } else {
-            result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
-              paths: [{
+          if(i.InputMode != 'F2') {
+            if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
+              result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
                 Path: i.Path,
                 InfoPointName: i.InfoPointName,
                 InfoPointCode: i.InfoPointCode,
-                Value: i.value
-              }]
+                Value: i.value,
+                Visible: i.Visible
+              })
+            } else {
+              result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
+                paths: [{
+                  Path: i.Path,
+                  InfoPointName: i.InfoPointName,
+                  InfoPointCode: i.InfoPointCode,
+                  Value: i.value,
+                  Visible: i.Visible
+                }]
+              }
             }
           }
+
         })
         this.exhibitionBaseInformation.information = result
         this.exhibitionCrux.allMessage = result
@@ -274,7 +348,6 @@
       changeRadio(val) { //1,需采集,2,有值,3,全部
         this.handleRadios(val)
         this.currentRadio = val
-        console.log(val, '=======val======')
       }
     },
     watch: {
@@ -353,7 +426,6 @@
         .content-media {
           height: calc(100% - 60px);
           border: 1px solid #ccc;
-          background: @bgc;
         }
       }
     }