项目详情

web/src/api/project.js

@@ -20,3 +20,22 @@ export const createProject = (data) => {
   })
 }
 
+// 项目数据总览
+export const projectDataScreen = () => {
+  return service({
+    url: '/project/queryProjectsInfo',
+    method: 'GET'
+  })
+}
+
+// 获取项目信息
+export const getProjectMessage = (code) => {
+  return service({
+    url: '/project/queryProjectByCode',
+    method: 'GET',
+    params: {
+      code: code
+    }
+  })
+}
+

web/src/view/projectManage/projectApproval/projectApproval.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-        style="height: 300px"
-        class="bg-white"
+      style="height: 300px"
+      class="bg-white"
     >
       <div class="basicInformation">
         <div style="padding-top: 10px;margin-left: 90px">
@@ -10,82 +10,82 @@
         </div>
         <div style="display: flex;align-items: center">
           <el-text
-              style="margin-left: 10px"
-              size="large"
-              tag="b"
+            style="margin-left: 10px"
+            size="large"
+            tag="b"
           >项目基本信息</el-text>
         </div>
       </div>
       <el-form>
         <el-row
-            style="margin:20px 0 0 90px;height: 50px"
-            align="middle"
+          style="margin:20px 0 0 90px;height: 50px"
+          align="middle"
         >
           <el-col :span="5">
             <el-form-item
-                label="项目名称："
-                size="large"
-                prop="name"
+              label="项目名称："
+              size="large"
+              prop="name"
             >
               <el-input
-                  v-model="basicMessage.name"
-                  placeholder="请输入项目名称"
-                  size="large"
+                v-model="basicMessage.name"
+                placeholder="请输入项目名称"
+                size="large"
               />
             </el-form-item>
           </el-col>
           <el-col
-              :span="5"
-              :offset="2"
+            :span="5"
+            :offset="2"
           >
             <el-form-item
-                label="负责人："
-                size="large"
-                prop="principal"
+              label="负责人："
+              size="large"
+              prop="principal"
             >
               <el-select
-                  v-model="responsible"
-                  placeholder="请选择负责人"
-                  @change="headSelect"
+                v-model="basicMessage.principal"
+                placeholder="请选择负责人"
+                @change="headSelect"
               >
                 <el-option
-                    v-for="item in userList"
-                    :key="item.ID"
-                    :label="item.nickName"
-                    :value="item.nickName"
+                  v-for="item in userList"
+                  :key="item.ID"
+                  :label="item.nickName"
+                  :value="item.nickName"
                 />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col
-              :span="5"
-              :offset="2"
+            :span="5"
+            :offset="2"
           >
             <el-form-item
-                label="相关客户："
-                size="large"
-                prop="customer"
+              label="相关客户："
+              size="large"
+              prop="customer"
             >
               <el-input
-                  v-model="basicMessage.customer"
-                  placeholder="请输入项目相关客户"
-                  size="large"
+                v-model="basicMessage.customer"
+                placeholder="请输入项目相关客户"
+                size="large"
               />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row
-            style="margin:20px 0 0 90px;height: 50px"
-            align="middle"
+          style="margin:20px 0 0 90px;height: 50px"
+          align="middle"
         >
           <el-col :span="5">
             <el-form-item
-                label="紧急程度："
-                size="large"
+              label="紧急程度："
+              size="large"
             >
               <el-radio-group
-                  v-model="basicMessage.level"
-                  @change="changeUrgency"
+                v-model="basicMessage.level"
+                @change="changeUrgency"
               >
                 <el-radio :value="1">正常</el-radio>
                 <el-radio :value="2">重要</el-radio>
@@ -94,32 +94,32 @@
             </el-form-item>
           </el-col>
           <el-col
-              :span="6"
-              :offset="2"
+            :span="6"
+            :offset="2"
           >
             <el-form-item
-                label="项目金额："
-                size="large"
+              label="项目金额："
+              size="large"
             >
               <el-input
-                  v-model="basicMessage.price"
-                  style="max-width: 600px"
-                  placeholder="请输入项目的具体金额"
-                  class="input-with-select"
+                v-model="projectAmount"
+                style="max-width: 600px"
+                placeholder="请输入项目的具体金额"
+                class="input-with-select"
               >
                 <template #append>
                   <el-select
-                      v-model="amountUnit"
-                      placeholder="元"
-                      style="width: 100px"
+                    v-model="amountUnit"
+                    placeholder="元"
+                    style="width: 100px"
                   >
                     <el-option
-                        label="元"
-                        :value="1"
+                      label="元"
+                      :value="1"
                     />
                     <el-option
-                        label="万元"
-                        :value="2"
+                      label="万元"
+                      :value="2"
                     />
                   </el-select>
                 </template>
@@ -128,19 +128,19 @@
           </el-col>
         </el-row>
         <el-row
