zbcx_ckyc 1.0.0

package/src/plugins/app/modelmanagement/MineralGo.vue

@@ -0,0 +1,241 @@
+<style lang="scss" scoped>
+  .contain_body { width: 100%; height: 100%; background: var(--cx-colorBg1);
+    .contain_head { position: relative; display: flex; align-items: center; height: 5%; margin: 0 0.12rem; padding: 0.1rem 0.25rem; background: var(--cx-colorBg5); overflow: hidden; border-radius: 0.08rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 0.01rem solid var(--cx-colorBorder2); box-shadow: var(--cx-boxShadow5);
+      .back { position: absolute; right: 0.15rem; width: 80px; height: 0.32rem; }
+      .yt { position: absolute; right: 0.15rem; width: 80px; height: 0.32rem; }
+    }
+    .contain_nr { display: flex; flex-wrap: wrap; align-content: flex-start; height: 89%; width: calc(100% - 0.45rem); margin: 0.12rem; background: var(--cx-colorBg5); padding-left: 0.2rem; border: 0.01rem solid var(--cx-colorBorder2); box-shadow: var(--cx-boxShadow5); border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem;
+      .nr_left { display: flex; overflow-y: scroll; flex-direction: column; padding-top: 0.1rem; padding-right: 0.2rem; line-height: 0.3rem; height: 98%; width: 25%; }
+      .nr_center { height: 98%; width: 40%; padding-top: 0.1rem; padding-left: 0.1rem; margin-right: 0.15rem; }
+      .nr_right { height: 98%; width: 32%; padding-top: 0.1rem;
+        .thebg { height: 95%; width: 100%; overflow: scroll; margin-top: 0.1rem; }
+      }
+      :deep(.legend) { opacity: 0.5; }
+    }
+  }
+  .left_name { margin-top: 0.2rem; }
+  .name { font-weight: 600; }
+  .name3 { margin-top: 0.2rem; font-weight: 600; }
+  .name1 { cursor: pointer; color: var(--cx-colorText5); font-size: 0.14rem; }
+  .name2 { color: var(--cx-colorText4); font-size: 0.14rem; }
+  table { width: 100%; border-collapse: collapse; border: 1px solid var(--cx-colorBorder1); }
+  th, td { padding: 8px; border: 1px solid var(--cx-colorBorder1); text-align: center; }
+  th { background-color: var(--cx-colorBg4); }
+  :deep(.excel-table-container) { height: 100%; overflow-x: auto; border-radius: 4px; box-shadow: var(--cx-boxShadow5); }
+  :deep(.excel-table) { border-collapse: collapse; height: 100%; width: 100%; font-size: 14px; }
+  :deep(.excel-table td, .excel-table th) { border: 1px solid var(--cx-colorBorder0); padding: 8px 12px; text-align: left; }
+  :deep(.excel-table th) { background-color: var(--cx-colorBg12); font-weight: 600; color: var(--cx-colorText3); }
+  :deep(.cx-layout .cx-region.region-center) { background: var(--cx-colorBg1); }
+</style>
+
+<template>
+  <div class="contain_body">
+    <header class="contain_head">
+      <span class="name1" @click="back">矿床模型 > </span>
+      <span class="name2">{{ obj.kc_name }}</span>
+      <cx-button @click="back" icon="cx-fi ic-back" class="back" type="primary">返回</cx-button>
+    </header>
+    <section class="contain_nr">
+      <div class="nr_left">
+        <span class="name">基本信息</span>
+        <span>{{ obj.jbxx }}</span>
+        <div class="left_name">
+          <span class="name">上传人：</span>{{ obj.uploader }}
+        </div>
+        <div class="left_name">
+          <span class="name">上传单位：</span>{{ obj.uploadunit }}
+        </div>
+        <span class="name3">文献</span>
+        <span v-html="obj.literature.replace(/\n/g, '<br>')"></span>
+      </div>
+      <div class="nr_center">
+        <span class="name" style="margin-top:0.1rem;">成矿模式图</span>
+        <div style="position:relative;display:flex;align-items:center;justify-content: center;overflow:hidden;width: 100%;height: 93%;margin-top: 0.1rem;border: 1px solid var(--cx-colorBorder1);">
+          <cx-button @click="mst" icon="cx-fi ic-zoomIn" style="position:absolute;right:0.1rem;top:0.1rem;z-index:1">放大</cx-button>
+          <img id="image" :src="obj.src" alt="" style="max-height: 6rem;max-width:10rem;">
+        </div>
+      </div>
+      <div class="nr_right">
+        <span class="name" style="margin-top:0.1rem;">成矿模式表</span>
+        <div style="position:relative;display:flex;justify-content: center;overflow:scroll;width: 100%;height: 94%;margin-top: 0.1rem;">
+          <div v-html="excelHtml"></div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+/**
+ * 组件: 矿床模型详情页面
+ */
+import axios from 'axios'
+import * as XLSX from 'xlsx'
+
+export default {
+  mixins: [cx.mixin.IPlugBase],
+  props: ['obj'],
+
+  data()
+  {
+    return {
+      severurl: 'znycpjSvr/knowgraph/neo4j/querynode',
+      defurl: 'znycpjSvr/knowgraph/neo4j/querylabelnode',
+      cloudurl: 'znycpjSvr/knowgraph/cloud/createbyknowgraph',
+      database: 'audeposit',
+      url: 'bolt://192.168.2.225:7687',
+      user: 'neo4j',
+      password: 'zbcx.123456',
+      tablesj: '',
+      links: '',
+      lenged: '透明',
+      selDType: [
+        { label: '不透明', value: 'btm' },
+        { label: '透明', value: 'tm' },
+        { label: '隐藏', value: 'yc' }
+      ],
+      excelHtml: ''
+    }
+  },
+
+  mounted()
+  {
+    if (this.obj.src2)
+      this.loadExcelFromUrl(this.obj.src2)
+    cx.svr.data.query(window.$app.TabConst.model_graphdb.major, window.$app.TabConst.model_graphdb.minor, { args: [['id', '>', 0, null]] }).then(data =>
+    {
+      data.forEach(item =>
+      {
+        if (item.name === this.obj.gltp)
+        {
+          this.database = item.database_
+          this.password = item.password
+          this.url = item.url
+          this.user = item.user_
+        }
+      })
+    })
+    this.setimgsj()
+  },
+
+  methods:
+  {
+    /**
+     * 设置图片缩放事件
+     */
+    setimgsj()
+    {
+      let image = document.getElementById('image')
+      let scale = 1 // 初始缩放比例
+      const scaleStep = 0.1 // 缩放步长
+      const maxScale = 3 // 最大缩放比例
+      const minScale = 0.5 // 最小缩放比例
+
+      // 监听鼠标滚轮事件
+      image.addEventListener('wheel', function(e)
+      {
+        e.preventDefault() // 阻止默认的滚轮事件
+
+        // 根据滚动方向调整缩放比例
+        if (e.deltaY < 0)
+          // 向上滚动，放大图片
+          scale = Math.min(scale + scaleStep, maxScale)
+        else
+          // 向下滚动，缩小图片
+          scale = Math.max(scale - scaleStep, minScale)
+
+        // 应用缩放变换
+        image.style.transform = `scale(${scale})`
+      })
+    },
+
+    /**
+     * 读取excel资源，前端dom方式展示表格
+     * @param {String} url - Excel文件URL
+     */
+    async loadExcelFromUrl(url)
+    {
+      try
+      {
+        const response = await axios.get(url, { responseType: 'arraybuffer' })
+        const workbook = XLSX.read(new Uint8Array(response.data), { type: 'array' })
+        const html = XLSX.utils.sheet_to_html(workbook.Sheets[workbook.SheetNames[0]])
+
+        // 添加表格样式
+        const styledHtml = `
+          <div class="excel-table-container">
+            ${html.replace('<table', '<table class="excel-table"')}
+          </div>
+        `
+
+        this.excelHtml = styledHtml
+      }
+      catch (error)
+      {
+        console.error('Excel加载失败:', error)
+      }
+    },
+
+    /**
+     * 返回上一页
+     */
+    back()
+    {
+      this.$emit('modelshow')
+    },
+
+    /**
+     * 知识图谱图放大
+     */
+    zstp()
+    {
+      cx.run.runPlug('ModelTp', { nodes: this.nodes, links: this.links, kc_name: this.obj.kc_name }, { uicfg: { width: 0.8, height: 0.8, modal: 1 }, container: 'Home' })
+    },
+
+    /**
+     * 模式图放大
+     */
+    mst()
+    {
+      cx.run.runPlug('ModelMst', { src: this.obj.src }, { uicfg: { width: 0.8, height: 0.8, modal: 1 }, container: 'Home' })
+    },
+
+    /**
+     * 创建云图
+     */
+    createCloud()
+    {
+      if (!this.graphObj)
+        return
+      const word1 = this.graphObj.getAllNode()
+      const word2 = this.graphObj.getLinkData()
+      const word = word1.concat(word2)
+
+      const backgroud = 'background'
+      axios
+        .post(this.cloudurl, { word, backgroud })
+        .then((response) =>
+        {
+          const data = response.data
+          const imageData = this.getImageSrc(data.graph)
+          console.log(imageData)
+          cx.run.runPlug('ModelCloudmap', { imageData: imageData }, { container: 'Home' })
+        })
+        .catch((error) =>
+        {
+          console.error(error)
+        })
+    },
+
+    /**
+     * 获取图片源
+     * @param {String} data - 图片数据
+     * @returns {String} 图片源URL
+     */
+    getImageSrc(data)
+    {
+      return `data:image/png;base64,${data}`
+    }
+  }
+}
+</script>