fl-web-component 0.1.0 → 0.1.1

package/packages/components/com-formDialog/index.vue

@@ -0,0 +1,470 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:18:31
+ * @FilePath: /web/framework/src/views/system/temporary/form-dialog.vue
+ * @Description: 表单
+-->
+<template>
+  <div v-loading="loadingForm" class="inline_false">
+    <el-form
+      ref="form"
+      :model="formInline"
+      :label-width="labelWidth"
+      class="form_inline_false"
+    >
+      <!-- 表单循环 -->
+      <el-form-item
+        v-for="(item, index) in formItemConfigArr"
+        :key="item.id + index"
+        :label="item.label"
+        :prop="item.prop"
+        :rules="item.deliveryLevel === 'ESS' ? rulesForm[item.prop] : {}"
+      >
+        <template id="formItemTemp">
+          <!-- 表单左侧 label 与 校验 * 号图标 -->
+          <span slot="label" class="label_title" :title="item.label">
+            <!-- <i v-if="item.deliveryLevel === 'ESS'" class="red_must">*</i> -->
+            <!-- <span class="item_label" :title="item.label">{{ item.label }}</span> -->
+            {{ item.label }}
+          </span>
+
+          <!-- 1. 选择器_单选 SelectorSingleSelection -->
+          <el-select
+            v-if="item.itemType === 'SelectorSingleSelection' || item.itemType === '选择器_单选'"
+            v-model="valueSelectorSingle"
+            class="form_select"
+            :placeholder="`请选择${item.label}`"
+            @focus="setMinWidth"
+            @change="handleSelectorSingle($event, item.prop, index)"
+          >
+            <el-option
+              v-for="(optionItem, optionIndex) in item.optionArr"
+              :key="optionItem.optionValue + optionIndex"
+              :label="optionItem.optionLabel"
+              :value="optionItem.optionValue"
+              :style="{'width': minWidth + 2 + 'px'}"
+            />
+          </el-select>
+
+          <!-- 2. 选择器_多选 SelectorMultipleSelection -->
+          <el-cascader
+            v-if="item.itemType === 'SelectorMultipleSelection' || item.itemType === '选择器_多选'"
+            ref="formCascader"
+            class="form_cascader"
+            :options="item.optionArr"
+            :placeholder="`请选择${item.label}`"
+            :props="{
+              checkStrictly: false,
+              multiple: true,
+              emitPath: false,
+              label: 'optionLabel',
+              value: 'optionValue',
+            }"
+            clearable
+            @input="handleSelectorMultiple($event, item.prop)"
+          />
+
+          <!-- 3. 选择器_树结构 SelectorTreeStructure -->
+          <SelectTree
+            v-if="item.itemType === 'SelectorTreeStructure' || item.itemType === '选择器_树结构'"
+            ref="SelectTree"
+            :filterable="true"
+            :value-key="`deptId`"
+            :select-key="`deptId`"
+            :value-name="`deptName`"
+            :tree-data="item.optionArr"
+            :tree-props="{
+              id: 'deptId',
+              label: 'deptName',
+              children: 'children'
+            }"
+            :tree-node-key="`deptId`"
+            :placeholder-title="`请选择${item.label}`"
+            @nodeClickTree="nodeClickTree"
+          />
+
+          <!-- 4. 选择器_单时间 SelectorSingleTime -->
+          <el-date-picker
+            v-if="item.itemType === 'SelectorSingleTime' || item.itemType === '选择器_单时间'"
+            v-model="formInline[item.prop]"
+            type="datetime"
+            class="form_dataTime"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :placeholder="`请选择${item.label}日期时间`"
+            @input="handleInputValue($event, item.prop)"
+          />
+
+          <!-- 5. 选择器_单日期 SelectorSingleDate -->
+          <el-date-picker
+            v-if="item.itemType === 'SelectorSingleDate' || item.itemType === '选择器_单日期'"
+            v-model="formInline[item.prop]"
+            type="date"
+            class="form_picker"
+            :placeholder="`请选择${item.label}日期`"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            @input="handleInputValue($event, item.prop)"
+          />
+
+          <!-- 6. 选择器_日期范围 SelectorDateRange -->
+          <el-date-picker
+            v-if="item.itemType === 'SelectorDateRange' || item.itemType === '选择器_日期范围'"
+            v-model="formInline[item.prop]"
+            type="daterange"
+            class="form_daterange"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @input="handleSelectorDateRange($event, item.prop)"
+          />
+
+          <!-- 7. 多行文本 MultilineText -->
+          <el-input
+            v-if="item.itemType === 'MultilineText' || item.itemType === '多行文本'"
+            v-model="formInline[item.prop]"
+            type="textarea"
+            class="form_multiline"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            placeholder="请输入内容"
+            @input="handleInputValue($event, item.prop)"
+          />
+
+          <!-- 8. 单选框 RadioBox -->
+          <el-radio-group
+            v-if="item.itemType === 'RadioBox' || item.itemType === '单选框'"
+            v-model="formInline[item.prop]"
+            class="form_radio"
+            @input="handleInputValue($event, item.prop)"
+          >
+            <el-radio
+              v-for="(optionItem, optionIndex) in item.optionArr"
+              :key="optionItem.optionValue + optionIndex"
+              :label="optionItem"
+            >{{ optionItem.optionLabel }}</el-radio>
+          </el-radio-group>
+
+          <!-- 9. 多选框 MultipleCheckbox -->
+          <el-checkbox-group
+            v-if="item.itemType === 'MultipleCheckbox' || item.itemType === '多选框'"
+            v-model="formInline[item.prop]"
+            class="form_checkbox"
+            @input="handleInputValue($event, item.prop)"
+          >
+            <el-checkbox
+              v-for="(optionItem, optionIndex) in item.optionArr"
+              :key="optionItem.optionValue + optionIndex"
+              :label="optionItem"
+            >{{ optionItem.optionLabel }}</el-checkbox>
+          </el-checkbox-group>
+
+          <!-- 10. 输入框 InputString InputInteger InputDecimals -->
+          <el-input
+            v-if="item.itemType === 'InputString' || item.itemType === '字符型'"
+            v-model="formInline[item.prop]"
+            class="form_input"
+            :placeholder="`请选择${item.label}`"
+            @input="handleInputValue($event, item.prop)"
+          />
+          <el-input
+            v-if="item.itemType === 'InputDecimals' || item.itemType === '小数型'"
+            v-model="formInline[item.prop]"
+            class="form_input"
+            :placeholder="`请选择${item.label}`"
+            oninput="value=value.replace(/[^\d^\.]+/g, '').replace(/^0+(\d)/, '$1').replace(/^\./, '0.').match(/^\d*(\.?\d{0,3})/g)[0]"
+            @input="handleInputValue($event, item.prop)"
+          />
+          <el-input
+            v-if="item.itemType === 'InputInteger' || item.itemType === '整数型'"
+            v-model="formInline[item.prop]"
+            class="form_input"
+            :placeholder="`请选择${item.label}`"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            @input="handleInputValue($event, item.prop)"
+          />
+
+          <!-- 11. 计数器 CounterFrame -->
+          <el-input-number
+            v-if="item.itemType === 'CounterFrame' || item.itemType === '计数器'"
+            v-model="formInline[item.prop]"
+            :min="0"
+            :max="10000"
+            class="form_number"
+            label="描述文字"
+            @input="handleInputValue($event, item.prop)"
+          />
+
+          <!-- 12. 文件上传 FileUpload -->
+
+          <!-- 13. 富文本 RichText -->
+
+
+          <!-- 备用校验方法 -->
+          <!-- <div class="input_error" v-if="item.isRulesType"> <span class="input_error_label" :title="item.label">{{item.label}}</span>不能为空 </div> -->
+        </template>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormDialog',
+  components: {
+    SelectTree: () => import('./components/SelectTree') /* 3. 选择器_树结构 SelectorTreeStructure */
+  },
+  props: {
+    /* el-form-item表单循环项 */
+    formItemConfigArr: {
+      type: Array,
+      default: () => []
+    },
+    /* 表单label宽度 */
+    labelWidth: {
+      type: String,
+      default: '120px'
+    }
+  },
+  data() {
+    return {
+      /* 表单加载状态 */
+      loadingForm: false,
+      /* 表单model绑定对象 */
+      formInline: {},
+      /* 下拉框最小宽度样式 */
+      minWidth: undefined,
+      /* 1. 选择器_单选 SelectorSingleSelection 绑定的值 */
+      valueSelectorSingle: '',
+      /* 表单校验 */
+      rulesForm: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.initialization()
+  },
+  mounted() {},
+  methods: {
+    /* 初始化数据 */
+    initialization() {
+      for (let i = 1; i < this.formItemConfigArr.length; i++) {
+        const item = this.formItemConfigArr[i]
+        this.rulesForm[item.prop] = {
+          required: true,
+          validator: this.validateRules(),
+          trigger: 'blur'
+        }
+        switch (item.itemType) {
+          /* 1. 选择器_单选 SelectorSingleSelection */
+          case 'SelectorSingleSelection':
+            this.formInline[item.prop] = {}
+            break
+
+          /* 2. 选择器_多选 SelectorMultipleSelection */
+          case 'SelectorMultipleSelection':
+            this.formInline[item.prop] = []
+            break
+
+          /* 3. 选择器_树结构 SelectorTreeStructure */
+          case 'SelectorTreeStructure':
+            this.formInline[item.prop] = {}
+            break
+
+          /* 8. 单选框 RadioBox */
+          case 'RadioBox':
+            this.formInline[item.prop] = {}
+            break
+
+          /* 9. 多选框 MultipleCheckbox */
+          case 'MultipleCheckbox':
+            this.formInline[item.prop] = []
+            break
+
+          /* 11. 计数器 CounterFrame */
+          case 'CounterFrame':
+            this.formInline[item.prop] = 0
+            break
+
+          /**
+           * 4. 选择器_单时间 SelectorSingleTime
+           * 5. 选择器_单日期 SelectorSingleDate
+           * 6. 选择器_日期范围 SelectorDateRange
+           * 7. 多行文本 MultilineText
+           * 10. 输入框 InputString InputInteger InputDecimals
+           * 12. 文件上传 FileUpload
+           * 13. 富文本 RichText
+          **/
+          default:
+            this.formInline[item.prop] = ''
+        }
+      }
+    },
+    /* 下拉框样式 无数据的情况下，给请选择提示设置最小宽度*/
+    setMinWidth(val) {
+      this.minWidth = val.srcElement.clientWidth
+    },
+    validateRules(value, prop) {
+      console.log('validateRules', value, prop)
+      if (!value) {
+        return `${prop}不能为空`
+      } else if (this.isNameType(value)) {
+        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`
+      }
+    },
+    /**
+     *  只包含英文、数字、空格、中划线、下划线
+     *  true 符合 false 不符合
+    **/
+    isCodeType(str, prop) {
+      if (str.length === 0) {
+        return `${prop}不能为空`
+      }
+      const reg = /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im
+      const regOne = /^[^\u4e00-\u9fa5]+$/
+      const regTwo = /\\/
+      if (!reg.test(str) && regOne.test(str) && !regTwo.test(str)) {
+        return `${prop}只包含中文、英文、空格、数字、中划线、下划线`
+      }
+      return true
+    },
+    /**
+     *  可输入英文、中文、空格、数字、中划线、下划线，特殊字符可以排除
+     *  true 符合 false 不符合
+    **/
+    isNameType(str, prop) {
+      if (str.length === 0) {
+        return `${prop}不能为空`
+      }
+      const reg = /[`~!@#$%^&*()+=<>?:"{}|,.;'·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘'，。、]/im
+      const regTwo = /\\/
+      if (!reg.test(str) && !regTwo.test(str)) {
+        return `${prop}只包含英文、数字、空格、中划线、下划线`
+      }
+      return true
+    },
+
+    /* 1. 选择器_单选 SelectorSingleSelection */
+    handleSelectorSingle(e, prop, index) {
+      this.formInline[prop] = {}
+      const arr = this.formItemConfigArr[index].optionArr
+      const objIndex = arr.find(item => {
+        if (item.optionValue === e) return item
+      })
+      this.handleInputValue(objIndex, prop)
+    },
+    /* 2. 选择器_多选 SelectorMultipleSelection */
+    handleSelectorMultiple(e, prop) {
+      this.formInline[prop] = []
+      const nodesObj = this.$refs['formCascader'][0].getCheckedNodes()
+      const selectorMultipleSelectionArr = []
+      nodesObj.forEach(item => { selectorMultipleSelectionArr.push(item.data) })
+      this.handleInputValue(selectorMultipleSelectionArr, prop)
+    },
+
+    /* 3. 选择器_树结构 SelectorTreeStructure */
+    nodeClickTree(data) {
+      this.handleInputValue(data, 'SelectorTreeStructure')
+    },
+
+    /* 6. 选择器_日期范围 SelectorDateRange */
+    handleSelectorDateRange(e, prop) {
+      this.formInline[prop] = []
+      this.handleInputValue(e, prop)
+    },
+
+    /* 12. 文件上传 FileUpload */
+    /* 13. 富文本 RichText */
+
+    /**
+     * 4. 选择器_单时间 SelectorSingleTime
+     * 5. 选择器_单日期 SelectorSingleDate
+     * 7. 多行文本 MultilineText
+     * 8. 单选框 RadioBox
+     * 9. 多选框 MultipleCheckbox
+     * 10. 输入框 InputString InputInteger InputDecimals
+     * 11. 计数器 CounterFrame
+    **/
+    handleInputValue(e, prop) {
+      this.formInline[prop] = e
+      this.$forceUpdate()
+      const data = { data: e, prop: prop }
+      this.$emit('handleInputValue', data)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+// 1. 选择器_单选 form_select
+.form_select {
+  width: 100%;
+}
+
+// 2. 选择器_多选 form_cascader
+.form_cascader {
+  width: 100%;
+}
+
+// 3. 选择器_树结构 SelectorTreeStructure
+
+// 4. 选择器_单时间 form_dataTime
+.form_dataTime {
+  width: 100%;
+}
+
+// 5. 选择器_单日期 form_picker
+.form_picker {
+  width: 100%;
+}
+
+// 6. 选择器_日期范围 form_daterange
+.form_daterange {
+  width: 100%;
+}
+
+// 7. 多行文本 form_multiline
+.form_multiline {
+  width: 100%;
+}
+
+// 8. 单选框 form_radio
+.form_radio {
+  width: 100%;
+}
+
+// 9. 多选框 form_checkbox
+.form_checkbox {
+  width: 100%;
+}
+
+// 10. 输入框 form_input
+.form_input {
+  width: 100%;
+}
+
+// 11. 计数器 form_number
+.form_number {
+  width: 100%;
+}
+
+// 12. 文件上传 FileUpload
+// 13. 富文本 RichText
+
+/* 表单 label 宽度样式 */
+.label_title {
+  display: inline-block;
+  max-width: calc(100% - 10px);
+  box-sizing: border-box;
+  // padding-right: 10px;
+  /*让长段文本不换行*/
+  white-space: nowrap;
+  /*设置文本超出元素宽度部分隐藏*/
+  overflow-x: hidden;
+  /*设置文本超出部分用省略号显示*/
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+</style>

package/packages/components/com-graphics/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="instructions">
+  </div>
+</template>
+<script>
+var [ renderer, scene, camera, cameraControls, loader, instructions,
+  raycaster, mouse, labelRenderer
+]= (function* (v) { while (true) yield v })(null) 
+var [ lastTime, firstTime, fpsClock, timeStamp ] = (function* (v) { while (true) yield v })(0) 
+import CameraControls from 'camera-controls'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
+export default {
+  name: 'Model',
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    glbUrl: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+  },
+  data() {
+    return {}
+  },
+  created() {
+    CameraControls.install({ THREE: this.THREE })
+    fpsClock = new this.THREE.Clock()
+    raycaster = new this.THREE.Raycaster()
+    mouse = new this.THREE.Vector2()
+  },
+  mounted() {
+    instructions = document.getElementById('instructions')
+    this.initRender()
+    this.initScene()
+    this.initCamera()
+    this.initControl()
+    this.initLight()
+    this.initLabelRender()
+    loader = new GLTFLoader()
+    loader.load('/example/worker.glb', (gltf) => {
+      const personModel = gltf.scene
+      scene.add(personModel)
+      personModel.scale.set(0.1, 0.1, 0.1)
+    })
+    renderer.domElement.addEventListener('mouseup', this.mouseClick, false)
+    renderer.domElement.addEventListener('mousedown',this.mouseDown, false)
+    this.animate()
+  },
+  methods: {
+    initRender() {
+      renderer = new this.THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
+      renderer.setPixelRatio(window.devicePixelRatio * 2)
+      renderer.setSize(window.innerWidth, window.innerHeight)
+      renderer.domElement.id = 'three-model'
+      renderer.shadowMap.enabled = true
+      // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
+      renderer.outputEncoding = this.THREE.sRGBEncoding
+      instructions.appendChild(renderer.domElement)
+      renderer.autoClear = false
+      renderer.autoClearColor = false
+      renderer.autoClearDepth = false
+      renderer.autoClearStencil = false
+    },
+    initScene() {
+      scene = new this.THREE.Scene()
+      // scene.userData.recordEntity = []
+    },
+    initCamera() {
+      camera = new this.THREE.PerspectiveCamera(
+        45,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        1000
+      )
+      camera.position.set(0, 100, 150)
+    },
+    initControl() {
+    // 初始化控件
+      cameraControls = new CameraControls(camera, renderer.domElement)
+      cameraControls.dollyToCursor = true
+      cameraControls.smoothTime = 0.1
+      cameraControls.draggingSmoothTime = 0.05
+      cameraControls.truckSpeed = 2.0
+      cameraControls.infinityDolly = true
+      cameraControls.minDistance = 4
+    },
+    // 初始化光源
+    initLight() {
+      const pmremGenerator = new this.THREE.PMREMGenerator(renderer)
+      scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture
+    },
+    // 初始化文字画布
+    initLabelRender() {
+      labelRenderer = new CSS2DRenderer()
+      labelRenderer.setSize(instructions.offsetWidth, instructions.offsetHeight)
+      labelRenderer.domElement.style.position = 'absolute'
+      labelRenderer.domElement.style.top = '0px'
+      labelRenderer.domElement.style.pointerEvents = 'none'
+      instructions.appendChild(labelRenderer.domElement)
+    },
+    mouseDown() {
+      firstTime = new Date().getTime()
+    },
+    mouseClick(event) {
+      lastTime = new Date().getTime()
+      if (lastTime - firstTime < 300) {
+        mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1
+        mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1
+        raycaster.setFromCamera(mouse, camera)
+        const intersects = raycaster.intersectObjects(scene.children, true)
+        console.log(intersects)
+        if (event.button === 0) {
+          this.$emit('leftClick', {
+            objects: intersects.length > 0 ? [intersects[0]] : []
+          })
+        } else if (event.button === 2) {
+          this.$emit('rightClick', {
+            objects: intersects.length > 0 ? [intersects[0]] : [],
+            position: { x: event.clientX, y: event.clientY }
+          })
+        }
+      }
+    },
+    // 修改模型实体属性
+    /**
+     * 参数内容{
+      * list: [{
+      *   name: ''，实体的名字
+      *   attr: '', 属性名（color、visible(true / false)、opacity(0-1)）
+      *   value: '', 需要修改的值
+      * }] // 需要更改实体属性的数据
+      * It can be a CSS-style string. For example:
+      * 'rgb(250, 0,0)'
+      * 'rgb(100%,0%,0%)'
+      * 'hsl(0, 100%, 50%)'
+      * '#ff0000'
+      * '#f00'
+      * 'red'
+     * }
+     */
+    updateProperty(list) {
+      for (let index = 0; index < list.length; index++) {
+        let ele = list[index]
+        let obj = scene.getObjectByName(ele.name)
+        if (obj) {
+          switch (ele.attr) {
+            case 'color': obj.material.color = new this.THREE.Color(ele.value)
+              break;
+            case 'visible': obj.material.visible = ele.value
+              break;
+            case 'opacity':
+              obj.material.opacity = ele.value
+              obj.material.transparent = true
+              break;
+          }
+          obj.material.needsUpdate = true
+        }
+      }
+    },
+    // 清除上一次的高亮
+    // 需要清除高亮颜色的实体数据
+    recoverColor(list) {
+      for (let index = 0; index < list.length; index++) {
+        let ele = list[index]
+        let obj = scene.getObjectByName(ele)
+        if (obj) {
+          obj.material.color = obj.material.userData.nColor
+          obj.material.needsUpdate = true
+        }
+      }
+    },
+    // 相机定位
+    /*
+      定位参数：x: 相机的x位置, y: 相机的y位置, z: 相机的z位置
+      heading, pitch, roll
+      视点定位可直接使用此方法
+    */
+    cameraLocation(parmas) {
+      cameraControls.setLookAt(
+        parmas.x,
+        parmas.y,
+        parmas.z,
+        parmas.heading,
+        parmas.pitch,
+        parmas.roll,
+        true
+      )
+      cameraControls.update(0)
+    },
+    // 添加广告牌
+    /*
+      参数{
+        billboard: DOM节点
+        name: 2d广告牌的名字，用来做清除用的
+        x、y、z为广告牌的位置
+      }
+    */
+    billboard(data) {
+      const divLabel = new CSS2DObject(data.billboard)
+      divLabel.name = data.labelClass // 这个是用来清除广告牌用的
+      divLabel.position.set(data.x, data.y, data.z)
+      scene.add(divLabel)
+    },
+    // 清除广告牌
+    clearBillboard(name) {
+      if (scene && scene.getObjectByName(name)) {
+        let sprit = scene.getObjectByName(name)
+        scene.remove(sprit)
+        this.clearBillboard()
+      }
+    },
+    
+    animate() {
+      const delta = fpsClock.getDelta()
+      timeStamp += delta
+      requestAnimationFrame(this.animate)
+      cameraControls.enabled && cameraControls.update(timeStamp)
+      labelRenderer.render(scene, camera)
+      renderer.render( scene, camera )
+    },
+  },
+  
+}
+</script>
+<style lang="scss" scoped>
+#instructions{
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+</style>