报表计划

src/components/echarts/BarLabelRotation.vue

@@ -27,6 +27,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    legend: {
+        type: Object,
+        default:  () => ({})
+    },
 })
 
 //初始变量
@@ -36,25 +40,33 @@ const units = ref(props.unit)
 const datas = ref(props.datas)
 const isMonths = ref(props.isMonth)
 const xAxis = ref(props.lables)
+const legendval=ref(props.legend)
+
 
 watch(() => [
     props.color,
     props.unit,
     props.isMonth,
-    props.lables
-], ([color, unit, isMonth, lables]) => {
+    props.lables,
+    props.legend,
+], ([color, unit, isMonth, lables,legend]) => {
     colors.value = color
     units.value = unit
     isMonths.value = isMonth
     xAxis.value = lables
+    legendval.value=legend
     setOptions()
 })
 
+
 //深度监听数据变化
 watch(() => [
     props.datas,
-], ([data]) => {
+    props.legend,
+,
+], ([data,legend]) => {
     datas.value = data
+    legendval.value=legend
     setDataFormat()
 }, { deep: true })
 
@@ -82,11 +94,11 @@ const setDataFormat = () => {
             })
         }
     }
-    setOptions(lables, series)
+    setOptions(lables, series,legendval.value)
 }
 
 //设置图表
-const setOptions = (lables = [], series = []) => {
+const setOptions = (lables = [], series = [],legend={}) => {
     setOption.value = {
         color: colors.value,
         tooltip: {
@@ -114,7 +126,8 @@ const setOptions = (lables = [], series = []) => {
                 formatter: '{value}' + units.value
             },
         }],
-        series: series
+        series: series,
+        legend:legend
     }
 }
 

src/components/echarts/StackedLine.vue

@@ -0,0 +1,110 @@
+<template>
+    <echartsBase :option="setOption"/>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import echartsBase from './index.vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '管理费用项目分摊占比情况'
+    },
+    color: {
+        type: Array,
+        default: () => (['#5087EC', '#68BBC4'])
+    },
+    unit: {
+        type: String,
+        default: '元'
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+//初始变量
+const setOption = ref({})
+const titles = ref(props.title)
+const colors = ref(props.color)
+const units = ref(props.unit)
+const datas = ref(props.datas)
+
+watch(() => [
+    props.title,
+    props.color,
+    props.unit,
+], ([title, color, unit]) => {
+    titles.value = title
+    colors.value = color
+    units.value = unit
+    setOptions()
+})
+
+//深度监听数据变化
+watch(() => [
+    props.datas,
+], ([data]) => {
+    datas.value = data
+    setOptions()
+}, { deep: true })
+
+
+//设置图表
+const setOptions = () => {
+    setOption.value = {
+        color: colors.value,
+        title: {
+    
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['风险暂停计划', '正常计划',]
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '风险暂停计划',
+      type: 'line',
+      stack: 'Total',
+      data: [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      name: '正常计划',
+      type: 'line',
+      stack: 'Total',
+      data: [220, 182, 191, 234, 290, 330, 310]
+    },
+  ]
+}
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        setOptions()
+    })
+})
+</script>

src/views/home/index.vue

@@ -155,7 +155,7 @@
                 </template>
                 <div class="hac-card-item-body">
                     <div class="hc-row-echarts-box">
-                        <BarLabelRotation isMonth :datas="planDatas"/>
+                        <BarLabelRotation isMonth :datas="planDatas" :legend="{show:false,   }"/>
                     </div>
                 </div>
             </HcCardItem>

src/views/static/plan.vue

@@ -1,13 +1,135 @@
 <template>
-     <HcCard actionSize="lg" scrollbar>
-        <template #header>
-            <div class="warn_text">
-                <HcIcon name="alert" class="warn_icon"/>
-                <span>15条</span>
+        <div class="head_box">
+            <div class="w-36">
+                    <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
+                        <el-option v-for="item in departmentType" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </div>
+                <div class="w-40 ml-2" style="display: flex;justify-content: center;align-items: center;">
+                    <span style="width: 120px;color: gray;">任务人员:</span>
+                 <el-select v-model="searchForm.person" block clearable placeholder="任务人员" size="large">
+                        <el-option v-for="item in personType" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </div>
+                <div class="w-36 ml-4">
+                    <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
+                </div>
+                <div class="mx-2">~</div>
+                <div class="w-36">
+                    <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
+                </div>
+            
+                <div class="ml-4">
+                    <el-button type="primary" @click="searchClick" size="large">
+                        <HcIcon name="search-2"/>
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+                <div class="ml-2">
+                    <el-button size="large" @click="resetClick">
+                        <HcIcon name="close-circle"/>
+                        <span>重置</span>
+                    </el-button>
+                </div>
+        </div>
+        <HcCardItem ui="hac-card-item mt-4" style="height:40%">
+        
+            <div class="hac-card-item-body">
+                <div class="hc-row-echarts-box"  style="margin-top: 30px;">
+                    <BarLabelRotation isMonth :datas="planDatas" :legend="legend"/>
+                </div>
             </div>
-        </template>
-     </HcCard>
+        </HcCardItem>
+        <el-row :gutter="14" class="mt-8" style="height:50%">
+                <el-col :span="12">
+                    <HcCardItem ui="hac-card-item">
+                        <HcCardItem ui="hac-card-item">
+                            <div class="hc-row-echarts-box" style="height: 360px;">
+                                <StackedLine isMonth :datas="planDatas1" />
+                            </div>
+                        </HcCardItem>
+                    </HcCardItem>
+                </el-col>
+                <el-col :span="12">
+                    <HcCardItem ui="hac-card-item">
+                        <div class="hc-row-echarts-box" style="height: 360px;">
+                            <StackedLine isMonth :datas="planDatas1" />
+                        </div>
+                    </HcCardItem>
+                </el-col>
+            </el-row>
+            
+        
+  
+ 
+
 </template>
 
  <script setup>
-</script>
+ import {ref, watch} from "vue";
+ import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
+ import ProgressChart from "~com/echarts/ProgressChart.vue";
+ import StackedLine from "~com/echarts/StackedLine.vue";
+ const searchForm=ref({
+    department:'',person:''
+ })
+ const departmentType=ref([
+    {name:'研发部门',key:1},
+    {name:'业务部门',key:2},
+    {name:'人事部门',key:1},
+ ])
+ const personType=ref([
+    {name:'全部',key:''},
+    {name:'张三',key:1},
+    {name:'李四',key:2},
+    {name:'王五',key:1},
+ ])
+ //搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    console.log(searchForm.value)
+}
+
+//重置
+const resetClick = () => {
+    searchForm.value = {
+        reportType: null, startTime: null, endTime: null,
+        current: 1, size: 20, total: 0
+    }
+}
+//计划统计图
+const planDatas = ref([
+    {
+        name: '总计划',
+        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
+    },
+    {
+        name: '已完成',
+        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
+    },
+    {
+        name: '未完成',
+        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
+    },
+])
+const planDatas1=ref([])
+const legend=ref(
+    {
+		orient: 'horizontal',
+		data:['总计划','已完成','未完成'],
+		textStyle:{
+        	fontSize: 14,//字体大小
+            color: 'black'//字体颜色
+        }
+   	},
+)
+</script>
+<style lang="scss" scoped>
+@import "~src/styles/home/index.scss";
+.el-card .el-card__body .hc-card-main-box .hc-card-item-box {
+    background: white;
+}
+.head_box{
+    display: flex;
+}
+</style>