visualization-design/src/views/components/PenDatas.vue

<template>
  <div class="props">
    <div class="px-16 py-16" v-if="pen.realTimes && pen.realTimes.length">
      <div class="grid" style="line-height: 30px">
        <div class="title">数据名</div>
        <div class="title ml-8">值</div>
        <div>
          <div style="text-align: right; padding-right: 2px">
            <t-icon name="more" />
          </div>
        </div>
      </div>
      <div class="grid" v-for="(item, i) in pen.realTimes">
        <t-tooltip :content="item.key" placement="top">
          <label class="label">{{ item.label }}</label>
        </t-tooltip>
        <div class="value">
          <t-input v-model="item.value" />
        </div>
        <div class="actions">
          <t-tooltip content="变量绑定" placement="top">
            <t-icon name="link" class="hover" @click="onBind(item)" />
          </t-tooltip>
          <t-dropdown
            :options="moreOptions"
            @click="onMenuMore($event, item, i)"
            :minColumnWidth="80"
          >
            <t-icon name="more" class="more hover" />
          </t-dropdown>
        </div>
      </div>
      <div class="mt-8">
        <t-dropdown
          :options="options"
          @click="addRealTime"
          :minColumnWidth="150"
        >
          <a> <t-icon name="add-rectangle" /> 添加动态数据 </a>
        </t-dropdown>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png" />
      <div class="gray center">还没有动态数据</div>
      <div class="mt-8">
        <t-dropdown
          :options="options"
          @click="addRealTime"
          :minColumnWidth="150"
        >
          <t-button style="height: 30px"> 添加动态数据 </t-button>
        </t-dropdown>
      </div>
    </div>
  </div>

  <t-dialog
    v-if="addDataDialog.show"
    :visible="true"
    class="data-dialog"
    :header="addDataDialog.header"
    @close="addDataDialog.show = false"
    @confirm="onConfirmData"
  >
    <div class="form-item mt-16">
      <label>数据名</label>
      <t-input
        v-model="addDataDialog.data.label"
        placeholder="简短描述"
        :disabled="!!addDataDialog.data.keywords"
        @blur="onChangeLabel"
      />
    </div>
    <div class="form-item mt-16">
      <label>属性名</label>
      <t-input
        v-model="addDataDialog.data.key"
        placeholder="关键字"
        :disabled="!!addDataDialog.data.keywords"
      />
    </div>
    <div class="form-item mt-16">
      <label>类型</label>
      <t-select
        class="w-full"
        :options="typeOptions"
        v-model="addDataDialog.data.type"
        placeholder="字符串"
        :disabled="!!addDataDialog.data.keywords"
        @change="addDataDialog.data.value = null"
      />
    </div>
    <div class="form-item mt-16">
      <label>值</label>
      <div class="flex-grow" v-if="addDataDialog.data.type === 'number'">
        <t-input
          class="w-full"
          v-model="addDataDialog.data.value"
          placeholder="数字"
        />
        <div class="desc mt-8">
          固定数字：直接输入数字。例如：5<br />
          随机范围数字：最小值-最大值。例如：0-1 或 0-100<br />
          随机指定数字：数字1,数字2,数字3... 。 例如：1,5,10,20<br />
        </div>
      </div>
      <t-select
        v-else-if="addDataDialog.data.type === 'bool'"
        v-model="addDataDialog.data.value"
      >
        <t-option :key="true" :value="true" label="true"></t-option>
        <t-option :key="false" :value="false" label="false"></t-option>
        <t-option key="随机" label="随机"></t-option>
      </t-select>
      <div class="flex-grow" v-else>
        <t-input
          class="w-full"
          v-model="addDataDialog.data.value"
          placeholder="字符串"
        />
        <div class="desc mt-8">
          固定文字：直接输入。例如：大屏可视化<br />
          随机文本：[文本长度]。例如：[8] 或 [16]<br />
          随机指定文本：{文本1,文本2,文本3...} 。 例如：{大屏,可视化}
          <br />
        </div>
      </div>
    </div>
  </t-dialog>

  <t-dialog
    v-if="dataBindDialog.show"
    :visible="true"
    class="data-link-dialog"
    header="变量绑定"
    @cancel="
      dataBindDialog.data.binds = dataBindDialog.bkBinds;
      dataBindDialog.show = false;
    "
    @confirm="dataBindDialog.show = false"
    :width="700"
  >
    <div class="form-item">
      <label>当前绑定：</label>
      <div class="label" v-if="dataBindDialog.data.binds?.length">
        <t-tooltip
          v-for="(tag, index) in dataBindDialog.data.binds"
          :key="index"
          :content="tag.id"
          trigger="click"
        >
          <t-tag class="mr-8 mb-8" closable @close="onRemoveBind(index)">
            {{ tag.label }}
          </t-tag>
        </t-tooltip>
      </div>
      <div class="label gray" v-else>无</div>
    </div>
    <div class="form-item mt-8">
      <t-input
        placeholder="搜索"
        v-model="dataBindDialog.input"
        @change="onSearchDataSet"
        @enter="onSearchDataSet"
      >
        <template #suffixIcon>
          <t-icon name="search" class="hover" @click="onSearchDataSet" />
        </template>
      </t-input>
    </div>
    <t-table
      class="mt-12 data-list"
      row-key="id"
      :data="dataBindDialog.dataSet"
      :columns="dataSetColumns"
      size="small"
      bordered
      :loading="dataBindDialog.loading"
      :pagination="query"
      @page-change="onChangePagination"
      :selected-row-keys="dataBindDialog.selectedIds"
      @select-change="onSelectBindsChange"
    >
    </t-table>
  </t-dialog>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import axios from 'axios';
