dev search

package.json

@@ -37,36 +37,38 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@ztree/ztree_v3": "^3.5.48",
+    "ant-design-vue": "1.7.8",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "4.9.0",
     "element-ui": "2.15.10",
-    "ant-design-vue": "1.7.8",
+    "fetch-jsonp": "^1.2.1",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "jquery": "~3.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^2.3.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "v-contextmenu": "^2.9.0",
+    "vcolorpicker": "^1.1.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
-    "vuex": "3.6.0",
-    "vcolorpicker": "^1.1.0",
-    "v-contextmenu": "^2.9.0",
-    "jquery": "~3.4.1",
-    "@ztree/ztree_v3": "^3.5.48",
     "vue-runtime-helpers": "^1.1.2",
-    "less": "^2.3.1",
-    "fetch-jsonp": "^1.2.1"
+    "vue-video-player": "^5.0.0",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/views/search/Home.vue

@@ -59,7 +59,7 @@
                 </li>
               </ul>
             </div> -->
-              <a-spin v-show="search_engine == '图谱'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 100%;background-color: transparent;">
+              <a-spin v-show="search_engine == '图谱'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 500px;background-color: transparent;">
                 <chart-comp ref="chart"
                           @="getInfoTooltip"
                           :isShowContextMenu="true"
@@ -69,6 +69,15 @@
                           :enable="true"
                           :isShowChart="true"></chart-comp>
               </a-spin>
+              <span v-show="search_engine == '文档'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 500px;background-color: transparent;">
+                <PdfList/>
+              </span>
+              <span v-show="search_engine == '图片'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 500px;background-color: transparent;">
+                <ImageList/>
+              </span>
+              <span v-show="search_engine == '媒体'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 500px;background-color: transparent;">
+                <VideoList/>
+              </span>
           </div>
         </div>
       </div>
@@ -77,14 +86,16 @@
 </template>
 
 <script>
-// import axios from "axios";
-import storage from "@/utils/storage";
+
 import fetchJsonp from "fetch-jsonp";
-// import Graph from "@/components/Echarts/graph";
+
 import chartComp from '@/views/knowledge/common/chart'
+import PdfList from '@/views/search/pdf'
+import ImageList from '@/views/search/image'
+import VideoList from '@/views/search/video'
 import { getGraphEntClsTree } from '@/api/graph/statisticalMap'
 import { getAllEntityClass } from '@/api/graph/entityClass'
