门户，领导权限、双向进度条

src/components/echarts/ProgressChart.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="hac-progress-chart-box">
+        <div class="hac-left-progress">
+            <div class="title" v-if="left_title">{{left_title}}</div>
+            <div class="progress">
+                <el-progress :text-inside="true" :stroke-width="32" :percentage="left_ratio" />
+            </div>
+        </div>
+        <div class="hac-title-box">
+            <div class="title">{{titles}}</div>
+        </div>
+        <div class="hac-right-progress">
+            <div class="title" v-if="right_title">{{right_title}}</div>
+            <div class="progress">
+                <el-progress :text-inside="true" :stroke-width="32" :percentage="right_ratio" :format="format"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from 'vue'
+const props = defineProps({
+    leftTitle: {
+        type: String,
+        default: ''
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    rightTitle: {
+        type: String,
+        default: ''
+    },
+    leftRatio: {
+        type: [Number,String],
+        default: 0
+    },
+    rightRatio: {
+        type: [Number,String],
+        default: 0
+    },
+    rightText: {
+        type: [Number,String],
+        default: 0
+    }
+})
+
+//变量
+const left_title = ref(props.leftTitle)
+const titles = ref(props.title)
+const right_title = ref(props.rightTitle)
+const left_ratio = ref(Number(props.leftRatio))
+const right_ratio = ref(Number(props.rightRatio))
+const right_text = ref(props.rightText)
+
+//监听
+watch(() => [
+    props.leftTitle,
+    props.title,
+    props.rightTitle,
+    props.leftRatio,
+    props.rightRatio,
+    props.rightText,
+], ([leftTitle, title, rightTitle, leftRatio, rightRatio, rightText]) => {
+    left_title.value = leftTitle
+    titles.value = title
+    right_title.value = rightTitle
+    left_ratio.value = Number(leftRatio)
+    right_ratio.value = Number(rightRatio)
+    right_text.value = rightText
+})
+
+const format = () => (right_text.value)
+
+</script>
+
+<style scoped lang="scss">
+.hac-progress-chart-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 10px 0;
+    .hac-left-progress, .hac-right-progress {
+        position: relative;
+        flex: 1;
+        .title {
+            position: absolute;
+            top: -27px;
+            font-size: 14px;
+        }
+        .progress {
+            position: relative;
+        }
+    }
+    .hac-left-progress .title {
+        right: 0;
+        color: #0066FF;
+    }
+    .hac-title-box {
+        position: relative;
+        width: 168px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 6px;
+        .title {
+            position: relative;
+            font-size: 12px;
+            background: #003366;
+            border: 1px solid #0066FF;
+            border-radius: 5px;
+            color: white;
+            padding: 6px 10px;
+            width: 142px;
+            text-align: center;
+        }
+        &:before {
+            content: "";
+            position: absolute;
+            top: -11px;
+            background: #BBD1FF;
+            width: 100%;
+            height: 50px;
+            border: 1px solid #00CCFF;
+            border-top-color: #BBD1FF;
+            border-bottom-color: #BBD1FF;
+        }
+    }
+    .hac-right-progress .title {
+        left: 0;
+        color: #FE6E22;
+    }
+}
+</style>
+
+<style lang="scss">
+.hac-progress-chart-box {
+    .hac-left-progress .progress .el-progress .el-progress-bar .el-progress-bar__outer {
+        background-color: #BBD1FF;
+        .el-progress-bar__inner {
+            right: 0;
+            left: initial;
+            text-align: left;
+            background: linear-gradient(90deg, rgba(25,86,249,1) -0.6%,rgba(53,210,233,1) 100.6%);
+        }
+    }
+    .hac-right-progress .progress .el-progress .el-progress-bar .el-progress-bar__outer {
+        background-color: #FFE3D6;
+        .el-progress-bar__inner {
+            background: linear-gradient(90deg, rgba(254,110,34,1) -0.6%,rgba(189,49,36,1) 100.6%);
+        }
+    }
+    &:first-child {
+        .hac-title-box:before {
+            border-top-color:#00CCFF;
+            border-radius: 3px 3px 0 0;
+        }
+    }
+    &:last-child {
+        .hac-title-box:before {
+            border-bottom-color:#00CCFF;
+            border-radius: 0 0 3px 3px;
+        }
+    }
+}
+</style>

src/styles/home/admin.scss

@@ -74,5 +74,5 @@
 }
 .hc-row-echarts-box {
     position: relative;
-    height: 260px;
+    min-height: 260px;
 }

src/views/home/admin.vue

@@ -137,7 +137,7 @@
                 <template #extra>
                     <HcDropdown :cur="planTime" :datas="itemData"/>
                 </template>
-                <div class="hc-row-echarts-box">
+                <div class="hc-row-echarts-box" style="height: 260px">
                     <BarLabelRotation/>
                 </div>
             </HcCardItem>
@@ -218,8 +218,13 @@
                         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                     </el-select>
                 </template>
-                <div class="hc-row-echarts-box">
-                    22222
+                <div class="hc-row-echarts-box pt-5 mb-1">
+                    <ProgressChart leftTitle="计划执行进度" rightTitle="已支出成本" title="商机商机商机商机商机" leftRatio="100" rightRatio="70" rightText="36222.36"/>
+                    <ProgressChart title="商机" leftRatio="40" rightRatio="50" rightText="95231"/>
+                    <ProgressChart title="商机商机" leftRatio="55" rightRatio="35" rightText="16895"/>
+                    <ProgressChart title="商机商机商机" leftRatio="40" rightRatio="28.6" rightText="6352"/>
+                    <ProgressChart title="商机商机商机商机" leftRatio="30" rightRatio="15" rightText="1200"/>
+                    <ProgressChart title="商机商机商机商机商机" leftRatio="20" rightRatio="8" rightText="300"/>
                 </div>
             </HcCardItem>
         </div>
@@ -236,6 +241,7 @@ import Zhi1Img from "~src/assets/images/zhi1.png";
 import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
 import BorderRadius from "~com/echarts/BorderRadius.vue";
 import SimpleChart from "~com/echarts/SimpleChart.vue";
+import ProgressChart from "~com/echarts/ProgressChart.vue";
 
 //选择日期时间
 const planTime = ref('汇总所有')