congmao-cli 1.0.0

package/src/template/Vue2/src/pages/dashboard/base/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <t-back-top
+      container=".tdesign-starter-layout"
+      :visible-height="0"
+      style="position: absolute"
+      :offset="['24px', '80px']"
+    >
+      <t-icon name="backtop" size="20px" />
+    </t-back-top>
+    <!-- 顶部 card  -->
+    <top-panel class="row-container" />
+    <!-- 中部图表  -->
+    <middle-chart class="row-container" />
+    <!-- 列表排名 -->
+    <rank-list class="row-container" />
+    <!-- 出入库概览 -->
+    <output-overview class="row-container" />
+  </div>
+</template>
+<script>
+import TopPanel from './components/TopPanel.vue';
+import MiddleChart from './components/MiddleChart.vue';
+import RankList from './components/RankList.vue';
+import OutputOverview from './components/OutputOverview.vue';
+
+export default {
+  name: 'DashboardBase',
+  components: {
+    TopPanel,
+    MiddleChart,
+    RankList,
+    OutputOverview,
+  },
+};
+</script>
+<style scoped lang="less">
+.row-container {
+  margin-bottom: 16px;
+}
+/deep/ .t-card__body {
+  padding-top: 0;
+}
+</style>

package/src/template/Vue2/src/pages/dashboard/detail/index.ts

