From 15c90ad541d895a4e0ceab0dd430260535479341 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期四, 07 五月 2026 10:20:44 +0800
Subject: [PATCH] 测试完成
---
src/views/sfstatistics/propaganda/index.vue | 905 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 900 insertions(+), 5 deletions(-)
diff --git a/src/views/sfstatistics/propaganda/index.vue b/src/views/sfstatistics/propaganda/index.vue
index c957b81..781ac98 100644
--- a/src/views/sfstatistics/propaganda/index.vue
+++ b/src/views/sfstatistics/propaganda/index.vue
@@ -1,17 +1,912 @@
<template>
- <div>瀹ｆ暀缁熻</div>
+ <div class="education-statistics">
+ <!-- 鎼滅储鍖哄煙 -->
+ <div class="search-container">
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ size="small"
+ :inline="true"
+ label-width="100px"
+ >
+ <el-form-item label="缁熻缁村害" prop="groupType">
+ <el-select
+ v-model="queryParams.groupType"
+ placeholder="璇烽�夋嫨缁熻缁村害"
+ @change="handleGroupTypeChange"
+ style="width: 180px"
+ >
+ <el-option label="鎸夌瀹ょ粺璁�" value="1"></el-option>
+ <el-option label="鎸夌梾鍖虹粺璁�" value="2"></el-option>
+ </el-select>
+ <el-select
+ style="margin-left: 10px"
+ v-if="queryParams.groupType == '2'"
+ v-model="queryParams.hospitaldistrictcodes"
+ size="medium"
+ multiple
+ filterable
+ placeholder="璇烽�夋嫨鐥呭尯"
+ >
+ <el-option
+ v-for="item in flatArrayhospit"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select
+ v-else-if="queryParams.groupType == '1'"
+ v-model="queryParams.deptcodes"
+ size="medium"
+ multiple
+ filterable
+ placeholder="璇烽�夋嫨绉戝"
+ >
+ <el-option
+ v-for="item in flatArraydept"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="灏辫瘖绫诲瀷" prop="hospType">
+ <el-select
+ v-model="queryParams.hospType"
+ placeholder="璇烽�夋嫨灏辫瘖绫诲瀷"
+ clearable
+ style="width: 150px"
+ >
+ <el-option label="闂ㄨ瘖" value="1"></el-option>
+ <el-option label="鍑洪櫌" value="2"></el-option>
+ <el-option label="涓撶梾" value="3"></el-option>
+ <el-option label="鍏ラ櫌/澶栭儴瀵煎叆" value="4"></el-option>
+ <el-option label="浣撴" value="5"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="鍏ラ櫌鏃堕棿" prop="dateRange">
+ <el-date-picker
+ v-model="queryParams.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="yyyy-MM-dd"
+ style="width: 280px"
+ :picker-options="datePickerOptions"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item label="瀹ｆ暀鍙戦�佹椂闂�" prop="visittime">
+ <el-date-picker
+ v-model="queryParams.visittime"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="yyyy-MM-dd"
+ style="width: 180px"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button
+ type="primary"
+ icon="el-icon-search"
+ size="medium"
+ @click="handleQuery"
+ :loading="loading"
+ >鎼滅储</el-button
+ >
+ <el-button icon="el-icon-refresh" size="medium" @click="resetQuery"
+ >閲嶇疆</el-button
+ >
+ <el-button
+ type="warning"
+ plain
+ icon="el-icon-download"
+ size="medium"
+ @click="handleExport"
+ v-hasPermi="['system:statistics:export']"
+ >瀵煎嚭</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <!-- 缁熻鏁版嵁姒傝 -->
+ <div class="summary-cards" v-if="statisticsData.total > 0">
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <div class="summary-card">
+ <div class="card-title">鍙戦�佹�婚噺</div>
+ <div class="card-value">{{ totalCount }}</div>
+ <div class="card-desc">鎬诲鏁欏彂閫佹鏁�</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="summary-card">
+ <div class="card-title">鍙戦�佹垚鍔熼噺</div>
+ <div class="card-value">{{ sendSuccessCount }}</div>
+ <div class="card-desc">宸叉垚鍔熷彂閫佺殑瀹ｆ暀</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="summary-card">
+ <div class="card-title">宸茶閲�</div>
+ <div class="card-value">{{ readCount }}</div>
+ <div class="card-desc">鎮ｈ�呭凡闃呰鐨勫鏁�</div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="summary-card">
+ <div class="card-title">骞冲潎鍙戦�佹垚鍔熺巼</div>
+ <div class="card-value">{{ avgSendSuccessRate }}%</div>
+ <div class="card-desc">鏁翠綋鍙戦�佹垚鍔熸瘮渚�</div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+
+ <!-- 鏁版嵁琛ㄦ牸 -->
+ <div class="table-container">
+ <el-table
+ v-loading="loading"
+ :data="statisticsData.list"
+ :border="true"
+ style="width: 100%"
+ :default-sort="{ prop: 'totalCount', order: 'descending' }"
+ @sort-change="handleSortChange"
+ >
+ <el-table-column prop="groupName" label="鍒嗙粍鍚嶇О" align="center" fixed>
+ <!-- <template slot-scope="scope">
+ <span class="group-name" @click="handleGroupDetail(scope.row)">
+ {{ scope.row.groupName }}
+ </span>
+ </template> -->
+ </el-table-column>
+
+ <el-table-column
+ prop="groupCode"
+ label="鍒嗙粍缂栫爜"
+ align="center"
+ ></el-table-column>
+
+ <el-table-column
+ prop="totalCount"
+ label="瀹ｆ暀鍙戦�佹�婚噺"
+ align="center"
+ sortable="custom"
+ >
+ <template slot-scope="scope">
+ <span class="count-highlight">{{ scope.row.totalCount }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="sendSuccessCount"
+ label="鍙戦�佹垚鍔熼噺"
+ align="center"
+ sortable="custom"
+ >
+ <template slot-scope="scope">
+ <span class="success-count">{{ scope.row.sendSuccessCount }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="readCount"
+ label="宸茶閲�"
+ align="center"
+ sortable="custom"
+ >
+ <template slot-scope="scope">
+ <span class="read-count">{{ scope.row.readCount }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="sendSuccessRate"
+ label="鍙戦�佹垚鍔熺巼"
+ align="center"
+ width="200"
+ sortable="custom"
+ >
+ <template slot-scope="scope">
+ <el-progress
+ :percentage="scope.row.sendSuccessRate * 100"
+ :stroke-width="8"
+ :show-text="false"
+ style="width: 80px; margin: 0 auto"
+ :color="getRateColor(scope.row.sendSuccessRate)"
+ />
+ <span class="rate-text"
+ >{{ (scope.row.sendSuccessRate * 100).toFixed(1) }}%</span
+ >
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="readRate"
+ label="宸茶鐜�"
+ align="center"
+ width="200"
+ sortable="custom"
+ >
+ <template slot-scope="scope">
+ <el-progress
+ :percentage="scope.row.readRate * 100"
+ :stroke-width="8"
+ :show-text="false"
+ style="width: 80px; margin: 0 auto"
+ :color="getRateColor(scope.row.readRate)"
+ />
+ <span class="rate-text"
+ >{{ (scope.row.readRate * 100).toFixed(1) }}%</span
+ >
+ </template>
+ </el-table-column>
+
+ <!-- <el-table-column label="鎿嶄綔" align="center" width="200" fixed="right">
+ <template slot-scope="scope">
+ <el-button
+ type="text"
+ size="small"
+ @click="handleDetail(scope.row)"
+ icon="el-icon-document"
+ v-hasPermi="['system:statistics:detail']"
+ >璇︾粏鏁版嵁</el-button
+ >
+ <el-button
+ type="text"
+ size="small"
+ @click="handleExportGroup(scope.row)"
+ icon="el-icon-download"
+ v-hasPermi="['system:statistics:export']"
+ >瀵煎嚭</el-button
+ >
+ </template>
+ </el-table-column> -->
+ </el-table>
+
+ <!-- 鍒嗛〉 -->
+ <pagination
+ v-show="statisticsData.total > 0"
+ :total="statisticsData.total"
+ :page.sync="queryParams.pageNum"
+ :limit.sync="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </div>
+
+ <!-- 鍒嗙粍璇︽儏寮圭獥 -->
+ <el-dialog
+ :title="detailTitle"
+ :visible.sync="detailVisible"
+ width="80%"
+ :before-close="handleCloseDetail"
+ >
+ <div v-loading="detailLoading">
+ <el-row :gutter="20" class="detail-header">
+ <el-col :span="6">
+ <div class="detail-item">
+ <label>鍒嗙粍鍚嶇О锛�</label>
+ <span>{{ currentGroup.groupName }}</span>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="detail-item">
+ <label>鍒嗙粍缂栫爜锛�</label>
+ <span>{{ currentGroup.groupCode }}</span>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="detail-item">
+ <label>鍙戦�佹垚鍔熺巼锛�</label>
+ <span class="rate-highlight"
+ >{{ (currentGroup.sendSuccessRate * 100).toFixed(1) }}%</span
+ >
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="detail-item">
+ <label>宸茶鐜囷細</label>
+ <span class="rate-highlight"
+ >{{ (currentGroup.readRate * 100).toFixed(1) }}%</span
+ >
+ </div>
+ </el-col>
+ </el-row>
+
+ <el-tabs v-model="detailActiveTab" class="detail-tabs">
+ <el-tab-pane label="瓒嬪娍鍒嗘瀽" name="trend">
+ <!-- 杩欓噷鍙互鏀剧疆鍥捐〃缁勪欢 -->
+ <div class="chart-placeholder">
+ 瓒嬪娍鍥捐〃锛堝彲鏍规嵁闇�姹傛帴鍏Charts锛�
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鏄庣粏鏁版嵁" name="detail">
+ <el-table
+ :data="detailList"
+ border
+ style="width: 100%; margin-top: 20px"
+ >
+ <el-table-column
+ prop="patientName"
+ label="鎮ｈ�呭鍚�"
+ align="center"
+ width="120"
+ ></el-table-column>
+ <el-table-column
+ prop="patientNo"
+ label="鎮ｈ�呯紪鍙�"
+ align="center"
+ width="120"
+ ></el-table-column>
+ <el-table-column
+ prop="sendTime"
+ label="鍙戦�佹椂闂�"
+ align="center"
+ width="180"
+ ></el-table-column>
+ <el-table-column
+ prop="readTime"
+ label="闃呰鏃堕棿"
+ align="center"
+ width="180"
+ ></el-table-column>
+ <el-table-column
+ prop="educationTitle"
+ label="瀹ｆ暀鏍囬"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ prop="status"
+ label="鐘舵��"
+ align="center"
+ width="100"
+ >
+ <template slot-scope="scope">
+ <el-tag
+ :type="
+ scope.row.status === '宸茶'
+ ? 'success'
+ : scope.row.status === '鍙戦�佹垚鍔�'
+ ? 'info'
+ : 'danger'
+ "
+ size="small"
+ >
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="detailVisible = false">鍏� 闂�</el-button>
+ </span>
+ </el-dialog>
+ </div>
</template>
<script>
+import { gethelibraryCount } from "@/api/AiCentre/index";
+
export default {
+ name: "EducationStatistics",
data() {
- return {};
+ return {
+ // 鏌ヨ鍙傛暟
+ queryParams: {
+ pageNum: 1,
+ pageSize: 1000,
+ groupType: "1", // 1-绉戝锛�2-鐥呭尯
+ deptcodes: ['all'], // 绉戝code鏁扮粍
+ hospitaldistrictcodes: [], // 鐥呭尯code鏁扮粍
+ hospType: undefined, // 灏辫瘖绫诲瀷
+ starttime: undefined, // 鍏ラ櫌寮�濮嬫椂闂�
+ endtime: undefined, // 鍏ラ櫌缁撴潫鏃堕棿
+ visittime: undefined, // 瀹ｆ暀鍙戦�佹椂闂�
+ dateRange: [], // 鍏ラ櫌鏃堕棿鑼冨洿
+ orderBy: "totalCount", // 鎺掑簭瀛楁
+ order: "descending", // 鎺掑簭鏂瑰紡
+ },
+
+ // 缁熻鏁版嵁
+ statisticsData: {
+ total: 0,
+ list: [],
+ },
+
+ // 涓嬫媺閫夐」
+ flatArraydept: [],
+
+ flatArrayhospit: [],
+
+ // 鍔犺浇鐘舵��
+ loading: false,
+ detailLoading: false,
+
+ // 璇︽儏寮圭獥
+ detailVisible: false,
+ detailTitle: "",
+ detailActiveTab: "trend",
+ currentGroup: {},
+ detailList: [],
+
+ // 鏃ユ湡閫夋嫨鍣ㄩ厤缃�
+ datePickerOptions: {
+ disabledDate(time) {
+ return time.getTime() > Date.now();
+ },
+ shortcuts: [
+ {
+ text: "鏈�杩戜竴鍛�",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "鏈�杩戜竴涓湀",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "鏈�杩戜笁涓湀",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ ],
+ },
+ };
},
- created() {},
+ computed: {
+ // 璁＄畻鎬诲彂閫侀噺
+ totalCount() {
+ return this.statisticsData.list.reduce(
+ (sum, item) => sum + item.totalCount,
+ 0
+ );
+ },
- methods: {},
+ // 璁＄畻鎬诲彂閫佹垚鍔熼噺
+ sendSuccessCount() {
+ return this.statisticsData.list.reduce(
+ (sum, item) => sum + item.sendSuccessCount,
+ 0
+ );
+ },
+
+ // 璁＄畻鎬诲凡璇婚噺
+ readCount() {
+ return this.statisticsData.list.reduce(
+ (sum, item) => sum + item.readCount,
+ 0
+ );
+ },
+
+ // 璁＄畻骞冲潎鍙戦�佹垚鍔熺巼
+ avgSendSuccessRate() {
+ if (this.statisticsData.list.length === 0) return 0;
+ const totalRate = this.statisticsData.list.reduce(
+ (sum, item) => sum + item.sendSuccessRate,
+ 0
+ );
+ return ((totalRate / this.statisticsData.list.length) * 100).toFixed(1);
+ },
+ },
+
+ created() {
+ this.flatArrayhospit = this.$store.getters.belongWards.map((ward) => {
+ return {
+ label: ward.districtName,
+ value: ward.districtCode,
+ };
+ });
+ this.flatArraydept = this.$store.getters.belongDepts.map((dept) => {
+ return {
+ label: dept.deptName,
+ value: dept.deptCode,
+ };
+ });
+ console.log(this.flatArrayhospit,'this.flatArrayhospit');
+
+ this.flatArraydept.push({ label: "鍏ㄩ儴", value: "all" });
+ this.flatArrayhospit.push({ label: "鍏ㄩ儴", value: "all" });
+ this.getList();
+ },
+
+ methods: {
+ // 鑾峰彇缁熻鏁版嵁鍒楄〃
+ async getList() {
+ this.loading = true;
+ try {
+ console.log(this.queryParams.hospitaldistrictcodes);
+
+ // 鏋勫缓璇锋眰鍙傛暟
+ const params = {
+ pageNum: this.queryParams.pageNum,
+ pageSize: this.queryParams.pageSize,
+ hospitaldistrictcodes:
+ this.queryParams.hospitaldistrictcodes.includes("all")
+ ? this.getAllWardCodes()
+ : this.queryParams.hospitaldistrictcodes,
+ deptcodes: this.queryParams.deptcodes.includes("all")
+ ? this.getAllDeptCodes()
+ : this.queryParams.deptcodes,
+ };
+
+ // 鏍规嵁缁熻缁村害璁剧疆鍙傛暟
+ if (this.queryParams.groupType == "1") {
+ params.hospitaldistrictcodes = [];
+ } else if (this.queryParams.groupType == "2") {
+ params.deptcodes = [];
+ }
+
+ // 璁剧疆鏃堕棿鍙傛暟
+ if (
+ this.queryParams.dateRange &&
+ this.queryParams.dateRange.length === 2
+ ) {
+ params.starttime = this.queryParams.dateRange[0];
+ params.endtime = this.queryParams.dateRange[1];
+ }
+
+ // 璁剧疆鍏朵粬鍙傛暟
+ if (this.queryParams.hospType) {
+ params.hospType = this.queryParams.hospType;
+ }
+ if (this.queryParams.visittime) {
+ params.visittime = this.queryParams.visittime;
+ }
+
+ // 璋冪敤鎺ュ彛
+ const response = await gethelibraryCount(params);
+ this.statisticsData = {
+ total: response.total || 0,
+ list: response.list || [],
+ };
+ } catch (error) {
+ console.error("鑾峰彇缁熻鏁版嵁澶辫触:", error);
+ this.$message.error("鑾峰彇缁熻鏁版嵁澶辫触");
+ this.statisticsData = { total: 0, list: [] };
+ } finally {
+ this.loading = false;
+ }
+ },
+ getAllWardCodes() {
+ return this.flatArrayhospit
+ .filter((item) => item.value !== "all")
+ .map((item) => item.value);
+ },
+
+ getAllDeptCodes() {
+ return this.flatArraydept
+ .filter((item) => item.value !== "all")
+ .map((item) => item.value);
+ },
+ // 缁熻缁村害鍙樻洿
+ handleGroupTypeChange(value) {
+ // 鍒囨崲缁村害鏃舵竻绌哄搴旂殑閫夋嫨
+ if (value === "dept") {
+ this.queryParams.hospitaldistrictcodes = [];
+ } else if (value === "ward") {
+ this.queryParams.deptcodes = [];
+ }
+ },
+
+ // 澶勭悊鎼滅储
+ handleQuery() {
+ this.queryParams.pageNum = 1;
+ this.getList();
+ },
+
+ // 閲嶇疆鎼滅储鏉′欢
+ resetQuery() {
+ this.queryParams = {
+ pageNum: 1,
+ pageSize: 10,
+ groupType: "dept",
+ deptcodes: [],
+ hospitaldistrictcodes: [],
+ hospType: undefined,
+ starttime: undefined,
+ endtime: undefined,
+ visittime: undefined,
+ dateRange: [],
+ orderBy: "totalCount",
+ order: "descending",
+ };
+ this.getList();
+ },
+
+ // 琛ㄦ牸鎺掑簭
+ handleSortChange({ column, prop, order }) {
+ if (prop) {
+ this.queryParams.orderBy = prop;
+ this.queryParams.order = order;
+ this.getList();
+ }
+ },
+
+ // 鏍规嵁鎴愬姛鐜囪幏鍙栬繘搴︽潯棰滆壊
+ getRateColor(rate) {
+ const percentage = rate * 100;
+ if (percentage >= 90) return "#67C23A";
+ if (percentage >= 80) return "#E6A23C";
+ if (percentage >= 60) return "#409EFF";
+ return "#F56C6C";
+ },
+
+ // 鏌ョ湅鍒嗙粍璇︽儏
+ handleGroupDetail(row) {
+ this.currentGroup = row;
+ this.detailTitle = `${row.groupName} - 瀹ｆ暀缁熻璇︽儏`;
+ this.detailActiveTab = "trend";
+ this.detailVisible = true;
+ this.loadDetailData();
+ },
+
+ // 鍔犺浇璇︽儏鏁版嵁
+ async loadDetailData() {
+ this.detailLoading = true;
+ try {
+ // 杩欓噷搴旇璋冪敤鑾峰彇璇︽儏鐨勬帴鍙�
+ // 妯℃嫙鏁版嵁
+ setTimeout(() => {
+ this.detailList = [
+ {
+ patientName: "寮犱笁",
+ patientNo: "P202312001",
+ sendTime: "2023-12-01 10:30:00",
+ readTime: "2023-12-01 14:20:00",
+ educationTitle: "楠ㄧ鏈悗搴峰鎸囧",
+ status: "宸茶",
+ },
+ {
+ patientName: "鏉庡洓",
+ patientNo: "P202312002",
+ sendTime: "2023-12-01 11:15:00",
+ readTime: "",
+ educationTitle: "蹇冭绠＄柧鐥呴闃�",
+ status: "鍙戦�佹垚鍔�",
+ },
+ {
+ patientName: "鐜嬩簲",
+ patientNo: "P202312003",
+ sendTime: "2023-12-02 09:45:00",
+ readTime: "2023-12-02 16:10:00",
+ educationTitle: "绯栧翱鐥呴ギ椋熸寚瀵�",
+ status: "宸茶",
+ },
+ ];
+ this.detailLoading = false;
+ }, 500);
+ } catch (error) {
+ console.error("鍔犺浇璇︽儏鏁版嵁澶辫触:", error);
+ this.$message.error("鍔犺浇璇︽儏鏁版嵁澶辫触");
+ this.detailLoading = false;
+ }
+ },
+
+ // 鏌ョ湅璇︽儏
+ handleDetail(row) {
+ this.currentGroup = row;
+ this.detailTitle = `${row.groupName} - 鏄庣粏鏁版嵁`;
+ this.detailActiveTab = "detail";
+ this.detailVisible = true;
+ this.loadDetailData();
+ },
+
+ // 瀵煎嚭褰撳墠鍒嗙粍鏁版嵁
+ handleExportGroup(row) {
+ this.$confirm(`纭畾瑕佸鍑� "${row.groupName}" 鐨勭粺璁℃暟鎹悧?`, "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ // 杩欓噷璋冪敤瀵煎嚭鎺ュ彛
+ this.$message.success("瀵煎嚭浠诲姟宸插紑濮嬶紝璇风◢鍚庡湪涓嬭浇涓績鏌ョ湅");
+ })
+ .catch(() => {});
+ },
+
+ // 瀵煎嚭鍏ㄩ儴鏁版嵁
+ handleExport() {
+ this.$confirm("纭畾瑕佸鍑哄叏閮ㄧ粺璁℃暟鎹悧?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ // 鏋勫缓瀵煎嚭鍙傛暟
+ const exportParams = { ...this.queryParams };
+ delete exportParams.pageNum;
+ delete exportParams.pageSize;
+
+ // 杩欓噷璋冪敤瀵煎嚭鎺ュ彛
+ this.$message.success("瀵煎嚭浠诲姟宸插紑濮嬶紝璇风◢鍚庡湪涓嬭浇涓績鏌ョ湅");
+ })
+ .catch(() => {});
+ },
+
+ // 鍏抽棴璇︽儏寮圭獥
+ handleCloseDetail(done) {
+ this.$confirm("纭鍏抽棴锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ done();
+ })
+ .catch(() => {});
+ },
+ },
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.education-statistics {
+ padding: 20px;
+ background: #fff;
+ min-height: calc(100vh - 84px);
+
+ .search-container {
+ background: #f8f9fa;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ border: 1px solid #ebeef5;
+ }
+
+ .summary-cards {
+ margin-bottom: 20px;
+
+ .summary-card {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ text-align: center;
+ border: 1px solid #ebeef5;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
+ }
+
+ .card-title {
+ font-size: 14px;
+ color: #909399;
+ margin-bottom: 10px;
+ }
+
+ .card-value {
+ font-size: 28px;
+ font-weight: 600;
+ color: #409eff;
+ margin-bottom: 5px;
+ }
+
+ .card-desc {
+ font-size: 12px;
+ color: #c0c4cc;
+ }
+ }
+ }
+
+ .table-container {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ border: 1px solid #ebeef5;
+
+ .group-name {
+ color: #409eff;
+ cursor: pointer;
+ text-decoration: underline;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #66b1ff;
+ }
+ }
+
+ .count-highlight {
+ font-weight: 600;
+ color: #606266;
+ }
+
+ .success-count {
+ color: #67c23a;
+ font-weight: 600;
+ }
+
+ .read-count {
+ color: #e6a23c;
+ font-weight: 600;
+ }
+
+ .rate-text {
+ display: block;
+ margin-top: 5px;
+ font-size: 12px;
+ color: #606266;
+ }
+ }
+
+ .detail-header {
+ margin-bottom: 20px;
+ padding: 20px;
+ background: #f8f9fa;
+ border-radius: 8px;
+
+ .detail-item {
+ label {
+ color: #909399;
+ font-size: 14px;
+ }
+
+ span {
+ font-size: 16px;
+ font-weight: 500;
+ color: #303133;
+ }
+
+ .rate-highlight {
+ color: #409eff;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .detail-tabs {
+ margin-top: 20px;
+ }
+
+ .chart-placeholder {
+ height: 300px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f8f9fa;
+ border-radius: 8px;
+ color: #909399;
+ border: 1px dashed #dcdfe6;
+ }
+}
+
+// 鍝嶅簲寮忚皟鏁�
+@media (max-width: 1200px) {
+ .education-statistics {
+ padding: 10px;
+ }
+
+ .summary-cards {
+ .el-col {
+ margin-bottom: 10px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3