congmao-cli 1.0.0

package/src/template/Vue2/src/pages/dashboard/base/components/OutputOverview.vue

@@ -0,0 +1,189 @@
+<template>
+  <t-card :bordered="false">
+    <t-row>
+      <t-col :xs="12" :xl="9">
+        <t-card
+          :bordered="false"
+          title="出入库概览"
+          subtitle="(件)"
+          :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
+        >
+          <template #actions>
+            <t-date-range-picker
+              class="card-date-picker-container"
+              theme="primary"
+              mode="date"
+              :default-value="LAST_7_DAYS"
+              @change="onStokeDataChange"
+            />
+          </template>
+          <div
+            id="stokeContainer"
+            style="width: 100%; height: 351px"
+            ref="stokeContainer"
+            class="dashboard-chart-container"
+          ></div>
+        </t-card>
+      </t-col>
+      <t-col :xs="12" :xl="3">
+        <t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
+          <template #actions>
+            <t-button>导出数据</t-button>
+          </template>
+          <t-row>
+            <t-col :xs="6" :xl="12">
+              <t-card :bordered="false" subtitle="本月出库总计（件）" class="inner-card">
+                <div class="inner-card__content">
+                  <div class="inner-card__content-title">1726</div>
+                  <div class="inner-card__content-footer">
+                    自从上周以来
+                    <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
+                  </div>
+                </div>
+              </t-card>
+            </t-col>
+            <t-col :xs="6" :xl="12">
+              <t-card :bordered="false" subtitle="本月入库总计（件）" class="inner-card">
+                <div class="inner-card__content">
+                  <div class="inner-card__content-title">226</div>
+                  <div class="inner-card__content-footer">
+                    自从上周以来
+                    <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
+                  </div>
+                </div>
+              </t-card>
+            </t-col>
+          </t-row>
+        </t-card>
+      </t-col>
+    </t-row>
+  </t-card>
+</template>
+<script>
+import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
+import { BarChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import * as echarts from 'echarts/core';
+import { mapState } from 'vuex';
+
+import { constructInitDataset } from '../index';
+import { changeChartsTheme } from '@/utils/color';
+import { LAST_7_DAYS } from '@/utils/date';
+import Trend from '@/components/trend/index.vue';
+
+import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from '@/service/service-base';
+
+echarts.use([TooltipComponent, LegendComponent, GridComponent, BarChart, CanvasRenderer]);
+
+export default {
+  name: 'Overview',
+  components: {
+    Trend,
+  },
+  data() {
+    return {
+      panelList: PANE_LIST,
+      buyTendList: BUY_TEND_LIST,
+      saleTendList: SALE_TEND_LIST,
+      saleColumns: SALE_COLUMNS,
+      buyColumns: BUY_COLUMNS,
+      LAST_7_DAYS,
+    };
+  },
+  computed: {
+    ...mapState('setting', ['brandTheme', 'mode']), // 这里需要用到主题色和主题模式的全局配置
+  },
+  watch: {
+    brandTheme() {
+      changeChartsTheme([this.stokeChart]);
+    },
+    mode() {
+      [this.stokeChart].forEach((item) => {
+        item.dispose();
+      });
+      this.renderCharts();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateContainer();
+    });
+
+    window.addEventListener('resize', this.updateContainer, false);
+    this.renderCharts();
+  },
+
+  methods: {
+    /** 出入库概览日期更新 */
+    onStokeDataChange(checkedValues) {
+      const { chartColors } = this.$store.state.setting;
+
+      this.stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors }));
+    },
+    updateContainer() {
+      this.stokeChart.resize({
+        // 根据父容器的大小设置大小
+        width: this.stokeContainer.clientWidth,
+        height: this.stokeContainer.clientHeight,
+      });
+    },
+    renderCharts() {
+      const { chartColors } = this.$store.state.setting;
+      // 出入库概览
+      if (!this.stokeContainer) this.stokeContainer = document.getElementById('stokeContainer');
+
+      this.stokeChart = echarts.init(this.stokeContainer);
+      this.stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-overview-card {
+  /deep/ .t-card__header {
+    padding-bottom: 24px;
+  }
+
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &.overview-panel {
+    border-right: none;
+  }
+
+  &.export-panel {
+    border-left: none;
+  }
+}
+
+.inner-card {
+  padding: 24px 0;
+
+  /deep/ .t-card__header {
+    padding-bottom: 0;
+  }
+
+  &__content {
+    &-title {
+      font-size: 36px;
+      line-height: 44px;
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      line-height: 22px;
+      color: var(--td-text-color-placeholder);
+
+      .trend-tag {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>

package/src/template/Vue2/src/pages/dashboard/base/components/RankList.vue

@@ -0,0 +1,111 @@
+<template>
+  <t-row :gutter="[16, 16]">
+    <t-col :xs="12" :xl="6">
+      <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
+        <template #actions>
+          <t-radio-group default-value="dateVal">
+            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="monthVal">近三个月</t-radio-button>
+          </t-radio-group>
+        </template>
+        <t-table :data="saleTendList" :columns="saleColumns" rowKey="productName">
+          <template #index="{ rowIndex }">
+            <span :class="getRankClass(rowIndex)">
+              {{ rowIndex + 1 }}
+            </span>
+          </template>
+          <span slot="growUp" slot-scope="{ row }">
+            <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
+          </span>
+          <template #operation="slotProps">
+            <a class="link" @click="rehandleClickOp(slotProps)">详情</a>
+          </template>
+        </t-table>
+      </t-card>
+    </t-col>
+    <t-col :xs="12" :xl="6">
+      <t-card title="采购订单排名" class="dashboard-rank-card" :bordered="false">
+        <template #actions>
+          <t-radio-group default-value="dateVal">
+            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="monthVal">近三个月</t-radio-button>
+          </t-radio-group>
+        </template>
+        <t-table :data="buyTendList" :columns="buyColumns" rowKey="productName">
+          <template #index="{ rowIndex }">
+            <span :class="getRankClass(rowIndex)">
+              {{ rowIndex + 1 }}
+            </span>
+          </template>
+          <span slot="growUp" slot-scope="{ row }">
+            <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
+          </span>
+          <template #operation="slotProps">
+            <a class="link" @click="rehandleClickOp(slotProps)">详情</a>
+          </template>
+        </t-table>
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+<script>
+import Trend from '@/components/trend/index.vue';
+import { SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from '@/service/service-base';
+
+export default {
+  name: 'RankList',
+  components: {
+    Trend,
+  },
+  data() {
+    return {
+      buyTendList: BUY_TEND_LIST,
+      saleTendList: SALE_TEND_LIST,
+      saleColumns: SALE_COLUMNS,
+      buyColumns: BUY_COLUMNS,
+    };
+  },
+  methods: {
+    rehandleClickOp(val) {
+      console.log(val);
+    },
+    getRankClass(index) {
+      return ['dashboard-rank__cell', { 'dashboard-rank__cell--top': index < 3 }];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-rank-card {
+  padding: 8px;
+
+  /deep/ .t-card__header {
+    padding-bottom: 24px;
+  }
+
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+.dashboard-rank__cell {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  color: white;
+  font-size: 14px;
+  background-color: var(--td-gray-color-5);
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+
+  &--top {
+    background: var(--td-brand-color);
+  }
+}
+</style>

package/src/template/Vue2/src/pages/dashboard/base/components/TopPanel.vue

@@ -0,0 +1,246 @@
+<template>
+  <t-row :gutter="[16, 16]">
+    <t-col :xs="6" :xl="3" v-for="(item, index) in panelList" :key="item.title">
+      <t-card
+        :bordered="false"
+        :title="item.title"
+        :style="{ height: '168px' }"
+        :class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }"
+      >
+        <div class="dashboard-item-top">
+          <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
+        </div>
+        <div class="dashboard-item-left">
+          <div
+            v-if="index === 0"
+            id="moneyContainer"
+            class="dashboard-chart-container"
+            :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 66}px` }"
+          ></div>
+          <div
+            v-else-if="index === 1"
+            id="refundContainer"
+            class="dashboard-chart-container"
+            :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px` }"
+          ></div>
+          <span v-else-if="index === 2" :style="{ marginTop: `-24px` }">
+            <usergroup-icon />
+          </span>
+          <span v-else :style="{ marginTop: '-24px' }">
+            <file-icon />
+          </span>
+        </div>
+        <template #footer>
+          <div class="dashboard-item-bottom">
+            <div class="dashboard-item-block">
+              自从上周以来
+              <trend
+                class="dashboard-item-trend"
+                :type="item.upTrend ? 'up' : 'down'"
+                :is-reverse-color="index === 0"
+                :describe="item.upTrend || item.downTrend"
+              />
+            </div>
+            <chevron-right-icon />
+          </div>
+        </template>
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+<script>
+import { LineChart, BarChart } from 'echarts/charts';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { UsergroupIcon, FileIcon, ChevronRightIcon } from 'tdesign-icons-vue';
+import { mapState } from 'vuex';
+
+import Trend from '@/components/trend/index.vue';
+
+import { constructInitDashboardDataset } from '../index';
+import { changeChartsTheme } from '@/utils/color';
+import { PANE_LIST } from '@/service/service-base';
+
+echarts.use([LineChart, BarChart, CanvasRenderer]);
+
+export default {
+  name: 'TopPanel',
+  components: {
+    Trend,
+    UsergroupIcon,
+    FileIcon,
+    ChevronRightIcon,
+  },
+  data() {
+    return {
+      resizeTime: 1,
+      panelList: PANE_LIST,
+    };
+  },
+  computed: {
+    ...mapState('setting', ['brandTheme', 'mode']), // 这里需要用到主题色和主题模式的全局配置
+  },
+  watch: {
+    brandTheme() {
+      changeChartsTheme([this.refundChart]);
+    },
+    mode() {
+      [this.moneyCharts, this.refundChart].forEach((item) => {
+        item.dispose();
+      });
+      this.renderCharts();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateContainer();
+    });
+
+    window.addEventListener('resize', this.updateContainer, false);
+    this.renderCharts();
+  },
+
+  methods: {
+    updateContainer() {
+      if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+        this.resizeTime = (document.documentElement.clientWidth / 2080).toFixed(2);
+      } else if (document.documentElement.clientWidth < 1080) {
+        this.resizeTime = (document.documentElement.clientWidth / 1080).toFixed(2);
+      } else {
+        this.resizeTime = 1;
+      }
+      this.moneyCharts.resize({
+        // 根据父容器的大小设置大小
+        width: `${this.resizeTime * 120}px`,
+        height: `${this.resizeTime * 66}px`,
+      });
+
+      this.refundChart.resize({
+        // 根据父容器的大小设置大小
+        width: `${this.resizeTime * 120}px`,
+        height: `${this.resizeTime * 42}px`,
+      });
+    },
+
+    renderCharts() {
+      const { chartColors } = this.$store.state.setting;
+      // 收入汇总图
+      if (!this.moneyContainer) this.moneyContainer = document.getElementById('moneyContainer');
+      this.moneyCharts = echarts.init(this.moneyContainer);
+      this.moneyCharts.setOption(constructInitDashboardDataset('line'));
+
+      // 退款图
+      if (!this.refundContainer) this.refundContainer = document.getElementById('refundContainer');
+      this.refundChart = echarts.init(this.refundContainer);
+      this.refundChart.setOption(constructInitDashboardDataset('bar', chartColors));
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-item {
+  padding: 8px;
+
+  /deep/ .t-card__footer {
+    padding-top: 0;
+  }
+
+  /deep/ .t-card__title {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  /deep/ .t-card__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    position: relative;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &-top {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    > span {
+      display: inline-block;
+      color: var(--td-text-color-primary);
+      font-size: 36px;
+      line-height: 44px;
+    }
+  }
+
+  &-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    > .t-icon {
+      cursor: pointer;
+    }
+  }
+
+  &-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 22px;
+    color: var(--td-text-color-placeholder);
+  }
+
+  &-trend {
+    margin-left: 8px;
+  }
+
+  &-left {
+    position: absolute;
+    top: 0;
+    right: 32px;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      background: var(--td-brand-color-1);
+      border-radius: 50%;
+
+      .t-icon {
+        font-size: 24px;
+        color: var(--td-brand-color);
+      }
+    }
+  }
+
+  // 针对第一个卡片需要反色处理
+  &--main-color {
+    background: var(--td-brand-color);
+    color: var(--td-text-color-primary);
+
+    /deep/ .t-card__title,
+    .dashboard-item-top span,
+    .dashboard-item-bottom {
+      color: var(--td-text-color-anti);
+    }
+
+    .dashboard-item-block {
+      color: var(--td-text-color-anti);
+      opacity: 0.6;
+    }
+
+    .dashboard-item-bottom {
+      color: var(--td-text-color-anti);
+    }
+  }
+}
+</style>