import { debounce } from '@/services/debouce';

const route = useRoute();
const router = useRouter();

const { pen } = defineProps<{
  pen: any;
}>();

const options = ref<any>([
  {
    value: '',
    content: '自定义',
    divider: true,
  },
  {
    value: 'x',
    content: 'X',
    type: 'number',
    keywords: true,
  },
  {
    value: 'y',
    content: 'Y',
    type: 'number',
    keywords: true,
  },
  {
    value: 'width',
    content: '宽',
    type: 'number',
    keywords: true,
  },
  {
    value: 'height',
    content: '高',
    type: 'number',
    keywords: true,
  },
  {
    value: 'visible',
    content: '显示',
    type: 'bool',
    keywords: true,
  },
  {
    value: 'text',
    content: '文字',
    keywords: true,
  },
  {
    value: 'progress',
    content: '进度',
    keywords: true,
  },
  {
    value: 'showChild',
    content: '状态',
    keywords: true,
  },
  {
    value: 'rotate',
    content: '旋转',
    type: 'number',
    keywords: true,
  },
]);

const moreOptions = ref<any>([
  {
    value: 'edit',
    content: '编辑',
  },
  {
    value: 'delete',
    content: '移除',
  },
]);

const typeOptions = [
  {
    label: '字符串',
  },
  {
    label: '数字',
    value: 'number',
  },
  {
    label: '布尔',
    value: 'bool',
  },
];

const addDataDialog = reactive<any>({
  show: false,
  data: undefined,
});

const dataBindDialog = reactive<any>({
  show: false,
  data: undefined,
});

const dataSetColumns = [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
  },
  {
    colKey: 'id',
    title: '编号',
    width: 150,
    ellipsis: { theme: 'light', trigger: 'context-menu' },
  },
  {
    colKey: 'label',
    title: '变量名称',
    width: 220,
    ellipsis: { theme: 'light', trigger: 'context-menu' },
  },
  {
    colKey: 'case',
    title: '场景',
    ellipsis: { theme: 'light', trigger: 'context-menu' },
  },
];

const query = reactive<{
  current: number;
  pageSize: number;
  total: number;
  range: any[];
}>({
  current: 1,
  pageSize: 10,
  total: 0,
  range: [],
});

onBeforeMount(() => {
  if (pen.realTimesOptions) {
    options.value[options.value.length - 1].divider = true;
    options.value.push(...pen.realTimesOptions);
  }
});

const addRealTime = (e: any) => {
  if (e.keywords) {
    if (!pen.realTimes) {
      pen.realTimes = [];
    }

    pen.realTimes.push({
      label: e.content,
      key: e.value,
      type: e.type,
      keywords: e.keywords,
    });
    return;
  }

  addDataDialog.header = '添加动态数据';

  addDataDialog.data = {
    label: e.content,
    key: e.value,
    type: e.type,
    keywords: e.keywords,
  };
  if (e.keywords) {
    addDataDialog.data.label = '';
  }
  addDataDialog.show = true;
};

