zbcx_ckyc 1.0.0

package/src/plugins/app/znycpjxt/coms/CustomFileView.vue

@@ -0,0 +1,343 @@
+<style lang="scss" scoped>
+  .fileDemo {width: 100%; height: 100%;}
+  .fileCenter {width: 100%; height: 92% !important;}
+  .yl-box{height: 0.5rem; line-height: 0.5rem;}
+  :deep(.el-radio-group){overflow: hidden;}
+</style>
+
+<template>
+  <cx-file-view v-if="type === 'doc'" class="fileDemo" v-bind="data"/>
+  <DataPreview
+    v-else-if="type === 'geojson'"
+    :noShowTool="true"
+    ref="DataPreview"
+    :baseMapArr="baseMapArr"
+    :services="att"
+    :showBaseMap="showBaseMap"
+    :legendList="legendList"
+  />
+  <div class="fileDemo" v-else-if="type === 'grd'">
+    <cx-layout style="width: 100%;height: 100%" v-loading="loading" element-loading-text="数据加载中...">
+      <cx-region region="west">
+        <GrdView ref="GrdView" @onOk="onOk" @onClose="onClose" :data="params.data" :file='params.data.src'></GrdView>
+      </cx-region>
+      <cx-region region="center" border style="height: 100%">
+        <div class="yl-box">预览</div>
+        <cx-file-view v-if="grdRadio === types.grd2D&&refresh" class="fileCenter" :src="Grd2DSrc" :comProps="{ elAttrs: { fit: 'scale-down' } }" filetype="png"/>
+        <DataPreview
+         v-else-if="grdRadio === types.grd3D"
+         :noShowTool="true"
+         ref="DataPreview"
+         class="fileCenter"
+         :baseMapArr="baseMapArr"
+         :services="att"
+         :showBaseMap="showBaseMap"
+         :legendList="legendList"
+         />
+         <cx-file-view v-else class="fileCenter" src="static/img/znycpjxt/mrtp.png" :comProps="{ elAttrs: { fit: 'scale-down' } }" filetype="png"/>
+      </cx-region>
+    </cx-layout>
+  </div>
+  <template v-else-if="type === 'excel'">
+    <TableEarth
+      :data="params.data"
+      :baseMapArr="baseMapArr"
+      :showBaseMap="showBaseMap"
+    >
+    </TableEarth>
+  </template>
+  <div v-else></div>
+</template>
+<script>
+/**
+ * 插件 - 文件预览 （基于cx-file-view实现）
+ */
+
+/**
+ * 调用说明:
+ * @param         {Object}            params
+ * @param         {Object}            params.data                                      文件预览插件需求的参数对象
+ * @param         {String}            params.data.src                                  文件的url地址，必传！如：'static/test.excel'
+ * @param         {String}            params.data.filetype                             文件后缀类型，必传！如：flv
+ * @param         {String}            [params.data.title]                              文件名称，非必传
+ * @param         {Object}            [params.data.comProps]                           自定义传给对应文件预览组件的参数对象
+ * @param         {Object}            [params.data.comListeners]                       自定义传给对应文件预览组件的事件监听注册对象
+ * @param         {Object}            [params.data.custCom]                            自定义的组件配置对象，格式：{name: 'cx-file-view'}，custCom比filetype优先级高
+ *
+ * (更多参数见cx-file-view的文档)
+ */
+
+/**
+ * 修改记录:
+ * 24-05-24        张光辉          首次提交
+ */
+import DataPreview from '@/plugins/zbcxCesium/coms/dataPreview/DataPreview.vue'
+import GrdView from './GrdView.vue'
+import TableEarth from './TableEarth.vue'
+import Api from '../Api.js'
+export default
+{
+  mixins: [cx.mixin.IPlugBase],
+  components: { DataPreview, GrdView, TableEarth },
+  data()
+  {
+    return {
+      data: null,
+      type: true,
+      types:
+      {
+        doc: 'doc',
+        geojson: 'geojson',
+        grd: 'grd',
+        grd2D: 'grd2D',
+        grd3D: 'grd3D',
+        excel: 'excel'
+      },
+      baseMapArr: [],
+      showBaseMap: false,
+      grdRadio: '',
+      refresh: true,
+      Grd2DSrc: '',
+      legendList: [],
+      loading: false
+    }
+  },
+  
+  created()
+  {
+    this.data = this.params.data
+    this.getType()
+    this.getMapservice()
+  },
+
+  methods:
+  {
+    getType()
+    {
+      switch (this.params.data.filetype)
+      {
+      case 'csv':
+      case 'xls':
+      case 'xlsx':
+        this.type = this.types.excel
+        break
+      case this.types.geojson:
+        this.type = this.types.geojson
+        let geojsonData = null
+        if (this.params.data.att.memo)
+        {
+          geojsonData = JSON.parse(this.params.data.att.memo)
+          this.makeGeojsonData(this.params.data.src, geojsonData)
+        }
+        else
+          this.makeGeojsonData(this.params.data.src, geojsonData, null, true)
+        break
+      case this.types.grd:
+        this.type = this.types.grd
+        break
+      }
+    },
+    
+    // 处理geojson格式的数据
+    makeGeojsonData(file, geojson, loadCallBack, epsgTr)
+    {
+      this.loading = true
+      let self = this
+      // geojson格式返回数据不需要epsg
+      if (epsgTr)
+      {
+        let projObj =
+        {
+          file: file ? file : '',
+          geojson: geojson ? geojson : '',
+          src: self.data?.att?.epsg,
+          dest: 'EPSG:4326'
+        }
+
+        Api.geojsonproj(projObj).then(res =>
+        {
+          if (res.ret === 0)
+          {
+            self.att =
+          {
+            url: res.geojson,
+            maptype: self.data.filetype,
+            layer: '',
+            epsg: self.data?.att?.epsg,
+            params: {},
+            style:
+            {
+              clampToGround: true
+            }
+          }
+            if (loadCallBack)
+              self.att.callback = loadCallBack
+            self.$refs.DataPreview.removeLayer()
+            self.$refs.DataPreview.loadData(self.att)
+            self.loading = false
+          }
+        }).catch(e =>
+        {
+          this.$showMsg('geojson坐标系转换失败', 'error')
+          this.loading = false
+        })
+      }
+      else
+      {
+        setTimeout(() =>
+        {
+          self.att =
+          {
+            url: geojson,
+            maptype: self.data.filetype,
+            layer: '',
+            // epsg: self.data?.att?.epsg,
+            params: {},
+            style:
+            {
+              clampToGround: true
+            }
+          }
+          if (loadCallBack)
+            self.att.callback = loadCallBack
+          self.$refs.DataPreview.removeLayer()
+          self.$refs.DataPreview.loadData(self.att)
+        })
+      }
+    },
+
+    // 处理grd格式数据
+    makeGrdData(form)
+    {
+      let params =
+      {
+        file: this.params.data.src,
+        type: form.type,
+        param: {}
+      }
+      if (form.levels && form.levels.length)
+        params.levels = form.levels?.split(',')
+      for (let key in form.param)
+        params.param[key] = form[key]
+      if (params.param.cmapList)
+        params.param.cmap = params.param.cmapList
+      return params
+    },
+
+    // 处理2Dgrd
+    makeGrd2DData(params)
+    {
+      const self = this
+      this.refresh = false
+      this.loading = true
+      Api.grdToGraph(params).then(res =>
+      {
+        if (res.ret === 0)
+        {
+          self.Grd2DSrc = 'data:image/png;base64,' + res.graph
+          self.data.filetype = 'png'
+          self.data.comProps = { elAttrs: { fit: 'scale-down' } }
+          this.refresh = true
+          this.loading = false
+        }
+      }).catch(err =>
+      {
+        this.$showMsg('grd转换失败', 'error')
+        this.loading = false
+        console.error(err)
+      })
+    },
+
+    makegrd3DData(params)
+    {
+      const self = this
+      self.legendList = []
+      this.loading = true
+      Api.grdToGeojson(params).then(res =>
+      {
+        if (res.ret === 0)
+        {
+          let arr = []
+          for (let i in res.legend)
+            arr.push({ name: i, url: this.createColorImage(res.legend[i], 50, 30) })
+          self.legendList = arr.reverse()
+          self.data.filetype = self.types.geojson
+          self.makeGeojsonData('', res.geojson, self.geojsonLoadCallBack, true)
+        }
+      }).catch(err =>
+      {
+        this.$showMsg('grd转换失败', 'error')
+        this.loading = false
+        console.error(err)
+      })
+    },
+
+    createColorImage(color, width, height)
+    {
+      // 创建canvas元素
+      let canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+ 
+      // 获取canvas上下文
+      let ctx = canvas.getContext('2d')
+ 
+      // 使用fillStyle设置颜色并填充矩形
+      ctx.fillStyle = color
+      ctx.fillRect(0, 0, width, height)
+ 
+      // 将canvas转换为图片并添加到body中
+      let img = document.createElement('img')
+      img.src = canvas.toDataURL('image/png')
+      return img.src
+    },
+
+    getMapservice()
+    {
+      if (cx.localCache.get('baseMapArr'))
+        this.baseMapArr = JSON.parse(cx.localCache.get('baseMapArr'))
+      else if (!$g.init.mapservice)
+      {
+        cx.svr.data.query(cx.consts.SYSTAB, cx.consts.TAB_MAPSERVICE, { args: [['maptype', '=', 'tdt']] }).then(ret =>
+        {
+          if (ret.length)
+          {
+            // 设置底图
+            this.baseMapArr = ret
+            cx.localCache.set('baseMapArr', JSON.stringify(this.baseMapArr))
+          }
+        })
+      }
+      else
+        this.baseMapArr = $g.init.mapservice.filter(item => item.maptype === 'tdt')
+    },
+
+    onOk(form, grdRadio)
+    {
+      let params = this.makeGrdData(form)
+      this.grdRadio = grdRadio
+      if (grdRadio === this.types.grd2D)
+        this.makeGrd2DData(params)
+      else
+        this.makegrd3DData(params)
+    },
+
+    geojsonLoadCallBack(layer)
+    {
+      layer.eachOverlay((item) =>
+      {
+        if (item.polygon)
+        {
+          if (item.properties?.color.getValue())
+          {
+            item.polygon.height = 1
+            item.polygon.fill = true
+            let color = item.properties?.color.getValue()
+            item.polygon.material = Cesium.Color.fromCssColorString(color)          // 材质
+          }
+        }
+      })
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/coms/CustomForm.vue

@@ -0,0 +1,220 @@
+<style lang='scss' scoped>
+  .el-form.el-form--default { width: 100% !important; }
+</style>
+
+<template>
+  <el-form
+    :model="form_"
+    :rules="rules"
+    :size="size"
+    ref="ruleForm"
+    label-width="1.35rem"
+    label-position="top"
+    @validate="validate">
+    <template v-for="(fld, index) in flds" :key="index">
+      <el-form-item v-if="fld.disptype !== 'def'&&fld.disptype !== 'range'" :prop="fld.colname" :label="fld.namec">
+
+        <el-input v-if="fld.disptype === 'seldyna'" v-model="form_[fld.colname]"  @click="onSeldyna(fld)"  :size="size" readonly>
+          <template #append >
+            <cx-button icon="cx-fi ic-search" @click="onSeldyna(fld)"/>
+          </template>
+        </el-input>
+        <!-- 多文件 -->
+        <el-input v-if="fld.disptype === 'seldynaList'" v-model="form_[fld.colname]" @click="onSeldyna(fld)" :size="size" readonly>
+          <template #append >
+            <cx-button icon="cx-fi ic-search" @click="onSeldyna(fld)"/>
+          </template>
+        </el-input>
+
+         <!-- 预测模型 -->
+         <el-input v-if="fld.disptype === 'ckyctask'" v-model="form_[fld.colname]" :size="size" readonly>
+          <template #append >
+            <cx-button icon="cx-fi ic-search" @click="onCkyctask(fld)"/>
+          </template>
+        </el-input>
+
+        <template v-else-if="fld.disptype === 'input'">
+          <el-input
+            v-if="(fld.elAtt && fld.elAtt.max)||fld.isNumber"
+            v-bind="fld.elAtt"
+            v-model.number="form_[fld.colname]"
+            :placeholder ="fld.placeholder"
+            :precision="10"
+            :size="size"
+            :type="fld.isNumber?'number':''"
+            clearable
+            @change="val => handleInput(val, fld.colname, fld.elAtt)"/>
+
+          <el-input
+            v-else
+            :disabled = "fld.disabled"
+            :placeholder ="fld.placeholder"
+            v-model="form_[fld.colname]"
+            :size="size"
+            clearable/>
+        </template>
+
+        <el-select
+          v-else-if="fld.disptype === 'select'"
+          v-model="form_[fld.colname]"
+          :size="size"
+          clearable
+          :placeholder="'请选择' + fld.namec"
+        >
+          <el-option
+            v-for="opt in fld.options"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <el-select
+          v-else-if="fld.disptype === 'selectImg'"
+          v-model="form_[fld.colname]"
+          :size="size"
+          clearable
+          :placeholder="'请选择' + fld.namec"
+        >
+         <el-option
+          v-for="(item, index) in fld.options"
+          :key="index"
+          :label="item.label"
+          :value="item.value">
+            <div>
+               <span>
+                 <img :src="item.url" style="width: 100%; height: 15px;">
+               </span>
+           </div>
+          </el-option>
+        </el-select>
+
+        <template v-else-if="fld.disptype === 'coorRange'">
+          <el-input v-model="form_[fld.min]" style="width: 1.6rem" />
+          <span>-</span>
+          <el-input v-model="form_[fld.max]" style="width: 1.6rem;" />
+        </template>
+      </el-form-item>
+      <template  v-if="fld.disptype === 'range'">
+        <el-form-item  :prop="fld.colname" label="X范围">
+          <el-input v-model="form_[fld.min1]" style="width: 1.6rem" />
+          <span>-</span>
+          <el-input v-model="form_[fld.max1]" style="width: 1.6rem;" />
+        </el-form-item>
+        <el-form-item  :prop="fld.colname" label="Y范围">
+          <el-input v-model="form_[fld.min2]" style="width: 1.6rem" />
+          <span>-</span>
+          <el-input v-model="form_[fld.max2]" style="width: 1.6rem;" />
+        </el-form-item>
+        <cx-button v-if="!fld.noShowBtn" type="primary" :size="size" icon="cx-fi ic-click" @click="onCalculation" style="margin: 0.1rem 0;">计算图层范围</cx-button>
+      </template>
+      <el-button v-if="fld.colname=='cmap'" type="primary" @click="getColorCmap">颜色配置</el-button>
+    </template>
+  </el-form>
+</template>
+
+<script>
+
+/**
+ * 插件 - 数据分析模型-基础统计
+ */
+
+/**
+ * 修改记录:
+ * 24-05-15   张光辉      首次编写
+ */
+
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  props:
+  {
+    flds: { type: Array, default: () => [] },
+    form: { type: Object, default: () => ({}) },
+    rules: { type: Object, default: () => ({}) }
+  },
+
+  data()
+  {
+    return {
+      form_: this.form
+    }
+  },
+
+  emits: ['click-seldyna'],
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    /**
+     * 选择动态数据
+     * @param {Object} fld 字段对象
+     */
+    onSeldyna(fld)
+    {
+      this.$emit('click-seldyna', fld)
+    },
+
+    /**
+     * 选择成矿预测任务
+     * @param {Object} fld 字段对象
+     */
+    onCkyctask(fld)
+    {
+      this.$emit('click-ckyctask', fld)
+    },
+
+    /**
+     * 计算事件
+     */
+    onCalculation()
+    {
+      this.$emit('click-calculation')
+    },
+
+    /**
+     * 输入处理
+     * @param {*} value 输入值
+     * @param {String} fld 字段名
+     * @param {Object} elAtt 元素属性
+     */
+    handleInput(value, fld, elAtt)
+    {
+      this.$nextTick(_ =>
+      {
+        let fldVal = 0
+        const { max, min } = elAtt
+        const numericValue = Number(value)
+        if (!isNaN(numericValue) && numericValue >= min && numericValue <= max)
+          fldVal = numericValue
+        else
+        {
+          let num = Math.min(Number(numericValue), max)
+          if (num < min)
+            fldVal = min
+          else
+          {
+            fldVal = max
+          }
+        }
+        this.form_[fld] = fldVal
+      })
+    },
+
+    /**
+     * 坐标计算事件
+     */
+    onCoorCalculation()
+    {
+      this.$emit('click-coor-calculation')
+    },
+
+    /**
+     * 获取颜色映射
+     */
+    getColorCmap()
+    {
+      this.$emit('getColorCmap')
+    }
+  }
+}
+</script>