-            style="margin:20px 0 0 90px;height: 70px"
+          style="margin:20px 0 0 90px;height: 70px"
         >
           <el-col :span="19">
             <el-form-item
-                label="项目说明："
-                size="large"
+              label="项目说明："
+              size="large"
             >
               <el-input
-                  v-model="basicMessage.illustrate"
-                  type="textarea"
-                  placeholder="项目说明"
-                  :rows="3"
-                  size="large"
+                v-model="basicMessage.illustrate"
+                type="textarea"
+                placeholder="项目说明"
+                :rows="3"
+                size="large"
               />
             </el-form-item>
           </el-col>
@@ -148,8 +148,8 @@
       </el-form>
     </div>
     <div
-        style="height: 400px;margin-top: 20px"
-        class="bg-white"
+      style="height: 400px;margin-top: 20px"
+      class="bg-white"
     >
       <div class="basicInformation">
         <div style="padding-top: 10px;margin-left: 90px">
@@ -157,22 +157,22 @@
         </div>
         <div style="display: flex;align-items: center">
           <el-text
-              style="margin-left: 10px"
-              size="large"
-              tag="b"
+            style="margin-left: 10px"
+            size="large"
+            tag="b"
           >项目附属文件</el-text>
         </div>
       </div>
       <el-row style="margin:20px 0 0 90px;">
         <el-col :span="15">
           <el-upload
-              class="upload-demo"
-              drag
-              multiple
-              :auto-upload="false"
-              :file-list="fileListData"
-              :on-change="changeFileData"
-              :on-remove="removeFileData"
+            class="upload-demo"
+            drag
+            multiple
+            :auto-upload="false"
+            :file-list="fileListData"
+            :on-change="changeFileData"
+            :on-remove="removeFileData"
           >
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">
@@ -186,14 +186,14 @@
           </el-upload>
         </el-col>
         <el-col
-            :span="4"
-            :offset="1"
+          :span="4"
+          :offset="1"
         >
           <el-button
-              icon="Collection"
-              size="large"
-              type="primary"
-              @click="approval"
+            icon="Collection"
+            size="large"
+            type="primary"
+            @click="approval"
           >项目立项</el-button>
         </el-col>
       </el-row>
@@ -207,6 +207,7 @@ import sign from '@/assets/sign.png'
 import moment from 'moment/moment'
 import { createProject } from '@/api/project'
 import { getAllUsers } from '@/api/user'
+import { ElMessage } from 'element-plus'
 defineOptions({
   name: 'ProjectApproval'
 })
