From 0838873683296b6cd008c1e974b7635bd14cfe7b Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 21 一月 2026 13:55:24 +0800
Subject: [PATCH] 报表管理遗漏修改
---
src/views/reportAnalysis/reportManagement/index.vue | 487 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 321 insertions(+), 166 deletions(-)
diff --git a/src/views/reportAnalysis/reportManagement/index.vue b/src/views/reportAnalysis/reportManagement/index.vue
index 4c73f7f..8cd237f 100644
--- a/src/views/reportAnalysis/reportManagement/index.vue
+++ b/src/views/reportAnalysis/reportManagement/index.vue
@@ -28,11 +28,12 @@
<div class="typeNum-right">
<div class="typeNum-right-top">
<div class="typeNum-right-top-name">鎬绘暟閲�</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'totalCount') }} <span class="unit">涓�</span></div>
</div>
<div class="typeNum-right-bottom">
<div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'completedCount') }} <span class="unit">涓�</span>
+ </div>
</div>
</div>
</div>
@@ -51,11 +52,12 @@
<div class="typeNum-right">
<div class="typeNum-right-top">
<div class="typeNum-right-top-name">鎬绘暟閲�</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'totalCount') }} <span class="unit">涓�</span></div>
</div>
<div class="typeNum-right-bottom">
<div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'completedCount') }} <span class="unit">涓�</span>
+ </div>
</div>
</div>
</div>
@@ -74,11 +76,12 @@
<div class="typeNum-right">
<div class="typeNum-right-top">
<div class="typeNum-right-top-name">鎬绘暟閲�</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'totalCount') }} <span class="unit">涓�</span></div>
</div>
<div class="typeNum-right-bottom">
<div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'completedCount') }} <span class="unit">涓�</span>
+ </div>
</div>
</div>
</div>
@@ -108,7 +111,7 @@
<div>
<div class="quality-item-label blue-label">瀹屾垚鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(0, 'completionRate') }}</div>
</div>
<div class="quality-item-chart"
ref="materialCompletionChart"></div>
@@ -117,7 +120,7 @@
<div>
<div class="quality-item-label green-label">鍚堟牸鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(0, 'passRate') }}</div>
</div>
<div class="quality-item-chart"
ref="materialQualityChart"></div>
@@ -136,7 +139,7 @@
<div>
<div class="quality-item-label blue-label">瀹屾垚鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(1, 'completionRate') }}</div>
</div>
<div class="quality-item-chart"
ref="semiCompletionChart"></div>
@@ -145,7 +148,7 @@
<div>
<div class="quality-item-label green-label">鍚堟牸鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(1, 'passRate') }}</div>
</div>
<div class="quality-item-chart"
ref="semiQualityChart"></div>
@@ -164,7 +167,7 @@
<div>
<div class="quality-item-label blue-label">瀹屾垚鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(2, 'completionRate') }}</div>
</div>
<div class="quality-item-chart"
ref="finalCompletionChart"></div>
@@ -173,7 +176,7 @@
<div>
<div class="quality-item-label green-label">鍚堟牸鐜�</div>
<div class="quality-item-tip">鍗犳瘮</div>
- <div class="quality-item-value">80%</div>
+ <div class="quality-item-value">{{ getPassRateStatValue(2, 'passRate') }}</div>
</div>
<div class="quality-item-chart"
ref="finalQualityChart"></div>
@@ -209,16 +212,16 @@
</div>
<div class="container-line-right-bottom">
<div class="inspection-chart-box">
- <div class="chart-box-title">鍘熸潗鏂欐娊妫�鏁�</div>
- <div class="chart-box-num">600</div>
+ <div class="chart-box-title">鍘熸潗鏂欐�绘暟</div>
+ <div class="chart-box-num">{{ getYearlyStatValue(0, 'totalCount') }}</div>
</div>
<div class="inspection-chart-box">
- <div class="chart-box-title">鍗婃垚鍝佹娊妫�鏁�</div>
- <div class="chart-box-num">200</div>
+ <div class="chart-box-title">鍗婃垚鍝佹�绘暟</div>
+ <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div>
</div>
<div class="inspection-chart-box">
- <div class="chart-box-title">鎴愬搧鎶芥鏁�</div>
- <div class="chart-box-num">200</div>
+ <div class="chart-box-title">鎴愬搧鎬绘暟</div>
+ <div class="chart-box-num">{{ getYearlyStatValue(2, 'totalCount') }}</div>
</div>
</div>
</div>
@@ -271,40 +274,14 @@
<div class="container-line2-left">
<div class="info-box">
<div class="info-box-header">椤圭洰鍒嗗竷</div>
- <div class="info-line">
+ <div class="info-line"
+ v-for="(item, index) in topParametersData.list"
+ :key="index">
<div class="info-icon"
- style="background-color: #165DFF"></div>
- <div class="info-line-title">鐗╃悊鎬ц兘</div>
- <div class="info-line-value1">30%</div>
- <div class="info-line-value2">300</div>
- </div>
- <div class="info-line">
- <div class="info-icon"
- style="background-color: #14C9C9;"></div>
- <div class="info-line-title">鐗╃悊鎬ц兘</div>
- <div class="info-line-value1">30%</div>
- <div class="info-line-value2">300</div>
- </div>
- <div class="info-line">
- <div class="info-icon"
- style="background-color: #F7BA1E;"></div>
- <div class="info-line-title">鐗╃悊鎬ц兘</div>
- <div class="info-line-value1">30%</div>
- <div class="info-line-value2">300</div>
- </div>
- <div class="info-line">
- <div class="info-icon"
- style="background-color: #722ED1;"></div>
- <div class="info-line-title">鐗╃悊鎬ц兘</div>
- <div class="info-line-value1">30%</div>
- <div class="info-line-value2">300</div>
- </div>
- <div class="info-line">
- <div class="info-icon"
- style="background-color: #3491FA;"></div>
- <div class="info-line-title">鐗╃悊鎬ц兘</div>
- <div class="info-line-value1">30%</div>
- <div class="info-line-value2">300</div>
+ :style="{ backgroundColor: getParameterColor(index) }"></div>
+ <div class="info-line-title">{{ item.name }}</div>
+ <div class="info-line-value1">{{ item.percentage }}%</div>
+ <div class="info-line-value2">{{ item.count }}</div>
</div>
</div>
</div>
@@ -333,9 +310,16 @@
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
- import { ElMessage, ElMessageBox } from "element-plus";
+ import { ElMessage } from "element-plus";
import * as echarts from "echarts";
- import { Box, Tools, Document, ShoppingCart } from "@element-plus/icons-vue";
+ import {
+ getInspectStatistics,
+ getPassRateStatistics,
+ getMonthlyPassRateStatistics,
+ getYearlyPassRateStatistics,
+ getMonthlyCompletionDetails,
+ getTopParameters,
+ } from "@/api/reportAnalysis/qualityReport";
// 鍝嶅簲寮忔暟鎹�
const filterForm = reactive({
@@ -343,12 +327,132 @@
reportType: "sample",
});
- const statistics = reactive({
- totalSamples: 1250,
- activeEquipment: 45,
- completedInspections: 890,
- totalUsage: 2340,
- });
+ const inspectStatisticsData = ref([]);
+ const passRateStatisticsData = ref([]);
+ const monthlyPassRateData = ref([]);
+ const yearlyPassRateData = ref([]);
+ const monthlyCompletionDetailsData = ref([]);
+ const topParametersData = ref({ totalCount: 0, list: [] });
+ const activeTab = ref("raw");
+
+ const getParameterColor = index => {
+ const colors = [
+ "#165DFF",
+ "#14C9C9",
+ "#F7BA1E",
+ "#722ED1",
+ "#3491FA",
+ "#FF7D00",
+ "#F53F3F",
+ ];
+ return colors[index % colors.length];
+ };
+
+ const getYearlyStatValue = (type, field) => {
+ const stat = yearlyPassRateData.value.find(item => item.inspectType === type);
+ return stat ? stat[field] : 0;
+ };
+
+ const getInspectStatValue = (type, field) => {
+ const stat = inspectStatisticsData.value.find(
+ item => item.inspectType === type
+ );
+ return stat ? stat[field] : 0;
+ };
+
+ const getPassRateStatValue = (type, field) => {
+ const stat = passRateStatisticsData.value.find(
+ item => item.inspectType === type
+ );
+ if (stat) {
+ if (field === "completionRate" || field === "passRate") {
+ return stat[field] ? Number(stat[field]).toFixed(0) + "%" : "0%";
+ }
+ return stat[field];
+ }
+ return field === "completionRate" || field === "passRate" ? "0%" : 0;
+ };
+
+ const fetchInspectStatisticsData = async () => {
+ try {
+ const res = await getInspectStatistics();
+ if (res.code === 200) {
+ inspectStatisticsData.value = res.data;
+ }
+ } catch (error) {
+ console.error("Failed to fetch inspect statistics:", error);
+ }
+ };
+
+ const fetchPassRateStatisticsData = async () => {
+ try {
+ const res = await getPassRateStatistics();
+ if (res.code === 200) {
+ passRateStatisticsData.value = res.data;
+ // 鏁版嵁鑾峰彇鍚庨噸鏂板垵濮嬪寲鍥捐〃
+ initAllQualityCharts();
+ }
+ } catch (error) {
+ console.error("Failed to fetch pass rate statistics:", error);
+ }
+ };
+
+ const fetchMonthlyPassRateData = async () => {
+ try {
+ const year = value3.value.getFullYear().toString();
+ const res = await getMonthlyPassRateStatistics(year);
+ if (res.code === 200) {
+ monthlyPassRateData.value = res.data;
+ initUsageChart();
+ }
+ } catch (error) {
+ console.error("Failed to fetch monthly pass rate statistics:", error);
+ }
+ };
+
+ const fetchYearlyPassRateData = async () => {
+ try {
+ const year = value3.value.getFullYear().toString();
+ const res = await getYearlyPassRateStatistics(year);
+ if (res.code === 200) {
+ yearlyPassRateData.value = res.data;
+ initInspectionChart();
+ }
+ } catch (error) {
+ console.error("Failed to fetch yearly pass rate statistics:", error);
+ }
+ };
+
+ const fetchMonthlyCompletionDetailsData = async () => {
+ try {
+ const year = value3.value.getFullYear().toString();
+ const res = await getMonthlyCompletionDetails(year);
+ if (res.code === 200) {
+ monthlyCompletionDetailsData.value = res.data;
+ initEquipmentChart();
+ }
+ } catch (error) {
+ console.error("Failed to fetch monthly completion details:", error);
+ }
+ };
+
+ const fetchTopParametersData = async () => {
+ try {
+ const typeMap = { raw: 0, semi: 1, final: 2 };
+ const res = await getTopParameters(typeMap[activeTab.value]);
+ if (res.code === 200) {
+ topParametersData.value = res.data;
+ sumnum.value = topParametersData.value.list.reduce(
+ (acc, cur) => acc + cur.count,
+ 0
+ );
+ console.log(sumnum.value);
+ initSampleChart();
+ }
+ } catch (error) {
+ console.error("Failed to fetch top parameters:", error);
+ }
+ };
const tableData = ref([]);
const tableLoading = ref(false);
@@ -367,9 +471,18 @@
const currentYear = new Date().getFullYear();
return time.getFullYear() > currentYear;
};
+ const sumnum = ref(0);
+ // 鐩戝惉骞翠唤鍙樺寲
+ import { watch } from "vue";
+ watch(value3, () => {
+ fetchMonthlyPassRateData();
+ fetchYearlyPassRateData();
+ fetchMonthlyCompletionDetailsData();
+ });
- // Tab 閫夋嫨鍣ㄥ綋鍓嶆縺娲婚」
- const activeTab = ref("raw");
+ watch(activeTab, () => {
+ fetchTopParametersData();
+ });
// 鍥捐〃寮曠敤
const sampleChartRef = ref(null);
@@ -399,60 +512,6 @@
let finalCompletionChartInstance = null;
let finalQualityChartInstance = null;
- // 鍒濆鍖栨暟鎹�
- const initData = () => {
- // 妯℃嫙琛ㄦ牸鏁版嵁
- tableData.value = [
- {
- id: "SP001",
- name: "鏍峰搧A-001",
- type: "閲戝睘鏉愭枡",
- status: "妫�娴嬩腑",
- progress: 75,
- createTime: "2025-01-15 09:30:00",
- updateTime: "2025-01-20 14:20:00",
- },
- {
- id: "SP002",
- name: "鏍峰搧B-002",
- type: "濉戞枡鍒跺搧",
- status: "宸插畬鎴�",
- progress: 100,
- createTime: "2025-01-10 10:15:00",
- updateTime: "2025-01-18 16:45:00",
- },
- {
- id: "SP003",
- name: "鏍峰搧C-003",
- type: "鐢靛瓙鍏冧欢",
- status: "寰呮娴�",
- progress: 0,
- createTime: "2025-01-22 08:45:00",
- updateTime: "2025-01-22 08:45:00",
- },
- {
- id: "EQ001",
- name: "妫�娴嬭澶嘇",
- type: "鍘熸潗鏂�",
- status: "浣跨敤涓�",
- progress: 60,
- createTime: "2025-01-05 14:20:00",
- updateTime: "2025-01-20 11:30:00",
- },
- {
- id: "EQ002",
- name: "妫�娴嬭澶嘊",
- type: "鍗婃垚鍝�",
- status: "绌洪棽",
- progress: 0,
- createTime: "2025-01-08 16:10:00",
- updateTime: "2025-01-19 09:15:00",
- },
- ];
-
- pagination.total = tableData.value.length;
- };
-
// 鍒濆鍖栨牱鍝佽繘搴﹀浘琛�
const initSampleChart = () => {
if (sampleChartRef.value) {
@@ -461,40 +520,47 @@
title: {
show: false,
},
- tooltip: {
- trigger: "item",
- formatter: "{a} <br/>{b}: {c} ({d}%)",
- },
- // legend: {
- // orient: "vertical",
- // left: "left",
+ // tooltip: {
+ // trigger: "item",
+ // formatter: "{a} <br/>{b}: {c} ({d}%)",
// },
series: [
{
- name: "鏍峰搧鐘舵��",
+ name: "",
type: "pie",
radius: ["40%", "80%"],
avoidLabelOverlap: false,
label: {
- show: false,
+ show: true,
position: "center",
- },
- emphasis: {
- label: {
- show: true,
- fontSize: "18",
- fontWeight: "bold",
+ formatter: function () {
+ return `{a|妫�娴嬫暟閲弣\n{b|${sumnum.value}}`;
+ },
+ disabled: true,
+ rich: {
+ a: {
+ fontSize: 14,
+ color: "#606266",
+ fontWeight: "normal",
+ lineHeight: 20,
+ },
+ b: {
+ fontSize: 20,
+ color: "#303133",
+ fontWeight: "bold",
+ lineHeight: 24,
+ padding: [5, 0, 0, 0],
+ },
},
},
labelLine: {
show: false,
},
- data: [
- { value: 450, name: "宸插畬鎴�" },
- { value: 320, name: "妫�娴嬩腑" },
- { value: 280, name: "寰呮娴�" },
- { value: 200, name: "宸叉殏鍋�" },
- ],
+ data: topParametersData.value.list.map((item, index) => ({
+ value: item.count,
+ name: item.name,
+ itemStyle: { color: getParameterColor(index) },
+ })),
},
],
};
@@ -556,7 +622,9 @@
name: "鍘熸潗鏂�",
type: "bar",
barWidth: "15%",
- data: [85, 75, 80, 85, 90, 88, 92, 87, 89, 91, 93, 95],
+ data: monthlyCompletionDetailsData.value.map(
+ item => item.rawMaterialCount
+ ),
itemStyle: {
color: "#409EFF",
},
@@ -566,7 +634,9 @@
type: "bar",
barWidth: "15%",
- data: [60, 65, 70, 68, 72, 75, 78, 80, 79, 82, 84, 85],
+ data: monthlyCompletionDetailsData.value.map(
+ item => item.processCount
+ ),
itemStyle: {
color: "#67C23A",
},
@@ -576,7 +646,9 @@
type: "bar",
barWidth: "15%",
- data: [75, 78, 80, 82, 85, 83, 86, 88, 87, 89, 90, 92],
+ data: monthlyCompletionDetailsData.value.map(
+ item => item.outgoingCount
+ ),
itemStyle: {
color: "#E6A23C",
},
@@ -601,12 +673,28 @@
series: [
{
type: "pie",
- radius: "80%",
+ radius: "70%",
data: [
- { value: 335, name: "鍘熸潗鏂�", itemStyle: { color: "#1890FF" } },
- { value: 310, name: "鍗婃垚鍝�", itemStyle: { color: "#F7BA1E" } },
- { value: 234, name: "鎴愬搧", itemStyle: { color: "#14C9C9" } },
+ {
+ value: getYearlyStatValue(0, "totalCount"),
+ name: "鍘熸潗鏂�",
+ itemStyle: { color: "#1890FF" },
+ },
+ {
+ value: getYearlyStatValue(1, "totalCount"),
+ name: "鍗婃垚鍝�",
+ itemStyle: { color: "#F7BA1E" },
+ },
+ {
+ value: getYearlyStatValue(2, "totalCount"),
+ name: "鎴愬搧",
+ itemStyle: { color: "#14C9C9" },
+ },
],
+ label: {
+ show: true,
+ formatter: "{b}: {c}",
+ },
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -683,32 +771,34 @@
{
name: "鍘熸潗鏂�", // 绯诲垪鍚嶇О
type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
- stack: "Total", // 鍫嗗彔鍚嶇О
- symbol: "none",
+ // stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "circle",
itemStyle: {
color: "#1890FF", // 璁剧疆杩欐潯绾跨殑棰滆壊
},
- data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330], // 棰嗙敤娆℃暟鏁版嵁
+ data: monthlyPassRateData.value.map(
+ item => item.rawMaterial.passRate
+ ),
},
{
name: "鍗婃垚鍝�", // 绯诲垪鍚嶇О
type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
- stack: "Total", // 鍫嗗彔鍚嶇О
- symbol: "none",
+ // stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "circle",
itemStyle: {
color: "#F7BA1E", // 璁剧疆杩欐潯绾跨殑棰滆壊
},
- data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320], // 褰掕繕娆℃暟鏁版嵁
+ data: monthlyPassRateData.value.map(item => item.process.passRate),
},
{
name: "鎴愬搧", // 绯诲垪鍚嶇О
type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
- stack: "Total", // 鍫嗗彔鍚嶇О
- symbol: "none",
+ // stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "circle",
itemStyle: {
color: "#14C9C9", // 璁剧疆杩欐潯绾跨殑棰滆壊
},
- data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320], // 褰掕繕娆℃暟鏁版嵁
+ data: monthlyPassRateData.value.map(item => item.outgoing.passRate),
},
],
};
@@ -718,9 +808,14 @@
};
// 鍒濆鍖栬川妫�鍚堟牸鐜囧浘琛�
- const initQualityChart = (chartRef, color) => {
+ const initQualityChart = (chartRef, color, value = 0.8) => {
if (chartRef.value) {
- const chart = echarts.init(chartRef.value);
+ let chart = echarts.getInstanceByDom(chartRef.value);
+ if (!chart) {
+ chart = echarts.init(chartRef.value);
+ }
+ const numericValue =
+ typeof value === "string" ? parseFloat(value) / 100 : value / 100;
const option = {
series: [
{
@@ -734,8 +829,8 @@
show: false,
},
data: [
- { value: 0.8, itemStyle: { color: color } },
- { value: 0.2, itemStyle: { color: "#f5f5f5" } },
+ { value: numericValue, itemStyle: { color: color } },
+ { value: 1 - numericValue, itemStyle: { color: "#f5f5f5" } },
],
},
],
@@ -750,22 +845,34 @@
const initAllQualityCharts = () => {
materialCompletionChartInstance = initQualityChart(
materialCompletionChart,
- "#1890ff"
+ "#1890ff",
+ getPassRateStatValue(0, "completionRate")
);
materialQualityChartInstance = initQualityChart(
materialQualityChart,
- "#52c41a"
+ "#52c41a",
+ getPassRateStatValue(0, "passRate")
);
semiCompletionChartInstance = initQualityChart(
semiCompletionChart,
- "#1890ff"
+ "#1890ff",
+ getPassRateStatValue(1, "completionRate")
);
- semiQualityChartInstance = initQualityChart(semiQualityChart, "#52c41a");
+ semiQualityChartInstance = initQualityChart(
+ semiQualityChart,
+ "#52c41a",
+ getPassRateStatValue(1, "passRate")
+ );
finalCompletionChartInstance = initQualityChart(
finalCompletionChart,
- "#1890ff"
+ "#1890ff",
+ getPassRateStatValue(2, "completionRate")
);
- finalQualityChartInstance = initQualityChart(finalQualityChart, "#722ed1");
+ finalQualityChartInstance = initQualityChart(
+ finalQualityChart,
+ "#722ed1",
+ getPassRateStatValue(2, "passRate")
+ );
};
// 浜嬩欢澶勭悊鍑芥暟
@@ -855,7 +962,12 @@
// 鐢熷懡鍛ㄦ湡
onMounted(() => {
- initData();
+ fetchInspectStatisticsData();
+ fetchPassRateStatisticsData();
+ fetchMonthlyPassRateData();
+ fetchYearlyPassRateData();
+ fetchMonthlyCompletionDetailsData();
+ fetchTopParametersData();
nextTick(() => {
initSampleChart();
initEquipmentChart();
@@ -887,7 +999,7 @@
background-color: #f5f5f5;
min-height: 100vh;
/* height: 87vh;
- overflow: hidden; */
+ overflow: hidden; */
}
.page-header {
@@ -978,6 +1090,7 @@
.chart-card {
margin-bottom: 20px;
}
+
.container-line-right-bottom {
height: 20%;
width: 100%;
@@ -986,6 +1099,7 @@
align-items: center;
/* background-color: #5b3f3f; */
}
+
.card-header {
display: flex;
justify-content: flex-start;
@@ -999,6 +1113,7 @@
font-style: normal;
text-transform: none;
}
+
.chart-title-line {
width: 6px;
height: 22px;
@@ -1011,6 +1126,7 @@
height: 250px;
width: 100%;
}
+
.chart-container-line {
height: 250px;
width: 100%;
@@ -1051,18 +1167,22 @@
color: #fff;
background-color: #409eff;
}
+
.container-line-left {
height: 100%;
width: 66%;
}
+
.container-line-right {
height: 100%;
width: 34%;
}
+
.container-line2-left {
height: 100%;
width: 50%;
}
+
.info-box {
width: 92%;
margin-left: 4%;
@@ -1073,12 +1193,14 @@
align-items: center;
justify-content: space-around;
}
+
.info-box-header {
width: 100%;
margin-left: 20px;
color: #1d2129;
font-size: 16px;
font-weight: 500;
+ line-height: 37px;
}
.info-line {
@@ -1086,18 +1208,22 @@
display: flex;
padding-left: 20px;
align-items: center;
+ flex: 1;
}
+
.info-icon {
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 8px;
}
+
.info-line-title {
font-size: 12px;
color: #4e5969;
flex: 1;
}
+
.info-line-value1 {
font-size: 12px;
color: #3d3d3d;
@@ -1105,6 +1231,7 @@
font-weight: 500;
margin-right: 15%;
}
+
.info-line-value2 {
font-size: 12px;
color: #3d3d3d;
@@ -1112,11 +1239,13 @@
font-weight: 500;
margin-right: 10%;
}
+
.top-container {
height: 130px;
width: 100%;
display: flex;
}
+
.typeNum {
height: 100%;
width: 33.33%;
@@ -1124,6 +1253,7 @@
align-items: center;
justify-content: center;
}
+
.typeNum-left {
font-size: 12px;
color: #909399;
@@ -1132,25 +1262,30 @@
align-items: center;
justify-content: center;
}
+
.typeNum-left-text {
font-size: 12px;
color: #3491fa;
font-weight: 500;
margin-top: 5px;
}
+
.table-card {
margin-bottom: 20px;
}
+
.typeNum-center {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
+
.typeNum-leftLine {
color: #3491fa;
font-size: 12px;
}
+
.typeNum-rightLine {
border-top: 1px solid #3491fa;
border-left: 1px solid #3491fa;
@@ -1158,10 +1293,12 @@
height: 80px;
width: 8px;
}
+
.typeNum-leftLine2 {
color: #5eb334;
font-size: 12px;
}
+
.typeNum-rightLine2 {
border-top: 1px solid #3491fa;
border-left: 1px solid #5eb334;
@@ -1169,10 +1306,12 @@
height: 80px;
width: 8px;
}
+
.typeNum-leftLine3 {
color: #8000ff;
font-size: 12px;
}
+
.typeNum-rightLine3 {
border-top: 1px solid #8000ff;
border-left: 1px solid #8000ff;
@@ -1180,6 +1319,7 @@
height: 80px;
width: 8px;
}
+
.typeNum-right {
margin-left: 10px;
display: flex;
@@ -1187,21 +1327,25 @@
height: 90%;
justify-content: space-between;
}
+
.typeNum-right-top-name {
font-weight: 400;
font-size: 12px;
color: #3d3d3d;
}
+
.typeNum-right-top-text {
font-weight: 400;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
margin-top: 5px;
}
+
.unit {
font-size: 12px;
color: #3d3d3d;
}
+
.inspection-chart-box {
height: 50px;
width: 30%;
@@ -1209,21 +1353,25 @@
border-radius: 8px;
padding-left: 15px;
}
+
.chart-box-title {
font-size: 12px;
color: #4e5969;
margin-top: 5px;
}
+
.unit {
font-size: 12px;
color: #3d3d3d;
}
+
.chart-box-num {
font-size: 18px;
color: #000;
margin-top: 5px;
font-weight: 500;
}
+
/* 璐ㄦ鍚堟牸鐜囧崱鐗囨牱寮� */
.top-container鍚堟牸鐜� {
height: 130px;
@@ -1233,9 +1381,11 @@
align-items: center;
justify-content: space-between;
}
+
.flex-center {
justify-content: space-evenly;
}
+
.quality-card {
/* flex: 1; */
width: 32%;
@@ -1272,9 +1422,11 @@
color: #666666;
margin-bottom: 3px;
}
+
.blue-label {
color: #1890ff;
}
+
.green-label {
color: #52c41a;
}
@@ -1317,9 +1469,10 @@
height: 60px;
margin-left: 10px;
}
+
/* .flex-center {
- justify-content: space-evenly;
- } */
+ justify-content: space-evenly;
+ } */
.blue-chart {
/* background-color: rgba(24, 144, 255, 0.1); */
@@ -1366,6 +1519,7 @@
margin-top: 20px;
text-align: right;
}
+
.yearchange {
position: absolute;
right: 40px;
@@ -1396,6 +1550,7 @@
:deep(.el-tag) {
margin: 0;
}
+
:deep(.el-input__prefix) {
display: none !important;
}
--
Gitblit v1.9.3