fl-web-component 0.1.0

package/packages/components/model/components/com-dialogWrapper/index.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:34:46
+ * @FilePath: /web/components/com-dialogWrapper/index.vue
+ * @Description: 弹窗封装
+-->
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="dialogTitle"
+    :fullscreen="dialogFullScreen"
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+    :width="popupWidth"
+    :append-to-body="appendToBody"
+    :modal-append-to-body="modalAppendToBody"
+  >
+
+    <!-- 弹窗title -->
+    <template slot="title">
+      <div class="custom_dialog_header">
+        <span class="el_dialog_title">{{ dialogTitle }}</span>
+        <div class="custom_dialog_menu" @click="dialogFullScreen = !dialogFullScreen">
+          <!-- <svg-icon :icon-class="dialogFullScreen?'exit-fullscreen':'fullscreen'" /> -->
+        </div>
+      </div>
+    </template>
+
+    <!-- 弹窗插槽 -->
+    <slot>
+      <p>弹框自定义的内容</p>
+    </slot>
+
+    <!-- 弹窗操作 -->
+    <div v-if="!footerDisabled" slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DialogWrapper',
+  components: {},
+  props: {
+    /* 弹窗 title标题 */
+    dialogTitle: {
+      type: String,
+      default: '标题'
+    },
+    /* 弹窗 width宽度 */
+    popupWidth: {
+      type: String,
+      default: '35%'
+    },
+    /* 弹窗 显示隐藏状态 */
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    footerDisabled: {
+      type: Boolean,
+      default: false
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      openDialog: false,
+      dialogFullScreen: false
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        console.log(this.visible)
+        // 初始化数据
+        if (this.visible) Object.assign(this.$data, this.$options.data())
+        return this.visible
+      },
+      set(val) {
+        // 当visible改变的时候，触发父组件的 updateVisible方法，
+        // 在该方法中更改传入子组件的 centerDialogVisible的值
+        this.$emit('updateVisible', val)
+      }
+    }
+  },
+  watch: {},
+  created() {
+    console.log('test')
+  },
+  mounted() {},
+  methods: {
+    /* 关闭弹窗 */
+    handleClose() {
+      this.$emit('handleClose')
+    },
+    /* 弹窗 确认 操作 */
+    handleSubmit() {
+      this.$emit('submitDialogData')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

package/packages/components/model/components/detect-panel.vue

@@ -0,0 +1,327 @@
+<template>
+  <div  class="box-card" style="height: calc(100vh - 134px)">
+    <div class="box-title">
+      <span class="box-title-desc">碰撞报告</span>
+      <i class="el-icon-close box-title-close" style="cursor: pointer" @click="$emit('rightOperation', 'detect')" />
+    </div>
+    <detect-tree
+      v-if="showDetectTree"
+      ref="detectTree"
+      :treeData="treeData"
+      @locate="locate"
+      @highlight="highlight"
+    />
+    <div class="process-container" v-else>
+      <el-progress class="process-percent"  type="circle" :percentage="processPercent" :color="processPercentStatus"></el-progress>
+      <p v-if="!processCompleted">碰撞报告生成中...</p>
+      <div v-else>
+        <el-row>
+          <el-col>
+            <el-button @click="initDetect">重新生成</el-button>
+            <el-button @click="viewReport" type="primary">查看报告</el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as modelApi from '../api/index';
+import detectTree from './detect-tree.vue';
+
+export default {
+  name: 'Details',
+  components:{
+    DetectTree: detectTree,
+  },
+  props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    treeData: {
+      typeof: Array,
+      default() {
+        return [];
+      },
+    }
+  },
+  data() {
+    return {
+      basicData: [],
+      propData: [],
+      docData: [],
+      otherData: [],
+      activeNames: ['基本信息'],
+      processPercent: 0,
+      // treeData: [],
+      showDetectTree: false,
+    };
+  },
+  mounted() {
+    this.init({queryParams: {...this.defaultParams, rebuild: 0}}, { contentType: 'application/x-www-form-urlencoded'});
+  },
+  computed: {
+    processPercentStatus(){
+      return this.processCompleted ? '#5cb87a' : '';
+    },
+    processCompleted(){
+      return this.processPercent == 100;
+    }
+  },
+  watch: {
+    treeData(val) {
+      this.processPercent = 100;
+    }
+  },
+  methods: {
+    init(params, options) {
+      this.processPercent = this.getRandomPercentage();
+      // console.log(params)
+      // params.queryParams.projectId = +params.queryParams.projectId;
+
+      this.$emit('getDetectCheckTree');
+      // modelApi
+      //   .getDetectCheckTree(params, options)
+      //   .then((res) => {
+      //     // this.treeData = res.data;
+      //     // this.$emit('setTreeData', res.data);
+      //     // this.showReportDialog(res);
+      //   })
+      //   .catch((err) => {
+      //     // this.$message({
+      //     //   type: 'error',
+      //     //   message: err.msg,
+      //     // });
+      //   })
+      //   .finally(() => {
+      //     this.processPercent = 100
+      //   });
+    },
+    showReportDialog(treeData) {
+      this.$confirm('已完成', '碰撞报告', {
+        confirmButtonText: '查看报告',
+        cancelButtonText: '重新生成',
+        type: 'success',
+        distinguishCancelAndClose: true,
+      })
+        .then((res) => {
+          this.$emit('showReport', treeData);
+        })
+        .catch((action) => {
+          action == 'cancel' &&
+            this.init(
+              { queryParams: {...this.defaultParams, rebuild: 1} },
+              { contentType: 'application/x-www-form-urlencoded' }
+            );
+        });
+    },
+    initDetect(){
+      this.init(
+        { queryParams: {...this.defaultParams, rebuild: 1} },
+        { contentType: 'application/x-www-form-urlencoded' }
+      );
+    },
+    viewReport(){
+      this.showDetectTree = true;
+    },
+    // 生成一个0到100之间的随机整数百分比
+    getRandomPercentage() {
+      return Math.floor(Math.random() * 100);
+    },
+    locate(node, data){
+      this.$emit('locate', node, data)
+    },
+    highlight(node, data){
+      this.$emit('highlight', node, data)
+    },
+  },
+  destroyed() {
+    window.onresize = null;
+  },
+};
+</script>
+<style lang="scss" scoped>
+.box-title {
+  font-size: 16px;
+  // color: #fff;
+}
+
+.details-box {
+  // position: fixed;
+  // height: calc(100% - 200px);
+  width: 300px;
+  padding: 30px 20px;
+  // right: 76px;
+  // top: 100px;
+  border: none;
+  background: #1e1e1e99;
+  border-radius: 10px;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.box-card {
+  // position: fixed;
+  // height: calc(100% - 200px);
+  // width: 300px;
+  // padding: 30px 20px;
+  // right: 76px;
+  // top: 100px;
+  background: rgba(0, 0, 0, 0);
+  border: none;
+  // border-radius: 10px;
+  // box-sizing: border-box;
+}
+
+::v-deep .el-card__body {
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+}
+
+.title {
+  font-size: 16px;
+}
+
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0px;
+}
+
+.text {
+  font-size: 12px;
+  // color: #fff;
+}
+
+.item {
+  padding: 5px;
+
+  span {
+    word-break: break-all;
+  }
+}
+
+.info-item {
+  display: grid;
+  grid-template-columns: 55% 45%;
+}
+
+.property-box {
+  margin-bottom: 10px;
+}
+
+.property-title {
+  line-height: 24px;
+  font-size: 14px;
+  color: #fff;
+  border-bottom: 1px solid #fff;
+  margin-bottom: 10px;
+}
+
+.empty-tips {
+  color: #fff;
+  text-align: center;
+}
+
+::v-deep .has-gutter {
+  background: rgba(44, 76, 124, 0.2);
+}
+
+::v-deep .el-collapse {
+  border-top: none;
+}
+
+::v-deep .el-collapse-item__header {
+  height: 36px;
+  line-height: 36px;
+  background: unset;
+  // color: #fff;
+  font-size: 14px;
+}
+
+::v-deep .el-collapse-item__wrap {
+  background: rgba(30, 30, 30, 0.6);
+}
+
+::v-deep .el-collapse-item__arrow {
+  margin: 0 20px 0 auto;
+}
+
+.collapse-img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.doc-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.doc-name {
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.view-doc {
+  width: 40px;
+  text-align: center;
+  color: #3afdff;
+  cursor: pointer;
+}
+
+.property-key,
+.property-value {
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.property-value {
+  text-indent: 5px;
+}
+
+.box-card {
+  padding-top: 0;
+  padding-bottom: 0;
+  background: #fff;
+  width: 360px;
+  .box-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 52px;
+    line-height: 52px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-bottom: 1px solid #dfdfdf;
+    .box-title-desc{
+      font-size: 14px;
+      font-weight: bold;
+    }
+    .box-title-close{
+      font-size: 24px;
+    }
+  }
+}
+.process-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: calc(75% - 54px);
+  .process-percent{
+    padding: 20px;
+  }
+}
+::v-deep .el-progress__text{
+  font-size: 32px !important;
+  font-weight: bold;
+}
+</style>