增加黄金指标相关代码

src/views/perfManage/goldTarget/index.vue

@@ -1,334 +1,245 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { parseDateToStr } from '@/utils/date-utils';
+import {  message } from 'ant-design-vue/lib';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { listgoldData } from '@/api/perfManage/goldTarget';
 import useNeInfoStore from '@/store/modules/neinfo';
-import useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
-const { getDict } = useDictStore();
-const { t } = useI18n();
-const route = useRoute();
+import { getGoldTitleByNE, goldData } from '@/api/perfManage/goldTarget';
 
-/**路由标题 */
-let title = ref<string>((route.meta.title as string) ?? '标题');
+const { t, currentLocale } = useI18n();
+
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
 
 /**记录开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
+let queryParams: any = reactive({
+  /**已勾选指标 */
+  goldArr:[],
+  /**告警设备类型 */
   neType: '',
-  /**记录时间 */
+  /**告警网元标识 */
+  neId: '',
+  /**颗粒度 */
+  particle: '',
   beginTime: '',
   endTime: '',
-  /**排序字段 */
-  sortField: 'value',
-  /**排序方式 */
-  sortOrder: 'asc',
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
 });
 
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    beginTime: '',
-    endTime: '',
-    sortField: 'value',
-    sortOrder: 'asc',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  queryRangePicker.value = ['', ''];
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
-  /**记录数据 */
-  data: object[];
+/**对象信息状态类型 */
+type StateType = {
+  /**网元类型 */
+  neType: string[];
+  /**制表网元类型 */
+  designNeType: string;
+  /**黄金指标集 tree */
+  designTreeData: any[];
+  /**指标勾选集*/
+  goldArr: any[];
+  /**表单数据 */
+  from: Record<string, any>;
 };
 
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  seached: true,
-  data: [],
+/**对象信息状态 */
+let state: StateType = reactive({
+  neType: [],
+  designNeType: '',
+  designTreeData: [],
+  goldArr: [],
+  from: {
+    uploadLoading: false,
+    sendLoading: false,
+  },
 });
 
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.perfManage.goldTarget.type'),
-    dataIndex: 'neType',
-    align: 'center',
-  },
-  {
-    title: t('views.perfManage.goldTarget.enTitle'),
-    dataIndex: 'enTitle',
-    align: 'center',
-  },
-  {
-    title: t('views.perfManage.goldTarget.value'),
-    dataIndex: 'value',
-    key: 'value',
-    align: 'center',
-    sorter: true,
-  },
-  {
-    title: t('views.perfManage.goldTarget.startTime'),
-    dataIndex: 'startTime',
-    key: 'start_time',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    sorter: true,
-  },
-  {
-    title: t('views.perfManage.goldTarget.endTime'),
-    dataIndex: 'endTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-  },
-];
-
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: false,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
+/**网元类型选择对应修改 */
+function fnNeChange(keys: any, _: any) {
+  // 不是同类型时需要重新加载
+  if (state.designNeType !== keys[0]) {
+    state.designTreeData = [];
     fnGetList();
-  },
-});
-
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
+  }
 }
 
-/**查询黄金指标列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
+/**查询可选命令列表 */
+function fnGetList() {
+  const neType = queryParams.neType[0];
+  state.designNeType = neType;
+  var language = currentLocale.value.split('_')[0];
+  // console.log(language)
+  if (language === 'zh') language = 'cn';
+  getGoldTitleByNE(neType).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 构建自动完成筛选结构
+      const autoCompleteArr: Record<string, any>[] = [];
+      // 构建树结构
+      const treeArr: Record<string, any>[] = [];
+      for (const item of res.data) {
+        const id = item['id'];
+        const kpiDisplay = item[`${language}Title`];
+        const kpiValue = item[`kpiId`];
+        treeArr.push({
+          key: kpiValue,
+          title: kpiDisplay,
+        });
+      }
+      state.designTreeData = treeArr;
+    } else {
+      message.warning({
+        content: t('common.getInfoFail'),    
+        duration: 2,
+      });
+    }
+  });
+}
+
+/**筛选条件进行制图 */
+function fnDesign() {
+  const neType=queryParams.neType[0];
   if (!queryRangePicker.value) {
     queryRangePicker.value = ['', ''];
   }
   queryParams.beginTime = queryRangePicker.value[0];
   queryParams.endTime = queryRangePicker.value[1];
-  listgoldData(toRaw(queryParams)).then(res => {
+  console.log(toRaw(queryParams));
+  goldData(queryParams).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
+          console.log(res.rows);
+    } else {
+      message.warning({
+        content: t('common.getInfoFail'),    
+        duration: 2,
+      });
     }
-    tableState.loading = false;
   });
 }
 