-  import { getAllRelationClass } from '@/api/graph/relationClass'
+import { getAllRelationClass } from '@/api/graph/relationClass'
 const dataList = []
   // 根据树生成一个列表
   const generateList = (data) => {
@@ -99,7 +110,7 @@ const dataList = []
   }
 export default {
   name: "Home",
-  components: { chartComp },
+  components: { chartComp, PdfList, ImageList, VideoList },
   data() {
     return {
       loadingChecked: false,
@@ -108,7 +119,7 @@ export default {
       relClsList: [], // 关系类列表
       allRelClsNameList: [],// 所有的关系类名列表
       checkedRelClsNameList: [], // 去重的关系类名列表
-      search_engine: "",
+      search_engine: "图谱",
       engines: "",
       engine_names: "",
       keyword: "",
@@ -118,28 +129,15 @@ export default {
     };
   },
   created() {
-    // 将引擎列表设置为本地存储
-    if (storage.get("engines")) {
-      this.engines = storage.get("engines");
-      this.engine_names = storage.get("engines")["list"];
-      if (storage.get("search_engine")) {
-        this.set_search_engine(storage.get("search_engine"));
-      } else {
-        this.set_search_engine(this.engine_names[0]);
-      }
-    } else {
-      let engines = {
-        list: ["文档", "图片", "媒体", "图谱"],
-        文档: ["https://www.so.com/s", "q", "word pdf txt", "文档"],
-        图片: ["https://www.baidu.com/s", "wd", "jpg png bmp", "图片"],
-        媒体: ["https://www.google.com/search", "q", "mp3 mp4", "媒体"],
-        图谱: ["https://www.sogou.com/web", "query", "知识图谱", "图谱"],
-      };
-      storage.set("engines", engines);
-      this.engines = engines;
-      this.engine_names = storage.get("engines")["list"];
-      this.set_search_engine(this.engine_names[0]);
-    }
+    let engines = {
+      list: ["文档", "图片", "媒体", "图谱"],
+      文档: ["https://www.so.com/s", "q", "word pdf txt", "文档"],
+      图片: ["https://www.baidu.com/s", "wd", "jpg png bmp", "图片"],
+      媒体: ["https://www.google.com/search", "q", "mp3 mp4", "媒体"],
+      图谱: ["https://www.sogou.com/web", "query", "知识图谱", "图谱"],
+    };
+    this.engines = engines;
+    this.engine_names = engines["list"];
     this.refreshEntityClassList()
     /**
      * 请求数据，获取所有实体类的信息，然后根据pid组装出实体类之间的关系
@@ -197,12 +195,11 @@ export default {
   },
   methods: {
     set_search_engine(engine) {
-      storage.set("search_engine", engine);
       this.search_engine = engine;
       this.keyword = ''
     },
     get_search_engine() {
-      return storage.get("search_engine");
+      return this.search_engine;
     },
     get_hot_keyword() {
       if (this.keyword === "") {

src/views/search/image/imageView.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-image
+    :src="`${realSrc}`"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="realSrcList"
+  >
+    <div slot="error" class="image-slot">
+      <i class="el-icon-picture-outline"></i>
+    </div>
+  </el-image>
+</template>
+
+<script>
+import { isExternal } from "@/utils/validate";
+
+export default {
+  name: "ImagePreview",
+  props: {
+    src: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [Number, String],
+      default: ""
+    },
+    height: {
+      type: [Number, String],
+      default: ""
+    }
+  },
+  computed: {
+    realSrc() {
+      if (!this.src) {
+        return;
+      }
+      let real_src = this.src.split(",")[0];
+      if (isExternal(real_src)) {
+        return real_src;
+      }
+      return real_src;
+    },
+    realSrcList() {
+      if (!this.src) {
+        return;
+      }
+      let real_src_list = this.src.split(",");
+      let srcList = [];
+      real_src_list.forEach(item => {
+        if (isExternal(item)) {
+          return srcList.push(item);
+        }
+        return srcList.push(item);
+      });
+      return srcList;
+    },
+    realWidth() {
+      return typeof this.width == "string" ? this.width : `${this.width}px`;
+    },
+    realHeight() {
+      return typeof this.height == "string" ? this.height : `${this.height}px`;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+  ::v-deep .el-image__inner {
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+  ::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>

src/views/search/image/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-row>
+        <el-col :span="8" v-for="(file, index) in fileList" :key="file.name" :offset="index%2 ? 1 : 0">
+            <el-card :body-style="{ padding: '0px' }">
+                <ImagePreview :src="file.path"/>
+                <div style="color: #b9b7b7">{{ file.name }}</div>
+            </el-card>
+        </el-col>
+    </el-row>
+</template>
+
+<script>
+import ImagePreview from './imageView'
+export default {
+    name: 'PdfList',
+    components: { ImagePreview },
+    data() {
+        return {
+            showView: false,
+            showPath: '',
+            fileList:[
+                {
+                    name:'歼11',
+                    path:'/search/歼11.jpg'
+                },
+                {
+                    name:'歼20',
+                    path:'/search/歼20.jpeg'
+                },
+                {
+                    name:'歼31',
+                    path:'/search/歼31.jpeg'
+                }
+            ]
+        }
+    },
+    methods: {
+        showPdf(file){
+            this.showView = true;
+            this.showPath = file.path
+        },
+        handleClose(){
+            this.showView = false;
+        }
+    }
+}
+</script>
+<style scoped>
+.el-card {
+    background-color: transparent;
+}
+</style>

src/views/search/pdf/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <span>
+        <ul style="color:#c5a1a1">
+            <li v-for="(file, index) in fileList" :key="index" @click="showPdf(file)">
+            {{ file.name }}
+            </li>
+        </ul>
+        <el-dialog
+            title="预览"
+            :visible.sync="showViewDoc"
+            width="80%"
+            :before-close="handleClose">
+            <ViewPdf :src="showPdfPath"/>
+        </el-dialog>
+    </span>  
+</template>
+<script>
+import ViewPdf from '@/views/search/pdf/view'
+export default {
+    name: 'PdfList',
+    components: { ViewPdf },
+    data() {
+        return {
+            showViewDoc: false,
+            showPdfPath: '',
+            fileList:[
+                {
+                    name:'知识图谱API',
+                    path:'/search/知识图谱api.pdf'
+                }
+            ]
+        }
+    },
+    methods: {
+        showPdf(file){
+            this.showViewDoc = true;
+            this.showPdfPath = file.path
+        },
+        handleClose(){
+            this.showViewDoc = false;
+        }
+    }
+}
+</script>

src/views/search/pdf/view.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="ins-submit-docs-content ins-submit-docs-pdf">
+        <pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf>
+    </div>
+</template>
+
+
+<script>
+
+import pdf from 'vue-pdf'
+ 
+export default {
+    name : 'ins-docs-pdf',
+    props : {
+        src : {
+            type : String,    //默认值，选中值
+            default : ''
+        }
+    },
+    data(){
+        return {
+            // src : '/search/知识图谱api.pdf',
+            publicPath: process.env.BASE_URL,
+            loading : true,    //加载中
+            loadingError : false,    //加载失败
+            numPages : 0,        
+        }
+    },
+    watch : {
+        src : {
+            deep : true,
+            immediate: true,
+            handler(val){
+                if(val){
+                    this.getPDFnums(val)
+                }
+            }
+        }
+    },
+    components: {
+        pdf
+    },
+    methods:{
+        //计算pdf页码总数
+        getPDFnums(url) {
+            debugger
+            this.loading = true
+            //let loadURL = pdf.createLoadingTask(url)
+            let loadURL = pdf.createLoadingTask({
+                  url: url,//你的pdf地址
+            })
+ 
+            loadURL.promise.then(pdf => {
+                this.numPages = pdf.numPages
+                this.$set(this, 'docsPDF.numPages', pdf.numPages)
+                this.loading = false
+            }).catch(err => {
+                this.loading = false;
+                this.loadingError = true;
+            })
+        }
+    }
+}
+</script>

src/views/search/video/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <span>
+        <el-row>
+               <!-- vjs-custom-skin videoPlayer -->
+        <el-col :span="8" v-for="(file, index) in fileList" :key="file.name" :offset="index%2 ? 1 : 0">
+            <el-card :body-style="{ padding: '0px' }">
+                <el-image @click="show(file)"
+                    :src="file.backgrandStyle"
+                    :fit="contain"></el-image>
+                <div style="color: #b9b7b7">{{ file.name }}</div>
+            </el-card>
+        </el-col>
+        </el-row>
+        <el-dialog
+            v-if="showView"
+            title="预览"
+            :visible.sync="showView"
+            width="80%"
+            :before-close="handleClose">
+            <video-player  class="vjs-custom-skin videoPlayer"
+                     ref="videoPlayer"
+                     :playsinline="true"
+                     :options="playerOptions"
+                     @play="onPlayerPlay($event)"
+                     @pause="onPlayerPause($event)"
+                />
+        </el-dialog>
+    </span>
+
+</template>
+
+<script>
+// import ImagePreview from './imageView'
+
+import  { videoPlayer } from 'vue-video-player';
+import 'video.js/dist/video-js.css'
+
+export default {
+    name: 'PdfList',
+    components: { videoPlayer },
+    data() {
+        return {
+            showView: false,
+            showPath: '',
+            playerOptions: {
+        //        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+                autoplay: false, //如果true,浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                language: 'zh-CN',
+                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [{
+                type: "video/mp4",
+                src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //你的视频地址（必填）
+                }],
+                poster: "poster.jpg", //你的封面地址
+                width: document.documentElement.clientWidth,
+                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        //        controlBar: {
+        //          timeDivider: true,
+        //          durationDisplay: true,
+        //          remainingTimeDisplay: false,
+        //          fullscreenToggle: true  //全屏按钮
+        //        }
+            },
+            fileList:[
+                {
+                    name:'60秒回顾歼-20战机高燃瞬间',
+                    path:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
+                    backgrandStyle: '/search/歼11.jpg'
+                },
+                {
+                    name:'60秒回顾歼-20战机高燃瞬间2',
+                    path:'https://vd4.bdstatic.com/mda-mfjhzvgpvn6w9tse/sc/cae_h264_nowatermark/1624193080201799163/mda-mfjhzvgpvn6w9tse.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1676722816-0-0-6766bf5569a7f4bf66b845a3e15e82d9&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3015937987&vid=15088829533783077132&abtest=&klogid=3015937987',
+                    backgrandStyle: '/search/歼20.jpeg'
+                },
+                {
+                    name:'60秒回顾歼-20战机高燃瞬间3',
+                    path:'https://vd4.bdstatic.com/mda-mfjhzvgpvn6w9tse/sc/cae_h264_nowatermark/1624193080201799163/mda-mfjhzvgpvn6w9tse.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1676722816-0-0-6766bf5569a7f4bf66b845a3e15e82d9&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3015937987&vid=15088829533783077132&abtest=&klogid=3015937987',
+                    backgrandStyle: '/search/歼31.jpeg'
+                },
+            ]
+        }
+    },
+    methods: {
+        show(file){
+            let sources = [{
+                type: "video/mp4",
+                src: file.path //你的视频地址（必填）
+                }]
+            this.showView = true;
+            this.playerOptions.sources = sources;
+        },
+        handleClose(){
+            this.showView = false;
+        },
+        onPlayerPlay(player) {
+            // alert("play");
+        },
+        onPlayerPause(player){
+            // alert("pause");
+        },
+    },
+    computed: {
+    player() {
+      return this.$refs.videoPlayer.player
+    }
+  }
+}
+</script>
+<style scoped>
+.el-card {
+    background-color: transparent;
+}
+</style>