congmao-cli 1.0.0

package/src/template/Vue2/src/pages/detail/deploy/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="detail-deploy">
+    <t-row :gutter="12">
+      <t-col :lg="6" :xs="12">
+        <t-card title="部署趋势" :bordered="false">
+          <div class="deploy-panel-left">
+            <div id="monitorContainer" style="width: 100%; height: 265px" />
+          </div>
+        </t-card>
+      </t-col>
+      <t-col :lg="6" :xs="12">
+        <t-card title="告警情况" :bordered="false">
+          <template #option>
+            <t-radio-group default-value="dateVal" @change="onAlertChange">
+              <t-radio-button value="dateVal"> 本周 </t-radio-button>
+              <t-radio-button value="monthVal"> 本月 </t-radio-button>
+            </t-radio-group>
+          </template>
+          <div id="dataContainer" style="width: 100%; height: 265px" />
+        </t-card>
+      </t-col>
+    </t-row>
+
+    <!-- 项目列表 -->
+    <t-card title="项目列表" class="container-base-margin-top" :bordered="false">
+      <t-table
+        :columns="columns"
+        :data="data"
+        :pagination="pagination"
+        :hover="hover"
+        rowKey="index"
+        @sort-change="sortChange"
+        @change="rehandleChange"
+      >
+        <template #op="slotProps">
+          <a class="t-button-link" @click="listClick(slotProps)">管理</a>
+          <a class="t-button-link" @click="deleteClickOp(slotProps)">删除</a>
+        </template>
+        <order-descending-icon slot="op-column" />
+      </t-table>
+    </t-card>
+    <t-dialog header="基本信息" :visible.sync="visible" @confirm="onConfirm">
+      <div slot="body">
+        <div class="dialog-info-block">
+          <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
+            <h1>{{ item.name }}</h1>
+            <span
+              :class="{
+                ['green']: item.type && item.type.value === 'green',
+                ['blue']: item.type && item.type.value === 'blue',
+              }"
+              >{{ item.value }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { TableSort } from 'tdesign-vue';
+import { OrderDescendingIcon } from 'tdesign-icons-vue';
+import * as echarts from 'echarts/core';
+import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
+import { BarChart, LineChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { mapState } from 'vuex';
+
+import { getSmoothLineDataSet, get2ColBarChartDataSet } from './index';
+import model from '@/service/service-detail-deploy';
+
+echarts.use([
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+]);
+
+/** 部署配置 */
+export default {
+  name: 'DetailDeploy',
+  components: {
+    OrderDescendingIcon,
+  },
+  data() {
+    return {
+      monitorContainer: '',
+      dataContainer: '',
+      dashboardBase: '',
+      formData: {},
+      data: [],
+      bordered: true,
+      hover: true,
+      pagination: {
+        defaultPageSize: 10,
+        total: 100,
+        defaultCurrent: 1,
+        pageSizeOptions: [],
+      },
+      baseInfoData: model.getBaseInfoData(),
+      columns: model.getTableColumns(),
+      visible: false,
+      areaChart: '',
+      timer: '',
+      columnChart: '',
+    };
+  },
+  computed: {
+    ...mapState('setting', ['brandTheme', 'mode']),
+  },
+  watch: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    brandTheme(val): void {
+      const { chartColors } = this.$store.state.setting;
+
+      this.areaChart.setOption(getSmoothLineDataSet({ ...chartColors }));
+      this.columnChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
+    },
+    mode() {
+      this.renderCharts();
+    },
+  },
+  beforeDestroy(): void {
+    clearInterval(this.timer);
+  },
+
+  async mounted() {
+    this.$nextTick(() => {
+      this.updateContainer();
+    });
+
+    this.$request
+      .get('/api/get-project-list')
+      .then((res) => {
+        if (res.code === 0) {
+          const { list = [] } = res.data;
+          this.data = list;
+          this.pagination = {
+            ...this.pagination,
+            total: list.length,
+          };
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+
+    window.addEventListener('resize', this.updateContainer, false);
+
+    this.renderCharts();
+  },
+  methods: {
+    onAlertChange(val: string): void {
+      // console.log(val);
+      const isMonth = val === 'monthVal';
+      const { chartColors } = this.$store.state.setting;
+
+      this.columnChart.setOption(get2ColBarChartDataSet({ isMonth, ...chartColors }));
+    },
+    updateContainer(): void {
+      this.areaChart.resize({
+        width: this.monitorContainer.clientWidth,
+        height: this.monitorContainer.clientHeight,
+      });
+      this.columnChart.resize({
+        width: this.dataContainer.clientWidth,
+        height: this.dataContainer.clientHeight,
+      });
+    },
+    sortChange(val: TableSort): void {
+      console.log(val);
+    },
+    rehandleChange(changeParams, triggerAndData): void {
+      console.log('统一Change', changeParams, triggerAndData);
+    },
+    listClick(e): void {
+      console.log(e);
+      this.visible = true;
+    },
+    deleteClickOp(e): void {
+      this.data.splice(e.rowIndex, 1);
+    },
+    onConfirm(): void {
+      this.visible = false;
+    },
+    renderCharts(): void {
+      const { chartColors } = this.$store.state.setting;
+
+      if (!this.monitorContainer) {
+        this.monitorContainer = document.getElementById('monitorContainer');
+      }
+      this.areaChart = echarts.init(this.monitorContainer);
+      this.areaChart.setOption(getSmoothLineDataSet({ ...chartColors }));
+
+      // 定时动态效果
+      this.timer = setInterval(() => {
+        this.areaChart.setOption(getSmoothLineDataSet({ ...chartColors }));
+      }, 3000);
+
+      if (!this.dataContainer) {
+        this.dataContainer = document.getElementById('dataContainer');
+      }
+      this.columnChart = echarts.init(this.dataContainer);
+      this.columnChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.detail-deploy {
+  /deep/ .t-card {
+    padding: 8px;
+  }
+
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+</style>

package/src/template/Vue2/src/pages/detail/secondary/index.less

@@ -0,0 +1,71 @@
+@import '@/style/variables.less';
+
+.secondary-notification {
+  background-color: var(--td-bg-color-container);
+  border-radius: var(--td-radius-default);
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingTB-xxl);
+
+  .t-tabs__content {
+    padding-top: 0;
+  }
+}
+
+.secondary-msg-list {
+  height: 70vh;
+
+  .t-list-item {
+    cursor: pointer;
+    padding: 13px 24px 13px 0;
+
+    &:hover {
+      background-color: var(--td-bg-color-container-hover);
+
+      .msg-date {
+        display: none;
+      }
+
+      .msg-action {
+        display: flex;
+        align-items: center;
+
+        &-icon {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+
+    .t-tag.t-size-s {
+      margin-right: var(--td-comp-margin-s);
+      margin-left: 0;
+    }
+  }
+
+  .content {
+    color: var(--td-text-color-placeholder);
+    font: var(--td-font-body-medium);
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .unread {
+    color: var(--td-text-color-primary);
+  }
+
+  .msg-action {
+    display: none;
+
+    .set-read-icon {
+      margin-right: 24px;
+    }
+  }
+
+  &__empty-list {
+    min-height: 443px;
+    padding-top: 170px;
+    text-align: center;
+    color: var(--td-text-color-primary);
+  }
+}

package/src/template/Vue2/src/pages/detail/secondary/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="secondary-notification">
+      <t-tabs v-model="tabValue">
+        <t-tab-panel v-for="(tab, tabIndex) in TAB_LIST" :key="tabIndex" :value="tab.value" :label="tab.label">
+          <t-list v-if="msgDataList.length > 0" class="secondary-msg-list" :split="true">
+            <t-list-item v-for="(item, index) in msgDataList" :key="index">
+              <p :class="['content', { unread: item.status }]" @click="setReadStatus(item)">
+                <t-tag size="small" :theme="NOTIFICATION_TYPES[item.quality]" variant="light">
+                  {{ item.type }}
+                </t-tag>
+                {{ item.content }}
+              </p>
+              <template #action>
+                <span class="msg-date">{{ item.date }}</span>
+                <div class="msg-action">
+                  <t-tooltip
+                    class="set-read-icon"
+                    :overlay-style="{ margin: '6px' }"
+                    :content="item.status ? '设为已读' : '设为未读'"
+                  >
+                    <span class="msg-action-icon" @click="setReadStatus(item)">
+                      <queue-icon v-if="!!item.status" size="16px" />
+                      <chat-icon v-else />
+                    </span>
+                  </t-tooltip>
+                  <t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
+                    <span @click="handleClickDeleteBtn(item)">
+                      <delete-icon size="16px" />
+                    </span>
+                  </t-tooltip>
+                </div>
+              </template>
+            </t-list-item>
+          </t-list>
+          <div v-else class="secondary-msg-list__empty-list">
+            <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
+            <p>暂无通知</p>
+          </div>
+        </t-tab-panel>
+      </t-tabs>
+    </div>
+    <t-dialog
+      header="删除通知"
+      :body="`确认删除通知：${selectedItem && selectedItem.content}吗？`"
+      :visible.sync="visible"
+      :onConfirm="deleteMsg"
+    ></t-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { mapState, mapGetters } from 'vuex';
+import { QueueIcon, DeleteIcon, ChatIcon } from 'tdesign-icons-vue';
+import { prefix } from '@/config/global';
+import { NOTIFICATION_TYPES } from '@/constants';
+import { msgDataItem } from '@/store/modules/notification';
+
+const TAB_LIST = [
+  {
+    label: '全部通知',
+    value: 'msgData',
+  },
+  {
+    label: '未读通知',
+    value: 'unreadMsg',
+  },
+  {
+    label: '已读通知',
+    value: 'readMsg',
+  },
+];
+
+export default {
+  name: 'DetailSecondary',
+  components: {
+    QueueIcon,
+    DeleteIcon,
+    ChatIcon,
+  },
+  data() {
+    return {
+      NOTIFICATION_TYPES,
+      TAB_LIST,
+      prefix,
+      data: [],
+      tabValue: 'msgData',
+      visible: false,
+      selectedItem: undefined,
+    };
+  },
+  computed: {
+    ...mapState('notification', ['msgData']),
+    ...mapGetters('notification', ['unreadMsg', 'readMsg']),
+    msgDataList() {
+      if (this.tabValue === 'msgData') return this.msgData;
+      if (this.tabValue === 'unreadMsg') return this.unreadMsg;
+      if (this.tabValue === 'readMsg') return this.readMsg;
+      return [];
+    },
+  },
+  methods: {
+    handleClickDeleteBtn(item: msgDataItem): void {
+      this.visible = true;
+      this.selectedItem = item;
+    },
+    setReadStatus(item: msgDataItem): void {
+      const changeMsg = this.msgData;
+      changeMsg.forEach((e) => {
+        if (e.id === item.id) {
+          if (e.status) e.status = false;
+        }
+      });
+      this.$store.commit('notification/setMsgData', changeMsg);
+    },
+    deleteMsg(): void {
+      const item = this.selectedItem;
+      const changeMsg = this.msgData;
+      changeMsg.forEach((e, index) => {
+        if (e.id === item.id) {
+          changeMsg.splice(index, 1);
+        }
+      });
+      this.visible = false;
+      this.$store.commit('notification/setMsgData', changeMsg);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import './index';
+</style>

package/src/template/Vue2/src/pages/form/base/index.less

@@ -0,0 +1,57 @@
+@import '@/style/variables.less';
+
+.form-basic-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--td-bg-color-container);
+  padding: 0 32px 134px;
+
+  @media (max-width: @screen-sm-max) {
+    padding: 0 32px 67px;
+
+    .form-basic-container-title {
+      margin: 32px 0 32px;
+    }
+  }
+
+  .form-basic-item {
+    width: 676px;
+
+    .form-basic-container-title {
+      font-size: 20px;
+      line-height: 24px;
+      color: var(--td-text-color-primary);
+      margin: var(--td-comp-size-xxxl) 0 32px;
+    }
+  }
+}
+
+.form-submit-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 30px;
+  padding-bottom: 28px;
+  background-color: var(--td-bg-color-component);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+
+  .form-submit-sub {
+    width: 676px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .form-submit-left {
+      .form-submit-upload-span {
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--td-text-color-placeholder);
+        padding-top: 8px;
+        display: inline-block;
+      }
+    }
+  }
+}