From af4bef9db41c69c171c7d9c980a489b869064b92 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 9 Aug 2024 17:51:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E6=95=B0=E6=8D=AE=E9=9B=86=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/dataset_params.svg         |   4 +
 .../canvas/ComponentWrapper.vue               |   3 +-
 .../visualization/ComponentEditBar.vue        |  21 ++-
 .../visualization/DatasetParamsComponent.vue  | 127 ++++++++++++++++++
 .../DatasetParamsSettingDialog.vue            | 110 +++++++++++++++
 5 files changed, 261 insertions(+), 4 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/dataset_params.svg
 create mode 100644 core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
 create mode 100644 core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue

diff --git a/core/core-frontend/src/assets/svg/dataset_params.svg b/core/core-frontend/src/assets/svg/dataset_params.svg
new file mode 100644
index 0000000000..9175e1ce08
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dataset_params.svg
@@ -0,0 +1,4 @@
+<svg t="1723180281609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path d="M 729.088 534.323 c 13.5168 0 24.576 -11.0592 24.576 -24.576 v -348.16 c 0 -13.5168 -11.0592 -24.576 -24.576 -24.576 s -24.576 11.0592 -24.576 24.576 v 348.16 c 0 13.5168 11.0592 24.576 24.576 24.576 Z M 282.624 653.107 v -491.52 c 0 -13.5168 -11.0592 -24.576 -24.576 -24.576 s -24.576 11.0592 -24.576 24.576 v 491.52 c -35.4304 10.6496 -61.44 43.2128 -61.44 81.92 s 26.0096 71.2704 61.44 81.92 v 81.92 c 0 13.5168 11.0592 24.576 24.576 24.576 s 24.576 -11.0592 24.576 -24.576 v -81.92 c 35.4304 -10.6496 61.44 -43.2128 61.44 -81.92 s -26.0096 -71.2704 -61.44 -81.92 Z m -24.576 118.784 c -20.2752 0 -36.864 -16.5888 -36.864 -36.864 s 16.5888 -36.864 36.864 -36.864 s 36.864 16.5888 36.864 36.864 s -16.5888 36.864 -36.864 36.864 Z M 579.584 325.427 c 0 -38.912 -26.0096 -71.2704 -61.44 -81.92 v -81.92 c 0 -13.5168 -11.0592 -24.576 -24.576 -24.576 s -24.576 11.0592 -24.576 24.576 v 81.92 c -35.4304 10.6496 -61.44 43.2128 -61.44 81.92 s 26.0096 71.2704 61.44 81.92 v 491.52 c 0 13.5168 11.0592 24.576 24.576 24.576 s 24.576 -11.0592 24.576 -24.576 v -491.52 c 35.4304 -10.4448 61.44 -43.008 61.44 -81.92 Z m -122.88 0 c 0 -20.2752 16.5888 -36.864 36.864 -36.864 s 36.864 16.5888 36.864 36.864 s -16.5888 36.864 -36.864 36.864 s -36.864 -16.5888 -36.864 -36.864 Z M 876.544 683.213 c -5.9392 -3.072 -13.312 -10.24 -15.1552 -13.7216 c -1.2288 -2.2528 -2.2528 -4.5056 -3.4816 -6.5536 c -1.2288 -2.2528 -2.6624 -4.3008 -3.8912 -6.3488 c -2.2528 -3.4816 -4.7104 -13.312 -4.3008 -20.0704 a 59.8016 59.8016 0 0 0 -29.9008 -55.0912 c -19.8656 -11.4688 -44.8512 -10.4448 -63.8976 2.4576 c -5.7344 3.8912 -12.4928 5.7344 -20.0704 5.5296 c -4.096 -0.2048 -8.3968 -0.2048 -12.4928 0 c -7.5776 0.2048 -14.9504 -1.6384 -21.0944 -5.9392 a 59.945 59.945 0 0 0 -92.7744 53.4528 c 0.4096 7.5776 -1.4336 14.9504 -5.5296 21.2992 c -2.2528 3.4816 -4.3008 7.168 -6.144 10.8544 c -3.4816 6.5536 -8.6016 11.4688 -14.7456 14.5408 a 60.5389 60.5389 0 0 0 -34.2016 54.0672 c 0 22.528 12.4928 43.008 32.768 53.4528 c 5.9392 3.072 13.312 10.24 15.1552 13.7216 c 1.2288 2.2528 2.2528 4.5056 3.4816 6.5536 c 1.2288 2.2528 2.6624 4.3008 3.8912 6.3488 c 2.2528 3.4816 4.7104 13.312 4.3008 20.0704 a 59.8016 59.8016 0 0 0 59.8016 63.0784 c 11.8784 0 23.9616 -3.4816 33.9968 -10.4448 c 5.7344 -3.8912 12.9024 -5.7344 20.0704 -5.5296 c 4.3008 0.2048 8.6016 0.2048 12.9024 0 c 7.5776 -0.2048 14.5408 1.6384 20.8896 5.5296 c 19.0464 12.0832 43.008 12.6976 62.2592 1.4336 c 19.456 -11.264 30.9248 -32.1536 29.9008 -54.6816 c -0.4096 -7.3728 1.6384 -14.5408 5.5296 -20.8896 c 2.2528 -3.6864 4.5056 -7.3728 6.5536 -11.264 c 3.4816 -6.5536 8.6016 -11.6736 14.9504 -14.5408 a 60.5389 60.5389 0 0 0 34.2016 -54.0672 a 60.4365 60.4365 0 0 0 -32.9728 -53.248 Z m -19.0464 70.656 c -14.336 6.9632 -25.8048 18.2272 -33.3824 32.5632 c -1.4336 2.8672 -3.072 5.5296 -4.7104 8.192 c -8.6016 13.312 -12.6976 28.8768 -11.8784 44.6464 c 0.4096 7.168 -3.2768 13.9264 -9.4208 17.408 c -6.3488 3.4816 -13.9264 3.2768 -19.8656 -0.6144 c -13.312 -8.6016 -28.8768 -12.9024 -44.6464 -12.0832 c -3.072 0.2048 -6.3488 0.2048 -9.4208 0 c -16.1792 -0.6144 -31.744 3.6864 -44.8512 12.6976 c -6.144 4.096 -14.1312 4.5056 -20.2752 0.8192 c -6.144 -3.4816 -9.8304 -10.24 -9.4208 -17.6128 c 0.6144 -12.288 -2.4576 -31.5392 -10.8544 -44.2368 c -1.024 -1.4336 -1.8432 -3.072 -2.8672 -4.7104 c -0.8192 -1.6384 -1.8432 -3.072 -2.4576 -4.7104 c -6.9632 -13.7216 -21.9136 -26.0096 -32.9728 -31.5392 a 18.8416 18.8416 0 0 1 -10.4448 -16.9984 c 0 -7.168 4.3008 -13.9264 11.0592 -17.2032 c 14.336 -6.9632 25.8048 -18.2272 33.3824 -32.5632 c 1.4336 -2.6624 2.8672 -5.3248 4.5056 -7.7824 c 8.6016 -13.7216 12.6976 -29.2864 11.8784 -45.4656 c -0.4096 -7.3728 3.2768 -14.1312 9.4208 -17.6128 a 19.0464 19.0464 0 0 1 20.0704 0.8192 c 13.5168 8.8064 29.2864 13.1072 45.2608 12.4928 c 3.072 -0.2048 5.9392 -0.2048 9.0112 0 c 16.384 0.6144 31.744 -3.6864 44.8512 -12.6976 c 6.144 -4.096 14.1312 -4.5056 20.48 -0.8192 c 6.144 3.4816 9.8304 10.24 9.4208 17.6128 c -0.6144 12.288 2.4576 31.5392 10.8544 44.2368 c 1.024 1.4336 1.8432 3.072 2.8672 4.7104 c 0.8192 1.6384 1.8432 3.072 2.4576 4.7104 c 6.9632 13.7216 21.9136 26.0096 32.9728 31.5392 c 6.5536 3.2768 10.4448 9.8304 10.4448 16.9984 c -0.6144 7.168 -4.9152 13.9264 -11.4688 17.2032 Z" p-id="4284"></path><path d="M 696.525 681.165 c -30.9248 17.8176 -41.3696 57.344 -23.552 88.2688 a 64.7782 64.7782 0 0 0 88.2688 23.7568 c 30.72 -17.8176 41.3696 -57.344 23.552 -88.2688 a 64.471 64.471 0 0 0 -88.2688 -23.7568 Z m 55.0912 61.8496 c -1.6384 6.144 -5.5296 11.264 -11.0592 14.336 s -11.8784 3.8912 -17.8176 2.4576 c -6.144 -1.6384 -11.264 -5.5296 -14.336 -11.0592 s -3.8912 -11.8784 -2.4576 -17.8176 c 1.6384 -6.144 5.5296 -11.264 11.0592 -14.336 a 23.6954 23.6954 0 0 1 34.6112 26.4192 Z" p-id="4285">
+</path>
+</svg>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 377c3f9db1..52264b1321 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -246,9 +246,8 @@ const deepScale = computed(() => scale.value / 100)
   >
     <component-edit-bar
       v-if="!showPosition.includes('canvas') && dvInfo.type === 'dashboard' && !props.isSelector"