const onChangeLabel = () => {
  if (!addDataDialog.data.key) {
    addDataDialog.data.key = addDataDialog.data.label;
  }
};

const onConfirmData = () => {
  if (!pen.realTimes) {
    pen.realTimes = [];
  }
  if (!addDataDialog.data.label || !addDataDialog.data.key) {
    MessagePlugin.error('数据名或属性名不能为空！');
    return;
  }

  if (addDataDialog.header === '添加动态数据') {
    const found = pen.realTimes.findIndex((item: any) => {
      return item.key === addDataDialog.data.key;
    });
    if (found > -1) {
      MessagePlugin.error('已经存在相同属性数据！');
      return;
    }
    pen.realTimes.push(addDataDialog.data);
  }

  addDataDialog.show = false;
};

const onMenuMore = (e: any, item: any, i: number) => {
  switch (e.value) {
    case 'edit':
      addDataDialog.header = '编辑动态数据';
      addDataDialog.data = item;
      addDataDialog.show = true;
      break;
    case 'delete':
      pen.realTimes.splice(i, 1);
      break;
    default:
      break;
  }
};

const onBind = (item: any) => {
  if (!item.binds) {
    item.binds = [];
  }
  dataBindDialog.data = item;
  dataBindDialog.input = '';
  dataBindDialog.selectedIds = [];
  for (const i of item.binds) {
    dataBindDialog.selectedIds.push(i.id);
  }
  dataBindDialog.bkBinds = [];
  dataBindDialog.bkBinds.push(...item.binds);
  dataBindDialog.show = true;

  getDataSet();
};

const onSearchDataSet = () => {
  debounce(getDataSet, 300);
};

const getDataSet = async () => {
  // @ts-ignore
  const data: Meta2dBackData = meta2d.data();

  dataBindDialog.loading = true;

  // 应该从data获取url或结果列表
  const ret: any = await axios.get(
    `/api/device/data/set?mock=1&q=${dataBindDialog.input}&current=${query.current}&pageSize=${query.pageSize}`
  );

  dataBindDialog.dataSet = ret.list;
  query.total = ret.total;
  dataBindDialog.loading = false;
};

const onChangePagination = (pageInfo: any) => {
  router.push({
    path: route.path,
    query: { current: pageInfo.current, pageSize: pageInfo.pageSize },
  });
  query.current = pageInfo.current;
  query.pageSize = pageInfo.pageSize;
  getDataSet();
};

const onSelectBindsChange = (value: string[], options: any) => {
  dataBindDialog.selectedIds = value;

  if (options.type === 'check') {
    for (const item of options.selectedRowData) {
      const found = dataBindDialog.data.binds.findIndex((elem: any) => {
        return elem.id === item.id;
      });
      if (found < 0) {
        dataBindDialog.data.binds.push(toRaw(item));
      }
    }
  } else if (options.type === 'uncheck') {
    if (options.currentRowKey === 'CHECK_ALL_BOX') {
      for (const data of dataBindDialog.dataSet) {
        const found = dataBindDialog.data.binds.findIndex((elem: any) => {
          return elem.id === data.id;
        });
        if (found > -1) {
          dataBindDialog.data.binds.splice(found, 1);
        }
      }
    } else {
      const found = dataBindDialog.data.binds.findIndex((elem: any) => {
        return elem.id === options.currentRowKey;
      });
      if (found > -1) {
        dataBindDialog.data.binds.splice(found, 1);
      }
    }
  }
};

const onRemoveBind = (index: number) => {
  dataBindDialog.data.binds.splice(index, 1);

  dataBindDialog.selectedIds = [];
  for (const i of dataBindDialog.data.binds) {
    dataBindDialog.selectedIds.push(i.id);
  }
};
</script>
<style lang="postcss" scoped>
.props {
  height: 100%;

  .grid {
    grid-template-columns: 80px 154px 40px;
  }

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .label {
    width: fit-content;
    font-size: 10px;
    line-height: 28px;
    color: var(--color-desc);
  }

  .value {
    padding-right: 8px;

    :deep(.t-input) {
      height: 26px;
      border-color: transparent;
      &:hover {
        border-color: var(--color-primary);
      }
    }
  }

  .actions {
    svg {
      margin-left: 6px;
    }
  }

  .data-list {
    height: 300px;
    overflow: auto;
  }
}
</style>