@@ -219,15 +220,16 @@ defineOptions({
 // 项目基本信息
 const basicMessage = reactive({
   code: '',
-  name: '',
+  name: '智慧路口',
   principal: '',
   price: 0,
   level: 1,
-  customer: '',
-  illustrate: '',
+  customer: '交通局',
+  illustrate: '智慧路口项目',
   progress: 0,
   state: 1
 })
+const projectAmount = ref('')
 // 项目用户列表
 const userList = reactive([])
 getAllUsers().then(res => {
@@ -235,28 +237,21 @@ getAllUsers().then(res => {
     userList.push(...res.data)
   }
 })
-// 选择的责任人
-const responsible = ref('')
 // 项目文件列表
-let fileListData = reactive([])
+const fileListData = ref([])
 // 金额单位
 const amountUnit = ref('元')
 // 修改负责人
 const headSelect = (value) => {
-  responsible.value = value
-  userList.forEach(item => {
-    if (value === item.nickName) {
-      basicMessage.principal = item.ID
-    }
-  })
+  basicMessage.principal = value
 }
 // 修改文件数据
 const changeFileData = (file, fileList) => {
-  fileListData.push(...fileList)
+  fileListData.value = fileList
   console.log(fileListData)
 }
 const removeFileData = (file, fileList) => {
-  fileListData = fileList
+  fileListData.value = fileList
   console.log(fileListData)
 }
 // 项目紧急程度
@@ -265,24 +260,39 @@ function changeUrgency(value) {
 }
 // 项目立项
 const approval = () => {
+  if (fileListData.value.length === 0) {
+    return ElMessage.warning('请选取文件后再上传')
+  }
   const basic = basicMessage
   basic.code = 'LCZM' + createCode()
   if (amountUnit.value === '万元') {
-    basic.price = parseInt(basic.price) * 10000
+    basic.price = parseInt(projectAmount.value) * 10000
+  } else {
+    basic.price = parseInt(projectAmount.value)
   }
   const formData = new FormData()
   const json = JSON.stringify(basic)
-  console.log(typeof basic)
-  formData.append('file', fileListData)
+  fileListData.value.forEach(item => {
+    formData.append('file', item.raw)
+  })
   formData.append('project', json)
-  console.log(formData.get('project'))
   createProject(formData).then(res => {
     console.log(res)
+    if (res.code === 0) {
+      ElMessage({
+        message: '立项成功',
+        type: 'success',
+      })
+    } else {
+      ElMessage({
+        message: '立项失败',
+        type: 'error',
+      })
+    }
   })
 }
 
 const createCode = () => {
-  console.log(moment().format('YYYYMMDDHHmm'))
   return moment().format('YYYYMMDDHHmm')
 }
 </script>

web/src/view/projectManage/projectDetails/projectDetails.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
-
+    <div class="w-20 h-20 bg-white">
+      项目详情
+    </div>
   </div>
 </template>
 
 <script setup>
+import { getProjectMessage } from '@/api/project'
 defineOptions({
   name: 'projectDetails'
 })
+getProjectMessage().then(res => {
+  console.log(res)
+})
 </script>
 
 <style scoped>

web/src/view/projectManage/projectList/projectList.vue

@@ -7,50 +7,135 @@
         </el-form-item>
       </el-col>
       <el-col
-          :span="4"
-          :offset="1"
+        :span="4"
+        :offset="1"
       >
         <el-form-item label="立项时间">
           <el-date-picker
-              v-model="approvalTime"
-              type="month"
-              placeholder="请选择立项时间"
+            v-model="approvalTime"
+            type="month"
+            placeholder="请选择立项时间"
           />
         </el-form-item>
       </el-col>
       <el-col
-          :span="4"
-          :offset="1"
+        :span="4"
+        :offset="1"
       >
         <el-form-item label="项目状态">
           <el-select />
         </el-form-item>
       </el-col>
       <el-col
-          :span="2"
-          :offset="1"
+        :span="2"
+        :offset="1"
       >
         <el-button
-            type="primary"
-            :icon="Search"
-            @click="initializedData"
+          type="primary"
+          :icon="Search"
+          @click="initializedData"
         >查询</el-button>
       </el-col>
+      <el-col
+        :span="2"
+      >
+        <el-button
+          type="primary"
+          :icon="DocumentCopy"
+          @click="initializedData"
+        >立项</el-button>
+      </el-col>
     </el-row>
     <el-row>
       <el-col :span="23">
         <el-row justify="space-between">
           <el-col :span="5">
-            <div class="bg-white h-24" />
+            <div class="bg-white h-24">
+              <el-row
+                style="height: 40%"
+                align="middle"
+              >
+                <el-col :offset="2">
+                  <el-text
+                    style="font-family: 黑体;"
+                  >项目总数</el-text>
+                </el-col>
+              </el-row>
+              <el-row
+                style="height: 60%"
+                align="middle"
+              >
+                <el-col :offset="2">
+                  <span class="dataStyle">{{ screenData.totalProject }}</span>
+                </el-col>
+              </el-row>
+            </div>
           </el-col>
           <el-col :span="5">
-            <div class="bg-white h-24" />
+            <div class="bg-white h-24">
+              <el-row
+                  style="height: 40%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <el-text
+                      style="font-family: 黑体;"
+                  >执行中项目</el-text>
+                </el-col>
+              </el-row>
+              <el-row
+                  style="height: 60%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <span class="dataStyle">{{ screenData.unCompleteProject }}</span>
+                </el-col>
+              </el-row>
+            </div>
           </el-col>
           <el-col :span="5">
-            <div class="bg-white h-24" />
+            <div class="bg-white h-24">
+              <el-row
+                  style="height: 40%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <el-text
+                      style="font-family: 黑体;"
+                  >已完成项目</el-text>
+                </el-col>
+              </el-row>
+              <el-row
+                  style="height: 60%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <span class="dataStyle">{{ screenData.completeProject }}</span>
+                </el-col>
+              </el-row>
+            </div>
           </el-col>
           <el-col :span="5">
-            <div class="bg-white h-24" />
+            <div class="bg-white h-24">
+              <el-row
+                  style="height: 40%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <el-text
+                      style="font-family: 黑体;"
+                  >项目总金额</el-text>
+                </el-col>
+              </el-row>
+              <el-row
+                  style="height: 60%"
+                  align="middle"
+              >
+                <el-col :offset="2">
+                  <span class="dataStyle">{{ screenData.sum }}元</span>
+                </el-col>
+              </el-row>
+            </div>
           </el-col>
         </el-row>
       </el-col>
@@ -58,62 +143,77 @@
     <el-form>
       <el-row style="margin-top: 20px;">
         <el-col
-            :span="23"
+          :span="23"
         >
           <el-table
-              :data="projectListData"
-              height="580"
+            :data="projectListData"
+            height="580"
           >
             <el-table-column
-                prop="code"
-                label="项目编码"
-                align="center"
+              prop="code"
+              label="项目编码"
+              align="center"
             />
             <el-table-column
-                prop="name"
-                label="项目名称"
-                align="center"
+              prop="name"
+              label="项目名称"
+              align="center"
             />
             <el-table-column
-                prop="principal"
-                label="项目负责人"
-                align="center"
+              prop="principal"
+              label="项目负责人"
+              align="center"
             />
             <el-table-column
-                prop="price"
-                label="项目金额"
-                align="center"
+              prop="price"
+              label="项目金额"
+              align="center"
             />
             <el-table-column
-                prop="CreatedAt"
-                label="立项日期"
-                align="center"
+              prop="CreatedAt"
+              label="立项日期"
+              align="center"
             />
             <el-table-column
-                prop="progress"
-                label="项目进度"
-                align="center"
+              prop="state"
+              label="状态"
+              align="center"
             />
             <el-table-column
-                prop="state"
-                label="状态"
-                align="center"
-            />
+              label="项目操作"
+              align="center"
+            >
+              <template #default="scope">
+                <el-button
+                  size="small"
+                  @click="projectEdit(scope.$index, scope.row)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="projectDelete(scope.$index, scope.row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
           </el-table>
         </el-col>
       </el-row>
     </el-form>
     <el-row>
       <el-col
-          :span="23"
-          style="display: flex;justify-content: end"
+        :span="23"
+        style="display: flex;justify-content: end"
       >
         <el-pagination
-            :page-size="10"
-            background
-            layout="prev, pager, next"
-            :total="1000"
-            @change="changePage"
+          :page-size="10"
+          background
+          layout="prev, pager, next"
+          :total="listTotal"
+          @change="changePage"
         />
       </el-col>
     </el-row>
@@ -121,29 +221,14 @@
 </template>
 
 <script setup>
-import { Search } from '@element-plus/icons-vue'
-import { getProjectList } from '@/api/project'
-import { reactive, ref } from 'vue'
+import { DocumentCopy, Search } from '@element-plus/icons-vue'
+import { getProjectList, projectDataScreen } from '@/api/project'
+import { reactive, ref, onMounted } from 'vue'
 
 defineOptions({
   name: 'ProjectList'
 })
-// const listData = [
-//   {
-//     ID: 6,
-//     CreatedAt: '2024-07-09',
-//     UpdatedAt: '2024-07-09T16:47:37.586+08:00',
-//     code: 'LCZH202407091518',
-//     name: '路灯局',
-//     principal: 1,
-//     price: '200000',
-//     illustrate: 'non',
-//     source: '内部',
-//     progress: 20,
-//     state: 1,
-//     files: null
-//   }
-// ]
+const screenData = reactive({})
 const approvalTime = ref('')
 const projectListData = reactive([])
 const listTotal = ref(0)
@@ -156,6 +241,32 @@ const data = {
   time: '',
   state: 0
 }
+const projectEdit = (index, row) => {
+}
+const projectDelete = (index, row) => {
+}
+// 项目数据总览
+onMounted(() => {
+  projectDataScreen().then(res => {
+    console.log(res.data)
+    const obj = res.data
+    Object.keys(obj).forEach(key => {
+      screenData[key] = obj[key]
+    })
+  })
+  // 获取项目列表
+  getProjectList(data).then(res => {
+    if (res.code === 0 && res.data.total > 0) {
+      const list = res.data.list
+      list.forEach(item => {
+        item.CreatedAt = formatDate(item.CreatedAt)
+        item.state = projectState(item.state)
+      })
+      projectListData.push(...list)
+      listTotal.value = res.data.total
+    }
+  })
+})
 function formatDate(dateString, locale = 'en-US', timezone = 'Asia/Shanghai') {
   // 使用 Date 构造函数解析日期字符串
   const date = new Date(dateString)
@@ -171,26 +282,27 @@ function formatDate(dateString, locale = 'en-US', timezone = 'Asia/Shanghai') {
 
   return formattedDate
 }
-
-getProjectList(data).then(res => {
-  if (res.code === 0 && res.data.total > 0) {
-    const list = res.data.list
-    list.forEach(item => {
-      item.CreatedAt = formatDate(item.CreatedAt)
-    })
-    projectListData.push(...list)
-    listTotal.value = res.data.total
+const projectState = (state) => {
+  const obj = {
+    1: '立项',
+    2: '施工',
+    3: '收款',
+    4: '完成',
+    5: '失效'
   }
-})
-function initializedData() {
-
+  return obj[state]
 }
-
-function changePage(value) {
+const initializedData = () => {
+  console.log(screenData.totalProject)
+}
+const changePage = (value) => {
   console.log(value)
 }
 </script>
 
 <style scoped lang="less">
-
+  .dataStyle{
+    font-size: 25px;
+    font-weight: 500;
+  }
 </style>