-      class="wrapper-edit-bar"
+      class="wrapper-edit-bar wrapper-edit-bar-active"
       ref="componentEditBarRef"
-      :class="{ 'wrapper-edit-bar-active': active }"
       :canvas-id="canvasId"
       :index="index"
       :element="config"
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 3518d66e4d..5081780ba6 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@@ -56,6 +56,18 @@
         </el-icon>
       </span>
     </el-tooltip>
+    <el-tooltip
+      effect="dark"
+      placement="top"
+      content="输入计算数据"
+      v-if="barShowCheck('datasetParams')"
+    >
+      <span>
+        <el-icon class="bar-base-icon" @click="datasetParamsInit">
+          <Icon name="icon_params_setting"></Icon>
+        </el-icon>
+      </span>
+    </el-tooltip>
 
     <div v-if="barShowCheck('multiplexing')" class="bar-checkbox-area">
       <el-checkbox
@@ -161,7 +173,6 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-
     <el-popover v-if="selectFieldShow" width="200" trigger="click" @mousedown="fieldsAreaDown">
       <template #reference>
         <el-icon class="bar-base-icon"> <Icon name="database"></Icon></el-icon>
@@ -206,6 +217,7 @@ const { emitter } = useEmitt()
 // bar所在位置可以显示的功能按钮
 const positionBarShow = {
   canvas: [
+    'datasetParams',
     'enlarge',
     'details',
     'setting',
@@ -216,7 +228,7 @@ const positionBarShow = {
     'linkageSetting',
     'linkJumpSetting'
   ],
-  preview: ['enlarge', 'details', 'download', 'unLinkage', 'previewDownload'],
+  preview: ['enlarge', 'details', 'download', 'unLinkage', 'previewDownload', 'datasetParams'],
   multiplexing: ['multiplexing'],
   batchOpt: ['batchOpt'],
   linkage: ['linkage']
@@ -225,6 +237,7 @@ const positionBarShow = {
 // bar所属组件类型可以显示的功能按钮
 const componentTypeBarShow = {
   UserView: [
+    'datasetParams',
     'enlarge',
     'details',
     'setting',
@@ -419,6 +432,10 @@ const deleteComponent = () => {
   snapshotStore.recordSnapshotCache()
 }
 
+const datasetParamsInit = () => {
+  // do init
+}
+
 const copyComponent = () => {
   copyStore.copy()
   copyStore.paste(false)
diff --git a/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue b/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
new file mode 100644
index 0000000000..c2e1df39d0
--- /dev/null
+++ b/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { deepCopy } from '@/utils/utils'
+import DeUpload from '@/components/visualization/common/DeUpload.vue'
+const { t } = useI18n()
+const loading = ref(false)
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('commons.input_content'),
+      trigger: 'change'
+    },
+    {
+      max: 50,
+      message: t('commons.char_can_not_more_50'),
+      trigger: 'change'
+    }
+  ]
+}
+const subject = ref()
+const subjectDialogShow = ref(false)
+const optType = ref('new')
+
+const curDataSetParamsInfo = ref([])
+
+const resetForm = () => {
+  subject.value.clearValidate()
+  subjectDialogShow.value = false
+}
+const subjectForm = ref(null)
+const title = computed(() => (optType.value === 'new' ? '新建主题' : '编辑主题'))
+
+const optInit = (subjectItem, opt) => {
+  optType.value = opt
+  subjectDialogShow.value = true
+  curDataSetParamsInfo.value = subjectItem
+}
+
+const saveSubject = () => {
+  subject.value.validate(result => {
+    if (result) {
+      emits('finish', subjectForm.value)
+    }
+  })
+}
+
+defineExpose({
+  optInit,
+  resetForm
+})
+
+const emits = defineEmits(['finish'])
+const onImgChange = imgUrl => {
+  subjectForm.value.coverUrl = imgUrl
+}
+</script>
+
+<template>
+  <el-dialog
+    v-loading="loading"
+    :title="title"
+    v-model="subjectDialogShow"
+    width="400px"
+    :before-close="resetForm"
+  >
+    <el-form
+      label-position="top"
+      require-asterisk-position="right"
+      ref="subject"
+      :model="subjectForm"
+      :rules="rules"
+    >
+      <el-form-item v-for="paramsItem in curDataSetParamsInfo" class="form-item" prop="name">
+        <template #label>
+          <label class="m-label"> {{ paramsItem.name }} </label>
+        </template>
+        <el-input v-model="paramsItem.value" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button secondary @click="resetForm()">取消</el-button>
+      <el-button type="primary" @click="saveSubject()">确认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+:deep(.ed-dialog__header) {
+  text-align: left;
+}
+.m-label {
+  color: #1f2329;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  display: inline-block;
+}
+.form-item {
+  margin-bottom: 16px;
+  :deep(.ed-form-item__label) {
+    line-height: 14px !important;
+  }
+
+  :deep(.ed-input__inner) {
+    font-size: 14px !important;
+  }
+
+  :deep(.ed-form-item__error) {
+    top: 88%;
+  }
+  .ed-input {
+    --ed-input-height: 32px !important;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  :deep(.avatar-uploader-container) {
+    margin-bottom: 0px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue b/core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue
new file mode 100644
index 0000000000..47c5a7731f
--- /dev/null
+++ b/core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue
@@ -0,0 +1,110 @@
+<template>
+  <el-row>
+    <el-form ref="form" size="mini" label-width="70px">
+      <el-form-item :label="t('visualization.enable_jump')">
+        <el-switch v-model="state.linkInfo.enable" size="mini" />
+        <span v-show="state.linkInfo.enable" class="tips-area">
+          Tips:{{ t('visualization.link_open_tips') }}
+        </span>
+      </el-form-item>
+      <el-form-item :label="t('visualization.open_mode')">
+        <el-radio-group v-model="state.linkInfo.openMode" :disabled="!state.linkInfo.enable">
+          <el-radio label="_blank">{{ t('visualization.new_window') }}</el-radio>
+          <el-radio label="_self">{{ t('visualization.now_window') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="t('visualization.hyperLinks')">
+        <el-input v-model="state.linkInfo.content" :disabled="!state.linkInfo.enable" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">{{ t('visualization.confirm') }}</el-button>
+        <el-button @click="onClose">{{ t('visualization.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { checkAddHttp, deepCopy } from '@/utils/utils'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+const snapshotStore = snapshotStoreWithOut()
+const emits = defineEmits(['onClose'])
+const props = defineProps({
+  linkInfo: {
+    type: Object,
+    required: true
+  }
+})
+
+const state = reactive({
+  componentType: null,
+  linkInfo: deepCopy(props.linkInfo),
+  linkageActiveStatus: false
+})
+
+const dvMainStore = dvMainStoreWithOut()
+
+const onSubmit = () => {
+  state.linkInfo.content = checkAddHttp(state.linkInfo.content)
+  dvMainStore.curComponent.hyperlinks = deepCopy(state.linkInfo)
+  snapshotStore.recordSnapshotCache()
+  onClose()
+}
+
+const onClose = () => {
+  emits('onClose')
+}
+</script>
+
+<style lang="less" scoped>
+.tips-area {
+  color: #909399;
+  font-size: 8px;
+  margin-left: 3px;
+}
+.slot-class {
+  color: white;
+}
+
+.bottom {
+  margin-top: 20px;
+  text-align: center;
+}
+.ellipsis-area {
+  margin-left: 10px;
+  margin-right: 10px;
+  overflow: hidden; /*超出部分隐藏*/
+  white-space: nowrap; /*不换行*/
+  text-overflow: ellipsis; /*超出部分文字以...显示*/
+  background-color: #f7f8fa;
+  color: #3d4d66;
+  font-size: 12px;
+  line-height: 24px;
+  height: 24px;
+  border-radius: 3px;
+}
+
+.select-filed {
+  margin-left: 10px;
+  margin-right: 10px;
+  overflow: hidden; /*超出部分隐藏*/
+  white-space: nowrap; /*不换行*/
+  text-overflow: ellipsis; /*超出部分文字以...显示*/
+  color: #3d4d66;
+  font-size: 12px;
+  line-height: 35px;
+  height: 35px;
+  border-radius: 3px;
+}
+:deep(.el-popover) {
+  height: 200px;
+  overflow: auto;
+}
+.icon-font {
+  color: white;
+}
+</style>