订单

pages/sys/workbench/earlyWarning/warnStatistics.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class="page">
+
+    <!-- 时间筛选 -->
+    <view class="filter-bar">
+      <u-button
+        v-for="(item, index) in timeTabs"
+        :key="index"
+        :type="currentTab === index ? 'primary' : 'default'"
+        size="small"
+        @click="changeTab(index)"
+        class="filter-btn"
+      >
+        {{ item }}
+      </u-button>
+    </view>
+
+    <!-- 饼图 -->
+    <view class="chart-card" ref="chartContainer">
+      <view class="chart-title">预警状态统计</view>
+
+      <!-- 延迟渲染图表组件 -->
+      <qiun-data-charts
+        v-if="chartReady"
+        type="pie"
+        :opts="opts"
+        :chartData="chartData"
+        :animation="true"
+        style="width: 100%; height: 300px;"
+      />
+
+    </view>
+
+  </view>
+</template>
+
+<script>
+export default {
+  // 页面级注册组件
+  components: {
+    'qiun-data-charts': () => import('@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue')
+  },
+  data() {
+    return {
+      timeTabs: ['本周', '本月', '本季', '本年'],
+      currentTab: 0,
+      legendData: [
+        { name: '待处理', color: 'red', value: 10 },
+        { name: '处理中', color: '#2f91ff', value: 20 },
+        { name: '已完成', color: '#00cc66', value: 15 }
+      ],
+      chartData: {}, // 图表数据
+      opts: {},      // 图表配置
+      chartReady: false // 控制组件渲染
+    };
+  },
+  onReady() {
+    // 延迟 50ms 确保 DOM 渲染完成再显示图表
+    setTimeout(() => {
+      this.chartReady = true;
+      this.updateChartData();
+    }, 50);
+  },
+  methods: {
+    changeTab(index) {
+      this.currentTab = index;
+      this.updateChartData();
+    },
+    updateChartData() {
+      // 模拟不同时间 tab 数据变化
+      let newData;
+      switch (this.currentTab) {
+        case 0: // 本周
+          newData = [10, 20, 15];
+          break;
+        case 1: // 本月
+          newData = [30, 25, 20];
+          break;
+        case 2: // 本季
+          newData = [50, 30, 20];
+          break;
+        case 3: // 本年
+          newData = [100, 80, 60];
+          break;
+      }
+
+      // 更新 legendData 的 value
+      this.legendData.forEach((item, i) => {
+        item.value = newData[i];
+      });
+
+      // chartData.series.data 必须是对象数组
+      this.chartData = {
+        categories: this.legendData.map(item => item.name),
+        series: [
+          {
+            name: '预警状态',
+            data: this.legendData.map(item => ({
+              value: item.value,
+              name: item.name
+            }))
+          }
+        ]
+      };
+
+      // 图表配置
+      this.opts = {
+        color: this.legendData.map(item => item.color),
+        dataLabel: true,
+        animation: true,
+        padding: [5, 5, 5, 5],
+        rotate: false
+      };
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.filter-bar {
+  display: flex;
+  justify-content: space-around;
+  padding: 30rpx 20rpx 0rpx 20rpx;
+  background-color: #fff;
+}
+
+.filter-btn {
+  flex: 1;
+  margin: 0 5rpx;
+}
+
+.chart-card {
+  background-color: #fff;
+  margin: 20rpx;
+  border-radius: 10rpx;
+  padding: 20rpx;
+}
+
+.chart-title {
+  font-size: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+</style>