门户页面1完成

src/router/index.js

@@ -41,6 +41,9 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
 import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
 import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
 
+// 门户
+import Portals from '@/views/portals/index.vue'
+
 const routes = [
 	// 智库系统的主要路由
 	{
@@ -377,6 +380,14 @@ const routes = [
 		meta: {
 			title: "政令信息"
 		}
+	},
+	{
+		path: "/Portals",
+		name: "Portals",
+		component: Portals,
+		meta: {
+			title: "门户"
+		}
 	}
 ];
 

src/views/portals/components/CardCustom.vue

+<template>
+  <el-card class="card">
+    <div class="wrap">
+      <div class="line" :style="{ backgroundColor: lineColor }"></div>
+      <div class="header">
+        <div class="iconWrap">
+          <slot name="icon">
+            <el-icon :size="20">
+              <Edit />
+            </el-icon>
+          </slot>
+        </div>
+        <div
+          class="titleWrap"
+          :style="{ backgroundColor: titleBackgroundColor }"
+        >
+          {{ title }}
+        </div>
+        <div class="rightWrap">
+          <slot name="right">
+            <div class="moreWrap">
+              <el-button text @click="moreClick">
+                <span class="moreText">更多</span>
+                <el-icon :size="14"> <Plus /> </el-icon>
+              </el-button>
+            </div>
+          </slot>
+        </div>
+      </div>
+      <div class="body">
+        <slot name="default"> </slot>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { Edit, Plus } from "@element-plus/icons-vue";
+const emit = defineEmits(["moreClick"]);
+defineProps({
+  titleBackgroundColor: {
+    type: String,
+    default: "red",
+  },
+  lineColor: {
+    type: String,
+    default: "transparent",
+  },
+  title: {
+    type: String,
+    default: "风险信号",
+  },
+});
+function moreClick() {
+  emit("moreClick");
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  :deep(.el-card__body) {
+    padding: 0;
+    height: 100%;
+  }
+}
+.wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line {
+  left: 1px;
+  right: 1px;
+  background-color: transparent;
+  height: 1px;
+  top: 0;
+  position: absolute;
+}
+.header {
+  height: 48px;
+  border-bottom: 1px solid rgba(234, 236, 238, 1);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  z-index: 1;
+  position: relative;
+  flex-shrink: 0;
+}
+.iconWrap {
+  width: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.titleWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: red;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+.rightWrap {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  flex: 1;
+}
+.moreWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  height: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  cursor: pointer;
+  .moreText {
+    margin-right: 3px;
+  }
+}
+.body {
+  flex: 1;
+  padding: 14px 20px;
+}
+</style>

src/views/portals/components/PieProgress.vue

+<template>
+  <div class="wrap1">
+    <div class="chart" ref="chart"></div>
+    <div class="title">{{ data.title }}</div>
+    <div class="titleSub">{{ data.titleSub }}</div>
+    <div class="slope">
+      <div
+        class="slopeLine"
+        :style="{
+          transform: 'rotate(' + (data.current / data.total) * -25 + 'deg)',
+          top: -88 + (data.current / data.total) * 25 * 0.3 + 'px',
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, onMounted } from "vue";
+import { setChart, getPieChart } from "../utils/charts";
+const { data } = defineProps({
+  data: {
+    type: Object,
+  },
+});
+// 第一个参数必须与模板中的 ref 值匹配
+const chart = useTemplateRef("chart");
+onMounted(() => {
+  setChart(
+    getPieChart((data.current / data.total) * 100, data.current, data.total),
+    chart.value
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+  width: 141.6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.chart {
+  width: 94px;
+  height: 94px;
+}
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-top: 12px;
+  color: rgba(59, 65, 75, 1);
+}
+.titleSub {
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 2px;
+  color: rgba(10, 87, 166, 1);
+}
+.slope {
+  width: 68px;
+  height: 40px;
+  background-color: aqua;
+  margin-top: 2px;
+  background: linear-gradient(
+    180deg,
+    rgba(20, 67, 187, 0.3),
+    rgba(20, 67, 187, 0) 100%
+  );
+  position: relative;
+  overflow: hidden;
+}
+.slopeLine {
+  height: 100px;
+  width: 200%;
+  background-color: #fff;
+  border-bottom: 1.5px solid blue;
+  position: absolute;
+  top: -82px;
+  left: -50%;
+  transform: rotate(0deg);
+  transform-origin: center bottom;
+}
+</style>

src/views/portals/utils/charts.js

+
+import * as echarts from "echarts";
+const getPieChart = (number, current, total) => {
+    const option = {
+        // 图表标题可置于中心，模拟居中文字的一部分
+        title: {
+            text: current + '/' + total, // 主百分比文字
+            left: 'center',
+            top: 'center',
+            textStyle: {
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: '#333'
+            }
+        },
+        series: [
+            // 背景环系列
+            {
+                type: 'pie',
+                radius: ['84%', '96%'], // 细圆环：内半径50%，外半径55% [citation:5]
+                silent: true, // 禁用交互 [citation:2]
+                label: { show: false }, // 不显示标签 [citation:2]
+                data: [
+                    {
+                        value: 100, // 背景环占满100%，模拟完整圆环
+                        itemStyle: {
+                            color: '#f0f0f0' // 背景环颜色，通常为浅色
+                        }
+                    }
+                ]
+            },
+            // 数据进度环系列
+            {
+                type: 'pie',
+                radius: ['80%', '100%'], // 与背景环同样粗细
+                startAngle: 90, // 起始角度，从顶部开始 [citation:4]
+                labelLine: false,
+                silent: true,
+                data: [
+                    {
+                        value: number, // 实际进度值，对应70%
+                        itemStyle: {
+                            // 使用线性渐变
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(105, 177, 255, 1)' // 渐变起始颜色
+                                }, {
+                                    offset: 1, color: 'rgba(255, 120, 117, 1)' // 渐变结束颜色
+                                }]
+                            }
+                        }
+                    },
+                    {
+                        value: 100 - number, // 剩余部分 (100 - 70)%
+                        itemStyle: {
+                            color: 'transparent' // 剩余部分透明，仅显示实际进度部分
+                        }
+                    }
+                ]
+            }
+        ]
+    };
+    return option
+}
+const setChart = (option, chartDom) => {
+    let chart = echarts.init(chartDom);
+    chart.setOption(option);
+    return chart;
+};
+export {
+    getPieChart,
+    setChart
+}
\ No newline at end of file