centaline-data-driven 1.2.98 → 1.2.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven",
-  "version": "1.2.98",
+  "version": "1.2.99",
   "description": "ccai",
   "author": "hjc <3226136347@qq.com>",
   "private": false,
@@ -21,7 +21,7 @@
     "save": "^2.4.0",
     "v-viewer": "^1.6.4",
     "vue": "2.5.17",
-    "vue-pdf": "^4.0.7",
+    "vue-pdf": "^4.3.0",
     "vue-ueditor-wrap": "^2.5.6",
     "vuedraggable": "^2.24.3"
   },

package/src/centaline/dynamicViewerFile/index.js

@@ -0,0 +1,11 @@
+import dynamicViewerFile from './src/dynamicViewerFile'
+
+dynamicViewerFile.install = function (Vue) {
+  Vue.component(dynamicViewerFile.name, dynamicViewerFile);
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(dynamicViewerFile);
+}
+
+export default dynamicViewerFile;

package/src/centaline/dynamicViewerFile/src/dynamicViewerFile.vue

@@ -0,0 +1,373 @@
+<template>
+  <div style="height: 100%" id="viewer-file">
+    <el-container style="height: 100%; border: 1px solid #eee">
+      <el-aside style="background-color: rgb(238, 241, 246)"
+        ><div>
+          <el-menu :default-openeds="openeds" :default-active="activeitem">
+            <el-submenu
+              :key="groupIndex"
+              :index="groupIndex.toString()"
+              v-for="(group, groupIndex) in MediaAlbum"
+            >
+              <template slot="title"> <i></i>{{ group.albumName }} </template>
+              <el-menu-item-group>
+                <el-menu-item
+                  @click="handleClick(item, groupIndex, index)"
+                  :key="index"
+                  :index="groupIndex.toString() + '-' + index.toString()"
+                  v-for="(item, index) in group.medias"
+                  >{{ item.mediaLabelName || item.fileName }}</el-menu-item
+                >
+              </el-menu-item-group>
+            </el-submenu>
+          </el-menu>
+        </div>
+      </el-aside>
+      <el-main>
+        <div
+          style="position: relative; width: 100%; height: 100%"
+          v-if="resultObject"
+        >
+          <!--VR-->
+          <template v-if="itemFile.mediaTypeID == '1'">
+            <div
+              class="viewerContent"
+              style="height: 100%; width: 800px; text-align: center"
+            >
+              暂不支持VR
+              <!-- <ct-viewerVR :VRUrl="resultObject"> </ct-viewerVR> -->
+            </div>
+          </template>
+          <!--Photo-->
+          <template v-else-if="itemFile.mediaTypeID == '2'">
+            <ct-viewerImage
+              ref="viewerImage"
+              :imgUrl="resultObject"
+              :rotate="rotate"
+            ></ct-viewerImage>
+          </template>
+          <!--ThreeDimensional-->
+          <template v-else-if="itemFile.mediaTypeID == '3'"
+            >暂不支持ThreeDimensional
+          </template>
+          <!--Video-->
+          <template v-else-if="itemFile.mediaTypeID == '4'">
+            <div class="viewerContent">
+              <video
+                preload="none"
+                :src="resultObject"
+                controls="controls"
+                class="viewerContent"
+                controlslist="nodownload"
+                :height="500"
+                :width="800"
+              >
+                您的浏览器不支持 video 标签。
+              </video>
+            </div>
+          </template>
+          <!--Audio-->
+          <template v-else-if="itemFile.mediaTypeID == '5'">
+            <div class="viewerContent">
+              <audio
+                preload="none"
+                :src="resultObject"
+                controls="controls"
+                class="viewerContent"
+                controlslist="nodownload"
+                style="width: 50%"
+              >
+                您的浏览器不支持 audio 标签。
+              </audio>
+            </div>
+          </template>
+          <!--File-->
+          <template v-else-if="itemFile.mediaTypeID == '6'">
+            <template
+              v-if="'doc,docx,xlsx'.search(FileExtension(itemFile)) > -1"
+            >
+              <div
+                class="viewerContent"
+                style="height: 100px; text-align: center"
+              >
+                <a :href="resultObject">
+                  <img :src="itemFile.thumbnailUrl" /><br />{{
+                    itemFile.mediaLabelName || itemFile.fileName
+                  }}</a
+                >
+              </div>
+            </template>
+            <template v-else-if="'pdf'.search(FileExtension(itemFile)) > -1">
+              <div
+                class="viewerContent"
+                style="height: 100%; width: 800px; text-align: center"
+              >
+                <ct-viewerPDF :pdfUrl="resultObject"> </ct-viewerPDF>
+              </div>
+            </template>
+          </template>
+          <template v-else> 不支持此类型：{{ itemFile.mediaTypeID }} </template>
+
+          <template v-if="resultObject != ''">
+            <div class="magnify-footer">
+              <div class="magnify-toolbar">
+                <a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-back"
+                  title="上一张"
+                  @click="jump(-1)"
+                ></a
+                ><a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-right"
+                  title="下一张"
+                  @click="jump(1)"
+                ></a>
+                <template v-if="itemFile.mediaTypeID == '2'">
+                  <a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh-left"
+                    title="左旋转"
+                    @click="rotateImg('L')"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh-right"
+                    title="右旋转"
+                    @click="rotateImg('R')"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-zoom-in"
+                    title="放大"
+                    @click="zoom(0.2)"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh"
+                    title="实际尺寸"
+                    @click="actualSize()"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-zoom-out"
+                    title="缩小"
+                    @click="zoom(-0.2)"
+                  >
+                  </a> </template
+                ><a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-download"
+                  title="下载"
+                ></a>
+              </div>
+            </div>
+          </template>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+ 
+
+<script>
+import dynamicElement from "../../mixins/dynamicElement";
+import dynamicViewerImage from "./dynamicViewerImage.vue";
+import dynamicViewerPDF from "./dynamicViewerPDF.vue";
+//import dynamicViewerVR from "./dynamicViewerVR.vue";
+export default {
+  name: "ct-viewerfile",
+  mixins: [dynamicElement],
+  components: {
+    "ct-viewerImage": dynamicViewerImage,
+    "ct-viewerPDF": dynamicViewerPDF,
+    // "ct-viewerVR": dynamicViewerVR,
+  },
+  props: {
+    MediaAlbum: Array,
+    groupIndex: Number,
+    index: Number,
+  },
+  data() {
+    return {
+      rotate: 0,
+      activeIndex: -1,
+      activeGroup: -1,
+      resultObject: "",
+      itemFile: {},
+      groupCountLen: 0,
+      activeitem: "",
+      openeds: [],
+    };
+  },
+  created() {
+    var self = this;
+    this.groupCountLen = 0;
+    this.MediaAlbum.forEach((item, n) => {
+      self.openeds.push(n.toString());
+      item.medias.forEach((v) => {
+        this.groupCountLen++;
+      });
+    });
+  },
+  mounted() { 
+
+    if (
+      this.groupIndex != undefined &&
+      this.index != undefined &&
+      this.groupIndex > -1 &&
+      this.index > -1
+    ) {
+     var  item = this.MediaAlbum[this.groupIndex].medias[this.index];
+      this.handleClick(item, this.groupIndex, this.index);
+    }
+  },
+  methods: {
+    FileExtension(item) {
+      return item.savedFileName.replace(/.+\./, "").toLowerCase();
+    },
+
+    handleClick(item, groupIndex, index) {
+      if (index == this.activeIndex && groupIndex == this.activeGroup) return;
+      this.activeIndex = index;
+      this.activeGroup = groupIndex;
+      this.itemFile = item;
+
+      this.activeitem = groupIndex + "-" + index;
+
+      this.resultObject = this.itemFile.mediaUrl;
+
+      this.$forceUpdate();
+    },
+    jump(n) {
+      var item = {};
+      var groupIndex = this.activeGroup;
+      var index = -1;
+      if (n > 0) {
+        if (
+          this.activeGroup * 1 + this.activeIndex + 1 + n >=
+          this.groupCountLen
+        ) {
+          groupIndex = 0;
+          index = 0;
+        } else {
+          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+            index = this.activeIndex + n;
+          } else {
+            if (
+              this.MediaAlbum[this.activeGroup + n] &&
+              this.MediaAlbum[this.activeGroup + n].medias[0]
+            ) {
+              index = 0;
+              groupIndex = this.activeGroup + n;
+            } else {
+              groupIndex = 0;
+              index = 0;
+            }
+          }
+        }
+      } else if (n < 0) {
+        if (this.activeGroup * 1 + this.activeIndex + n < 0) {
+          groupIndex = this.MediaAlbum.length - 1;
+          index = this.MediaAlbum[groupIndex].medias.length - 1;
+        } else {
+          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+            index = this.activeIndex + n;
+          } else {
+            if (
+              this.MediaAlbum[this.activeGroup + n].medias[
+                this.MediaAlbum[this.activeGroup + n].medias.length - 1
+              ]
+            ) {
+              index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
+              groupIndex = this.activeGroup + n;
+            } else {
+              groupIndex = this.MediaAlbum.length - 1;
+              index = this.MediaAlbum[groupIndex].medias.length - 1;
+            }
+          }
+        }
+      }
+      item = this.MediaAlbum[groupIndex].medias[index];
+      this.handleClick(item, groupIndex, index);
+    },
+
+    //旋转图片
+    rotateImg(type) {
+      var currentDeg = this.rotate || 0;
+
+      if (type == "L") {
+        currentDeg = currentDeg - 90;
+      } else if (type == "R") {
+        currentDeg = currentDeg + 90;
+      }
+      if (Math.abs(currentDeg) >= 360) {
+        currentDeg = currentDeg % 360;
+      }
+      this.rotate = currentDeg;
+      this.$forceUpdate();
+    },
+
+    actualSize() {
+      this.rotate = 0;
+      this.$refs.viewerImage.actualSize();
+    },
+    zoom(n) {
+      this.$refs.viewerImage.zoom(n);
+    },
+  },
+};
+// 禁止右键菜单
+document.oncontextmenu = function () {
+  return false;
+};
+</script>
+
+<style>
+body,
+html {
+  height: 100%;
+}
+#viewer-file .el-container {
+  margin-bottom: 40px;
+  height: 100%;
+}
+
+.viewerContent {
+  cursor: move;
+  position: absolute !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.magnify-footer {
+  width: calc(100vw - 340px);
+  position: fixed;
+  height: 50px;
+  bottom: 20px;
+  text-align: center;
+  color: #fff;
+  z-index: 9;
+}
+
+.magnify-toolbar {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+.magnify-toolbar .magnify-btn {
+  margin: 15px 20px;
+  color: #999;
+  font-size: 25px;
+  font-weight: 800;
+}
+.magnify-toolbar .magnify-btn:hover,
+.magnify-btn-close:hover {
+  color: #fff;
+}
+</style>

package/src/centaline/dynamicViewerFile/src/dynamicViewerImage.vue

@@ -0,0 +1,147 @@
+
+<template>
+  <div class="Imagebox" @mousewheel="bagimg($event)">
+    <img
+      id="ViewerImage"
+      class="scaleimg"
+      border="0"
+      v-bind:style="{
+        transform:
+          'scale(' +
+          (params.zoomVal || 1) +
+          ') rotate(' +
+          (rotate || 0) +
+          'deg)',
+      }"
+      :src="imgUrl"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    imgUrl: String,
+    rotate: Number,
+  },
+  data() {
+    return {
+      params: {
+        zoomVal: 1,
+        left: 0,
+        top: 0,
+        currentX: 0,
+        currentY: 0,
+        flag: false,
+      },
+    };
+  },
+  mounted() {
+    this.startDrag(
+      document.getElementById("ViewerImage"),
+      document.getElementById("ViewerImage")
+    );
+  },
+  methods: {
+    zoom(n) {
+      this.params.zoomVal += n;
+    },
+    actualSize() {
+      this.params = {
+        zoomVal: 1,
+        left: 0,
+        top: 0,
+        currentX: 0,
+        currentY: 0,
+        flag: false,
+      };
+    },
+
+    bagimg(e) {
+      var e = document.getElementById("ViewerImage");
+      this.params.zoomVal += event.wheelDelta / 1200;
+      if (this.params.zoomVal >= 0.2) {
+      } else {
+        this.params.zoomVal = 0.2;
+        return false;
+      }
+    },
+    getImgCss(e, key) {
+      return e.currentStyle
+        ? e.currentStyle[key]
+        : document.defaultView.getComputedStyle(e, false)[key];
+    },
+    startDrag(bar, target, callback) {
+      let that = this;
+      if (that.getImgCss(target, "left") !== "auto") {
+        that.params.left = that.getImgCss(target, "left");
+      }
+      if (that.getImgCss(target, "top") !== "auto") {
+        that.params.top = that.getImgCss(target, "top");
+      }
+      bar.onmousedown = function (event) {
+        that.params.flag = true;
+        if (!event) {
+          event = window.event;
+          bar.onselectstart = function () {
+            return false;
+          };
+        }
+        let e = event;
+        that.params.currentX = e.clientX;
+        that.params.currentY = e.clientY;
+      };
+      document.onmouseup = function () {
+        that.params.flag = false;
+        if (that.getImgCss(target, "left") !== "auto") {
+          that.params.left = that.getImgCss(target, "left");
+        }
+        if (that.getImgCss(target, "top") !== "auto") {
+          that.params.top = that.getImgCss(target, "top");
+        }
+      };
+      document.onmousemove = function (event) {
+        let e = event ? event : window.event;
+        if (that.params.flag) {
+          let nowX = e.clientX,
+            nowY = e.clientY;
+          let disX = nowX - that.params.currentX,
+            disY = nowY - that.params.currentY;
+          target.style.left = parseInt(that.params.left) + disX + "px";
+          target.style.top = parseInt(that.params.top) + disY + "px";
+          if (typeof callback == "function") {
+            callback(
+              (parseInt(that.params.left) || 0) + disX,
+              (parseInt(that.params.top) || 0) + disY
+            );
+          }
+          if (event.preventDefault) {
+            event.preventDefault();
+          }
+          return false;
+        }
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.Imagebox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scaleimg {
+  max-height: 100%;
+  max-width: 100%;
+  cursor: move;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+</style>

package/src/centaline/dynamicViewerFile/src/dynamicViewerPDF.vue

@@ -0,0 +1,73 @@
+
+<template>
+  <div>
+    <pdf
+      v-for="i in numPages"
+      :key="i"
+      :src="fileUrl"
+      :page="i"
+      style="width: 100%"
+    >
+    </pdf>
+  </div>
+</template>
+<script>
+import pdf from "vue-pdf";
+export default {
+  components: {
+    pdf,
+  },
+  props: {
+    pdfUrl: String,
+  },
+  data() {
+    return {
+      numPages: 1,
+      fileUrl: "",
+    };
+  },
+  mounted() {
+    this.init(this.pdfUrl);
+  },
+  methods: {
+    init(pdfUrl) {
+      var self = this;
+      var loadingTask = pdf.createLoadingTask(pdfUrl);
+      loadingTask
+        .then((pdf) => {
+          self.fileUrl = loadingTask;
+          self.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.error("pdf加载失败");
+        });
+    },
+  },
+  watch: {
+    pdfUrl(newValue, oldValue) {
+      this.init(newValue);
+    },
+  },
+};
+</script>
+
+<style>
+.Imagebox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scaleimg {
+  max-height: 100%;
+  max-width: 100%;
+  cursor: move;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+</style>

package/src/centaline/dynamicViewerFile/src/dynamicViewerVR.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="viewer"></div>
+</template>
+<script>
+import { Viewer } from "photo-sphere-viewer";
+import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
+// import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers";
+// import "photo-sphere-viewer/dist/plugins/markers.css";
+export default {
+  props: {
+    VRUrl: String,
+  },
+  data() {
+    return {
+      viewer: "",
+    };
+  },
+  mounted() {
+    this.init(this.VRUrl);
+  },
+  methods: {
+    init(VRUrl) {
+      this.viewer = new Viewer({
+        // navbar: [
+        //   "autorotate",
+        //   "zoomOut",
+        //   "zoomIn",
+        //   "zoom",
+        //   "move",
+        //   //'download',
+        //   "fullscreen",
+        // ],
+        container: document.querySelector("#viewer"),
+        panorama: this.VRUrl,
+        size: {
+          width: "80%",
+          height: "80%",
+        },
+        // plugins: [
+        //   [
+        //     MarkersPlugin,
+        //     {
+        //       markers: [
+        //         {
+        //           id: "circle",
+        //           tooltip: "A circle of radius 30",
+        //           circle: 30,
+        //           svgStyle: {
+        //             fill: "rgba(255,255,0,0.3)",
+        //             stroke: "yellow",
+        //             strokeWidth: "2px",
+        //           },
+        //           longitude: -1.5,
+        //           latitude: -0.28,
+        //           anchor: "center right",
+        //         },
+        //       ],
+        //     },
+        //   ],
+        // ],
+      });
+    },
+  },
+  watch: {
+    VRUrl(newValue, oldValue) {
+      this.init(newValue);
+    },
+  },
+};
+</script>
+
+<style scoped>
+#container {
+  height: 400px;
+}
+</style>