修改项目列表

src/views/project/modules/components/charts.vue

@@ -0,0 +1,69 @@
+<template>
+    <hc-charts ref="charts" :option="chartsOption" />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { getNumber, getRandom } from 'js-fast-way'
+
+const props = defineProps({
+    datas: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//渲染完成
+onMounted(() => {
+    setClassifyChartsOption(props.datas)
+})
+
+//监听值变化
+watch(() => props.datas, (val) => {
+    setClassifyChartsOption(val)
+})
+
+//处理数据
+const charts = ref(null)
+const chartsOption = ref({})
+const setClassifyChartsOption = (data) => {
+    chartsOption.value = {
+        backgroundColor: '',
+        color: ['#BE8368', '#08818E'],
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            top: '1',
+            data: ['计划投资', '实际完成投资'],
+        },
+        grid: {
+            top: '50',
+            left: '10',
+            right: '20',
+            bottom: '5',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['一季度', '二季度', '三季度', '四季度'],
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: [
+            {
+                name: '计划投资',
+                type: 'line',
+                data: data?.a,
+            },
+            {
+                name: '实际完成投资',
+                type: 'line',
+                data: data?.b,
+            },
+        ],
+    }
+}
+</script>

src/views/project/modules/project-list.vue

@@ -11,9 +11,11 @@
                 <el-link v-if="isAdminAuth" type="warning" @click="completion(row)">项目完成情况</el-link>
                 <el-link type="primary" @click="examine(row)">查看</el-link>
                 <el-link v-if="isAdminAuth" v-del-com:[delTableItem]="row" type="danger">删除</el-link>
+                <el-link v-if="!isAdminAuth" type="warning" @click="projectStatus(row)">项目情况</el-link>
                 <el-link v-yes-com:[deriveTableItem]="row" type="success">导出</el-link>
             </template>
         </hc-table>
+
         <!-- 查看详情 -->
         <hc-drawer v-model="isDrawer" to-id="hc-main-box" is-close>
             <hc-card class="hc-project-list-drawer" :scrollbar="true">
@@ -230,14 +232,29 @@
                 </template>
             </hc-card>
         </hc-drawer>
+
+        <!-- 项目情况 -->
+        <hc-dialog v-model="isStatusShow" widths="60rem" title="项目情况" is-table :footer="false" @close="statusClose">
+            <div class="project-status-dialog relative h-390px">
+                <hc-card-item title="项目投资情况">
+                    <HcStatusCharts :datas="{ a: [150, 100, 240, 100], b: [100, 160, 280, 120] }" />
+                </hc-card-item>
+            </div>
+            <div class="project-status-dialog relative mt-14px">
+                <hc-card-item title="项目进度情况">
+                    <hc-table :column="statusColumn" :datas="statusData" :is-index="false" />
+                </hc-card-item>
+            </div>
+        </hc-dialog>
     </div>
 </template>
 
 <script setup>
 import { onMounted, ref, watch } from 'vue'
 import mainApi from '~api/project/project'
-import { arrToId, getArrValue, getObjValue, newDownBlob } from 'js-fast-way'
+import { getArrValue, getObjValue } from 'js-fast-way'
 import BigNumber from 'bignumber.js'
+import HcStatusCharts from './components/charts.vue'
 
 const props = defineProps({
     isAdmin: {
@@ -275,24 +292,24 @@ onMounted(() => {
 
 //表头
 const tableColumn = ref([
+    { key: 'projectStageName', name: '项目阶段', width: 120, align: 'center' },
+    { key: 'projectTypeName', name: '项目类型', width: 120, align: 'center' },
     { key: 'name', name: '项目名称' },
-    { key: 'projectTypeName', name: '项目类型' },
-    { key: 'buildScaleName', name: '建设规模' },
-    { key: 'startYear', name: '计划开工年' },
-    { key: 'endYear', name: '计划完工年' },
-    { key: 'allInvestMoney', name: '总投资（亿元）' },
+    { key: 'buildScaleName', name: '建设规模', width: 120, align: 'center' },
+    { key: 'allInvestMoney', name: '总投资（亿元）', width: 100, align: 'center' },
+    { key: 'startYear', name: '计划开工年', width: 100, align: 'center' },
+    { key: 'endYear', name: '计划完工年', width: 100, align: 'center' },
     { key: 'dutyUnit', name: '责任单位' },
-    { key: 'isPilotPlanName', name: '交通强国建设试点任务' },
-    { key: 'finishedInvestMoney', name: '开工累计完成投资' },
-    { key: 'progressRatio', name: '项目进展比例(%)' },
-  /*{ key: 'projectStageName', name: '项目阶段' },
-   { key: 'fourteenFiveInvest', name: '\“十四五”\'计划投资（亿元)' },
+    { key: 'isPilotPlanName', name: '交通强国建设试点任务', width: 100, align: 'center' },
+    { key: 'finishedInvestMoney', name: '开工累计完成投资', width: 100, align: 'center' },
+    { key: 'progressRatio', name: '项目进展比例(%)', width: 100, align: 'center' },
+   /*{ key: 'fourteenFiveInvest', name: '\“十四五”\'计划投资（亿元)' },
    { key: 'isFocusProjectName', name: '市级重点项目' },
    { key: 'finishedInvestMoney', name: '完成投资金额(亿元)' },
    { key: 'finishedFillRatio', name: '完成情况填写比例(%)' },
    { key: 'leaderUnit', name: '牵头单位' },
    { key: 'assistUnit', name: '配合单位' },*/
-    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
+    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 150, fixed:'right', align: 'center' },
 ])
 
 //监听数据
@@ -539,6 +556,29 @@ const changePlanRatio = (val, row, index)=>{
         }
     }*/
 }
+
+//项目情况
+const isStatusShow = ref(false)
+const statusColumn = [
+    { key: 'key1', name: '月份', align: 'center' },
+    { key: 'key2', name: '工作计划', align: 'center' },
+    { key: 'key3', name: '当月重大进度', align: 'center' },
+    { key: 'key4', name: '累计完成情况', align: 'center' },
+    { key: 'key5', name: '工程总体形象进度(%)', align: 'center' },
+]
+const statusData = ref([
+    { key1:'1月' }, { key1:'2月' }, { key1:'3月' }, { key1:'4月' }, { key1:'5月' }, { key1:'6月' },
+    { key1:'7月' }, { key1:'8月' }, { key1:'9月' }, { key1:'10月' }, { key1:'11月' }, { key1:'12月' },
+])
+const projectStatus = (row) => {
+    console.log(row)
+    isStatusShow.value = true
+}
+
+//关闭弹窗
+const statusClose = () => {
+    isStatusShow.value = false
+}
 </script>
 
 <style lang="scss">
@@ -640,4 +680,10 @@ const changePlanRatio = (val, row, index)=>{
         }
     }
 }
+.project-status-dialog .hc-card-item-box {
+    background: #f8f8f8;
+    .hc-card-item-header {
+        color: #101010;
+    }
+}
 </style>