@@ -0,0 +1,267 @@
+import dayjs from 'dayjs';
+import { getChartListColor } from '@/utils/color';
+import { getDateArray, getRandomArray } from '@/utils/charts';
+
+/**
+ * 散点图数据
+ *
+ * @export
+ * @returns {any[]}
+ */
+export function getScatterDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>): any {
+  const divideNum = 40;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    // const [timeArray, inArray, outArray] = dataset;
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const endTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(endTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
+  }
+
+  return {
+    color: getChartListColor(),
+    xAxis: {
+      data: timeArray,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // splitLine: { show: false},
+      axisLabel: {
+        color: placeholderColor,
+      },
+      nameTextStyle: {
+        padding: [0, 0, 0, 60],
+      },
+      axisTick: {
+        show: false,
+        axisLine: {
+          show: false,
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      top: '5px',
+      left: '25px',
+      right: '5px',
+      bottom: '60px',
+    },
+    legend: {
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['按摩仪', '咖啡机'],
+      itemHeight: 8,
+      itemWidth: 8,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    series: [
+      {
+        name: '按摩仪',
+        symbolSize: 10,
+        data: outArray.reverse(),
+        type: 'scatter',
+      },
+      {
+        name: '咖啡机',
+        symbolSize: 10,
+        data: inArray.concat(inArray.reverse()),
+        type: 'scatter',
+      },
+    ],
+  };
+}
+
+/** 折线图数据 */
+export function getFolderLineDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
+  let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  if (dateTime.length > 0) {
+    const divideNum = 7;
+    dateArray = getDateArray(dateTime, divideNum);
+  }
+  return {
+    color: getChartListColor(),
+    grid: {
+      top: '5%',
+      right: '10px',
+      left: '30px',
+      bottom: '60px',
+    },
+    legend: {
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['杯子', '茶叶', '蜂蜜', '面粉'],
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: dateArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    series: [
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '杯子',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '茶叶',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '蜂蜜',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '面粉',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+    ],
+  };
+}

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

@@ -0,0 +1,242 @@
+<template>
+  <div class="dashboard-detail">
+    <t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
+      <t-row :gutter="[16, 16]">
+        <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
+          <t-card :class="['dashboard-list-card']" :description="item.title">
+            <div class="dashboard-list-card__number">{{ item.number }}</div>
+            <div class="dashboard-list-card__text">
+              <div class="dashboard-list-card__text-left">
+                环比
+                <trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
+              </div>
+              <chevron-right-icon />
+            </div>
+          </t-card>
+        </t-col>
+      </t-row>
+    </t-card>
+    <t-row :gutter="[16, 16]" class="row-margin">
+      <t-col :xs="12" :xl="9">
+        <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
+          <template #actions>
+            <t-date-range-picker
+              style="width: 250px"
+              :default-value="LAST_7_DAYS"
+              theme="primary"
+              mode="date"
+              @change="onMaterialChange"
+            />
+          </template>
+          <div id="lineContainer" ref="lineContainer" style="width: 100%; height: 410px"></div>
+        </t-card>
+      </t-col>
+      <t-col :xs="12" :xl="3">
+        <product-card
+          v-for="(item, index) in PRODUCT_LIST"
+          :key="index"
+          :product="item"
+          :class="{ 'row-margin': index !== 0 }"
+        />
+      </t-col>
+    </t-row>
+    <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品满意度分布" class="row-margin" :bordered="false">
+      <template #actions>
+        <t-date-range-picker
+          style="display: inline-block; margin-right: 8px; width: 250px"
+          :defaultValue="LAST_7_DAYS"
+          theme="primary"
+          mode="date"
+          @change="onSatisfyChange"
+        >
+        </t-date-range-picker>
+        <t-button>导出数据</t-button>
+      </template>
+      <div id="scatterContainer" style="width: 100%; height: 374px"></div>
+    </t-card>
+  </div>
+</template>
+<script lang="ts">
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+import { LineChart, ScatterChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import * as echarts from 'echarts/core';
+import { mapState } from 'vuex';
+import { ChevronRightIcon } from 'tdesign-icons-vue';
+
+import Trend from '@/components/trend/index.vue';
+import ProductCard from '@/components/product-card/index.vue';
+
+import { LAST_7_DAYS } from '@/utils/date';
+import { changeChartsTheme } from '@/utils/color';
+
+import { PANE_LIST_DATA, PRODUCT_LIST } from '@/service/service-detail';
+import { getFolderLineDataSet, getScatterDataSet } from './index';
+
+echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
+
+export default {
+  name: 'DashboardDetail',
+  components: { Trend, ProductCard, ChevronRightIcon },
+  data() {
+    return {
+      PANE_LIST_DATA,
+      PRODUCT_LIST,
+      dashboardBase: '',
+      lineContainer: '',
+      scatterContainer: '',
+      lineChart: '',
+      scatterChart: '',
+      productList: [
+        {
+          description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
+          index: 1,
+          isSetup: true,
+          name: 'SSL证书',
+          type: 4,
+        },
+      ],
+      LAST_7_DAYS,
+    };
+  },
+  computed: {
+    ...mapState('setting', ['brandTheme', 'mode']),
+  },
+  watch: {
+    brandTheme() {
+      changeChartsTheme([this.lineChart, this.scatterChart]);
+    },
+    mode() {
+      this.renderCharts();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateContainer();
+    });
+    this.renderCharts();
+  },
+  methods: {
+    /** 采购商品满意度选择 */
+    onSatisfyChange(value: string) {
+      const { chartColors } = this.$store.state.setting;
+
+      this.scatterChart.setOption(getScatterDataSet({ dateTime: value, ...chartColors }));
+    },
+    /** 采购商品申请趋势选择 */
+    onMaterialChange(value: string) {
+      const { chartColors } = this.$store.state.setting;
+
+      this.lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors }));
+    },
+    updateContainer() {
+      this.lineChart.resize?.({
+        width: this.lineContainer.clientWidth,
+        height: this.lineContainer.clientHeight,
+      });
+      this.scatterChart.resize?.({
+        width: this.scatterContainer.clientWidth,
+        height: this.scatterContainer.clientHeight,
+      });
+    },
+    renderCharts() {
+      const { chartColors } = this.$store.state.setting;
+
+      if (!this.lineContainer) {
+        this.lineContainer = document.getElementById('lineContainer');
+      }
+      this.lineChart = echarts.init(this.lineContainer);
+      this.lineChart.setOption(getFolderLineDataSet({ ...chartColors }));
+
+      window.addEventListener('resize', this.updateContainer, false);
+
+      if (!this.scatterContainer) {
+        this.scatterContainer = document.getElementById('scatterContainer');
+      }
+      this.scatterChart = echarts.init(this.scatterContainer);
+      this.scatterChart.setOption(getScatterDataSet({ ...chartColors }));
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.row-margin {
+  margin-top: 16px;
+}
+
+// 统一增加8px;
+.dashboard-detail-card {
+  padding: 8px;
+
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  /deep/ .t-card__actions {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dashboard-list-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 170px;
+  padding: 8px;
+
+  /deep/ .t-card__header {
+    padding-bottom: 8px;
+  }
+
+  /deep/ .t-card__body {
+    flex: 1;
+    display: flex;
+    padding-top: 0;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &.dark {
+    &:hover {
+      background: var(--td-gray-color-14);
+      cursor: pointer;
+    }
+  }
+
+  &.light {
+    &:hover {
+      background: var(--td-gray-color-14);
+      cursor: pointer;
+    }
+  }
+
+  &__number {
+    font-size: 36px;
+    line-height: 44px;
+    color: var(--td-text-color-primary);
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    color: var(--td-text-color-placeholder);
+    text-align: left;
+    line-height: 18px;
+
+    &-left {
+      display: flex;
+
+      .icon {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+</style>

package/src/template/Vue2/src/pages/detail/advanced/components/Product.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="operator-block operator-gap">
+    <div class="operator-content">
+      <div class="operator-title">
+        <cart-icon class="operator-title-icon" />
+        <h1>{{ data.name }}</h1>
+        <div class="operator-title-subtitle">
+          {{ data.subtitle }}
+        </div>
+        <div class="operator-title-tags">
+          <t-tag class="operator-title-tag" theme="success" size="small">
+            {{ data.size }}
+          </t-tag>
+          <t-tag class="operator-title-tag" size="small">
+            {{ data.cpu }}
+          </t-tag>
+          <t-tag class="operator-title-tag" size="small">
+            {{ data.memory }}
+          </t-tag>
+        </div>
+      </div>
+      <div class="operator-item">
+        <span class="operator-item-info">{{ data.info }}</span>
+        <chevron-right-icon class="operator-item-icon" size="small" />
+      </div>
+    </div>
+    <div class="operator-footer">
+      <span class="operator-footer-percentage">{{ data.use }} / {{ data.stock }}（台）</span>
+      <t-progress
+        class="operator-progress"
+        theme="line"
+        :percentage="(data.use / data.stock) * 100"
+        :label="false"
+        :color="data.use / data.stock < 0.5 ? '#E24D59' : ''"
+        :track-color="data.use / data.stock < 0.5 ? 'var(--td-error-color-1)' : 'var(--td-brand-color-1)'"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { ChevronRightIcon, CartIcon } from 'tdesign-icons-vue';
+
+export default Vue.extend({
+  components: {
+    ChevronRightIcon,
+    CartIcon,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.operator-gap {
+  margin-left: 20px;
+}
+
+.operator-block {
+  position: relative;
+  background-color: var(--td-bg-color-container);
+  border: 1px solid var(--td-component-border);
+  border-radius: 3px;
+
+  .operator-content {
+    padding: 20px 32px 24px 32px;
+    height: 256px;
+
+    .operator-title-icon {
+      background: var(--td-brand-color-1);
+      color: var(--td-brand-color);
+      font-size: 56px;
+      padding: 14px;
+      border-radius: 100%;
+    }
+
+    .operator-title {
+      margin-bottom: 25px;
+      position: relative;
+
+      h1 {
+        display: inline-block;
+        font-weight: 500;
+        font-size: 24px;
+        color: var(--td-text-color-primary);
+      }
+
+      &-subtitle {
+        display: block;
+        font-weight: 400;
+        font-size: 14px;
+        width: 60%;
+        color: var(--td-text-color-placeholder);
+      }
+
+      &-tag {
+        margin-right: 4px;
+        margin-top: 8px;
+        margin-left: unset;
+        border: unset;
+      }
+
+      &-icon {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+      }
+
+      svg {
+        circle {
+          fill: var(--td-brand-color-2);
+        }
+
+        path {
+          fill: var(--td-brand-color);
+        }
+      }
+    }
+
+    .operator-item {
+      position: relative;
+      padding-top: 8px;
+      padding-bottom: 8px;
+
+      &-info {
+        display: inline-block;
+        width: 60%;
+        text-align: left;
+        font-size: 14px;
+        color: var(--td-text-color-placeholder);
+      }
+
+      &-icon {
+        position: absolute;
+        bottom: 8px;
+        right: 0;
+        color: var(--td-text-color-disabled);
+      }
+    }
+  }
+
+  .operator-footer {
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+    left: 0;
+
+    .t-progress--thin {
+      display: unset;
+    }
+
+    &-percentage {
+      position: absolute;
+      bottom: 15px;
+      right: 32px;
+      color: var(--td-text-color-placeholder);
+    }
+  }
+}
+</style>