-/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
-function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
-  console.log(sorter);
-  const { columnKey, order } = sorter;
-  if (order) {
-    queryParams.sortField = columnKey;
-    queryParams.sortOrder = order.replace('end', '');
-  } else {
-    queryParams.sortOrder = 'asc';
-  }
-  fnGetList(1);
+/**勾选指标的变动 */
+function fnTreeCheck(value: any, _: any) {
+  queryParams.goldArr = value;
 }
 
 onMounted(() => {
   // 获取网元网元列表
-  useNeInfoStore().fnNelist();
-  // 获取列表数据
-  fnGetList();
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          // 过滤不可用的网元
+          neCascaderOptions.value = useNeInfoStore().getNeCascaderOtions.filter(
+            (item: any) => {
+              return !['OMC'].includes(item.value);
+            }
+          );
+          // 默认选择AMF
+          const item = neCascaderOptions.value.find(s => s.value === 'AMF');
+          if (item && item.children) {
+            const info = item.children[0];
+            queryParams.neType = [info.neType, info.neId];
+          } else {
+            const info = neCascaderOptions.value[0].children[0];
+            queryParams.neType = [info.neType, info.neId];
+          }
+          fnGetList();
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    });
 });
 </script>
 
 <template>
   <PageContainer>
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+    <a-row :gutter="16">
+      <a-col :span="9">
+        <!-- 命令导航 -->
+        <a-card
+          size="small"
+          :bordered="false"
+          :title="t('views.mmlManage.cmdTitle')"
+        >
+          <a-form :model="queryParams" name="queryParams" layout="horizontal">
+            <a-row :gutter="16">
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  name="neType"
+                  :label="t('views.traceManage.task.neType')"
+                >
+                  <a-cascader
+                    v-model:value="queryParams.neType"
+                    :options="neCascaderOptions"
+                    @change="fnNeChange"
+                    :allow-clear="false"
+                    :placeholder="t('common.selectPlease')"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+
             <a-form-item
-              :label="t('views.perfManage.goldTarget.type')"
-              name="neType"
-            >
-              <a-auto-complete
-                v-model:value="queryParams.neType"
-                :options="useNeInfoStore().getNeSelectOtions"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.perfManage.goldTarget.startTime')"
-              name="queryRangePicker"
+              :label="t('views.perfManage.goldTarget.timeFrame')"
+              name="eventTime"
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                allow-clear
-                bordered
-                show-time
                 value-format="YYYY-MM-DD HH:mm:ss"
                 format="YYYY-MM-DD HH:mm:ss"
-                style="width: 100%"
-              ></a-range-picker>
+                show-time
+              />
             </a-form-item>
-          </a-col>
 
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList(1)">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click" placement="bottomRight">
-              <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
-              </a-button>
-              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
+            <a-row :gutter="16">
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  :label="t('views.perfManage.goldTarget.particle')"
+                  name="particle"
                 >
-                  <a-menu-item key="default">
-                    {{ t('common.size.default') }}
-                  </a-menu-item>
-                  <a-menu-item key="middle">
-                    {{ t('common.size.middle') }}
-                  </a-menu-item>
-                  <a-menu-item key="small">
-                    {{ t('common.size.small') }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </a-space>
-      </template>
-
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        @change="fnTableChange"
-        :pagination="tablePagination"
-        :scroll="{ x: true }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'alarmTitle'">
-            <a-tooltip>
-              <template #title>{{ record.operResult }}</template>
-              <div class="alarmTitleText">{{ record.alarmTitle }}</div>
-            </a-tooltip>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
+                  <a-select
+                    v-model:value="queryParams.particle"
+                    :placeholder="t('common.selectPlease')"
+                    :options="[
+                      { label: '15M', value: '15' },
+                      { label: '30M', value: '30' },
+                      { label: '60M', value: '60' },
+                    ]"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item>
+                  <a-space :size="8">
+                    <a-button type="primary" @click.prevent="fnDesign()">
+                      <template #icon><SearchOutlined /></template>
+                      {{ t('common.search') }}
+                    </a-button>
+                  </a-space>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+          <a-form layout="vertical" autocomplete="off">
+            <a-form-item name="goldTree" v-if="state.designTreeData.length > 0">
+              <a-directory-tree
+                :tree-data="state.designTreeData"
+                checkable
+                default-expand-all
+                @check="fnTreeCheck"
+              ></a-directory-tree>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+      <a-col :span="15"> </a-col>
+    </a-row>
   </PageContainer>
 </template>
 
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-.alarmTitleText {
-  max-width: 300px;
-  cursor: pointer;
-}
-</style>
+<style lang="less" scoped></style>