|
|
@@ -0,0 +1,167 @@
|
|
|
+<template>
|
|
|
+ <div style="height: 100vh;width: 100%;background-color: white;overflow-y: auto;">
|
|
|
+ <div style="margin-top: 1%;margin-left: 1%;">
|
|
|
+ 我的申请
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:1%;height: 1px;background-color: #f0f0f0;"></div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="height: 15vh;border-right: 1px solid #f0f0f0;width: 33.3%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="triangle-border" style="margin-left: auto;">
|
|
|
+ <div style="color: white;margin-left: 55%;margin-top: 10%;">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;width: 100%;margin-top: 1%;">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;justify-content: center;">
|
|
|
+ <svg-icon icon-class="笑脸" style="height: 20px;width: 20PX;"/>
|
|
|
+ <div style="margin-left: 2%;font-size: 14px;color: #909399;">已通过</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 8%;font-size: 33px;text-align: center;width: 100%;">
|
|
|
+ 21
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 15vh;border-right: 1px solid #f0f0f0;width: 33.3%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="triangle-border" style="margin-left: auto;background-color: #E6A23C;">
|
|
|
+ <div style="color: white;margin-left: 55%;margin-top: 10%;">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;width: 100%;margin-top: 1%;">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;justify-content: center;">
|
|
|
+ <svg-icon icon-class="感叹号中" style="height: 20px;width: 20PX;"/>
|
|
|
+ <div style="margin-left: 2%;font-size: 14px;color: #909399;">流程中</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 8%;font-size: 33px;text-align: center;width: 100%;">
|
|
|
+ 21
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 15vh;width: 33.3%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="triangle-border" style="margin-left: auto;background-color: #F56C6C;">
|
|
|
+ <div style="color: white;margin-left: 55%;margin-top: 10%;">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;width: 100%;margin-top: 1%;">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;justify-content: center;">
|
|
|
+ <svg-icon icon-class="哭脸" style="height: 20px;width: 20PX;"/>
|
|
|
+ <div style="margin-left: 2%;font-size: 14px;color: #909399;">已终止</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 8%;font-size: 33px;text-align: center;width: 100%;">
|
|
|
+ 21
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2%;margin-left: 1%;">
|
|
|
+ 流程状态分布
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:1%;height: 1px;background-color: #f0f0f0;"></div>
|
|
|
+ <div style="display: flex;height: 10vh;width: 50%;">
|
|
|
+ <div style="width: 50%;display: flex;">
|
|
|
+ <div style="width: 50%;" id="huan1"> </div>
|
|
|
+ <div style="width: 50%;">
|
|
|
+ <div style="color: #909399;margin-top: 20%;">数据使用:90%</div>
|
|
|
+ <div style="margin-top: 10%;font-size: 30px;">21</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 50%;display: flex;">
|
|
|
+ <div style="width: 50%;" id="huan2"> </div>
|
|
|
+ <div style="width: 50%;">
|
|
|
+ <div style="color: #909399;margin-top: 20%;">待审批:10%</div>
|
|
|
+ <div style="margin-top: 10%;font-size: 30px;">2</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2%;margin-left: 1%;">
|
|
|
+ 工作动态
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:1%;height: 1px;background-color: #f0f0f0;"></div>
|
|
|
+ <div style="height: 75vh;">
|
|
|
+ <div v-for="item in source">
|
|
|
+ <div style="height: 10vh;margin-top: 1%;">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;">
|
|
|
+ <div style="margin-left: 1%;width:1%;"><svg-icon icon-class="对勾" style="height: 15;width: 15;"/></div>
|
|
|
+ <div style="margin-left: 1%;font-size: 13px;">流程单号为【20251027200001】的信息资源通过了所有交换审批</div>
|
|
|
+ <div style="margin-left: auto;margin-right: 1%;font-size: 13px;">2025-10-27 13:40:21</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;margin-top: 0.5%;">
|
|
|
+ <div style="margin-left: 3%;font-size: 12px;">信息资源名称:城市内涝预报 道路最大水深</div>
|
|
|
+ <el-button style="margin-left: auto;margin-right: 1%;font-size: 13px;" type="success">数据使用</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 3%;font-size: 12px;">服务名称:城市内涝预报 道路最大水深-接口-接口服务</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-pagination style="float: right;" small background layout="prev, pager, next" :total="1" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+const source = ref([1,2,2,2,3]);
|
|
|
+function getHuan1() {
|
|
|
+ var chartDom = document.getElementById('huan1');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: ['#409EFF', 'rgb(244, 244, 245)'],
|
|
|
+ data: [
|
|
|
+ { value: 90 },
|
|
|
+ { value: 10}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+}
|
|
|
+function getHuan2() {
|
|
|
+ var chartDom = document.getElementById('huan2');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: ['#E6A23C', 'rgb(244, 244, 245)'],
|
|
|
+ data: [
|
|
|
+ { value: 10 },
|
|
|
+ { value: 90}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getHuan1();
|
|
|
+ getHuan2();
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+.triangle-border {
|
|
|
+ width: 40px; /* 定义三角形的“容器”宽度 */
|
|
|
+ height: 40px; /* 定义三角形的“容器”高度 */
|
|
|
+ background-color: #33C358; /* 三角形的填充色 */
|
|
|
+ /* 关键:定义多边形的三个顶点 */
|
|
|
+ /* 三个点依次是:右上角(100% 0), 右下角(100% 100%), 左上角(0 0) */
|
|
|
+ clip-path: polygon(100% 0, 100% 100%, 0 0);
|
|
|
+ }
|
|
|
+</style>
|