lc_finance/web/src/view/finance/financeAnalysis/financeAnalysis.vue

<template>
  <div>
    <el-row
      class="bg-white"
      style="height: 80px"
      align="middle"
    >
      <el-col
        :span="4"
        class="flex justify-center"
      >
        <span class="analysisTitle">收支分析</span>
      </el-col>
      <el-col :span="13">
        <el-row>
          <el-col :span="10">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectMessage.name }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目名称</el-text>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectAmount }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目金额</el-text>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectMessage.name }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目收款</el-text>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col
        :span="3"
        :offset="4"
        class="flex justify-center"
      >
        <el-button
          text
          :icon="Menu"
          size="large"
          style="font-size: 18px"
          @click="listShow = true"
        >
          项目列表
        </el-button>
      </el-col>
    </el-row>
    <el-row
      class="mt-5"
      style="height: 150px"
      justify="space-between"
    >
      <el-col
        :span="4"
        class="bg-white"
      >
        <el-row
          style="height: 100px"
          align="middle"
        >
          <el-col
            :span="13"
            :offset="1"
          >
            <el-text>项目收款</el-text>
          </el-col>
          <el-col
            :span="9"
            class="flex justify-center"
          >
            <el-image
              :src="iconCollection"
              class="iconStyle"
            />
          </el-col>
        </el-row>
        <el-row
          style="height: 50px"
          align="middle"
        >
          <el-col
            :span="4"
            :offset="1"
          >
            <el-image
              :src="iconAmount"
              class="countIcon"
            />
          </el-col>
        </el-row>
      </el-col>
      <el-col
        :span="4"
        class="bg-white"
      />
      <el-col
        :span="4"
        class="bg-white"
      />
      <el-col
        :span="4"
        class="bg-white"
      />
      <el-col
        :span="4"
        class="bg-white"
      />
    </el-row>
    <el-row
      class="bg-white mt-5"
      style="height: 540px"
    >
      <el-col
        :span="20"
        class="ml-10"
      >
        <el-tabs
          v-model="listSort"
          class="demo-tabs"
          @tab-click="changeSort"
        >
          <el-tab-pane
            label="实施工时"
            :name="1"
          >
            <Hour />
          </el-tab-pane>
          <el-tab-pane
            label="费用报销"
            :name="2"
          >Config</el-tab-pane>
          <el-tab-pane
            label="项目收款"
            :name="3"
          >
            <payment />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-drawer
      v-model="listShow"
      direction="ltr"
      title="项目列表"
      size="25%"
    >
      <el-form @submit.prevent>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-input
                v-model="condition.name"
                :suffix-icon="Search"
                placeholder="请输入项目名称"
                size="large"
                clearable
                @keyup.enter="nameSearch"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-for="item in listData"
          :key="item.ID"
          style="height: 80px"
          align="middle"
        >
          <el-col :span="17">
            <el-row style="height: 45px">
              <el-text
                size="large"
                :line-clamp="1"
                tag="b"
              >{{ item.name }}</el-text>
            </el-row>
            <el-row style="height: 35px">
              <el-text :line-clamp="1">
                负责人：{{ item.principal }}
              </el-text>
            </el-row>
          </el-col>
          <el-col
            :span="7"
            class="flex justify-center"
          >
            <el-button
              :type="buttonType(item.state)"
              round
              size="large"
              @click="incomeExpenses(item.code)"
            >收支信息</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-pagination
        v-show="projectTotal > 8"
        v-model:current-page="condition.pageInfo.page"
        background
        layout="prev, pager, next"
        :total="projectTotal"
        :page-size="8"
        @change="changePage"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { Menu, Search } from '@element-plus/icons-vue'
import { ref, onMounted, reactive, computed } from 'vue'
import { getProjectList, getProjectMessage, queryProjectExpense } from '@/api/project'
import { collectionOperate } from '@/pinia/collection/Collection'
import iconCollection from '@/assets/Collection.png'
import iconAmount from '@/assets/amount.png'
import Hour from '../components/hour.vue'
import Payment from '../components/payment.vue'
import { hourOperate } from '@/pinia/hour/Hour'
defineOptions({
  name: 'FinanceAnalysis'
})
// 数据
const payment = collectionOperate()
const listShow = ref(false)
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  name: '',
  time: '',
  state: 0
})
const listData = reactive([])
const projectTotal = ref(0)
const projectMessage = reactive({})
const listSort = ref(1)
const hour = hourOperate()

// 计算属性
const buttonType = computed(() => (state) => {
  const obj = {
    1: 'info',
    2: 'warning',
    3: 'primary',
    4: 'success',
    5: 'danger',
  }
  return obj[state]
})

const projectAmount = computed(() => {
  const price = ref(parseInt(projectMessage.price))
  // const price = ref(4892703)
  if (price.value < 10000) {
    return price.value + '元'
  } else {
    const tenThousand = (price.value / 10000).toFixed(4)
    return parseFloat(tenThousand) + '万元'
  }
})
// 方法
onMounted(() => {
  projectList(condition)
})
const projectList = (condition) => {
  listData.length = 0
  getProjectList(condition).then(res => {
    if (res.code === 0) {
      const list = res.data.list
      projectTotal.value = res.data.total
      listData.push(...list)
      hour.getTimeList(list[0].code)
      payment.changePaymentCode(list[0].code)
      queryProjectExpense(list[0].code).then(res => {
        if (res.code === 0) {
          payment.changePaymentList(res.data.collection)
        }
      })
      getProjectMessage(list[0].code).then(res => {
        if (res.code === 0) {
          Object.assign(projectMessage, res.data)
        }
      })
    }
  })
}
const nameSearch = () => {
  condition.pageInfo.page = 1
  console.log(condition)
  projectList(condition)
}
const changePage = (page) => {
  const search = condition
  search.pageInfo.page = page
  console.log(search)
  projectList(search)
}

const changeSort = () => {}

const incomeExpenses = (code) => {}

</script>

<style lang="scss" scoped>
  .analysisTitle{
    font-size: 20px;
    font-weight: 520;
  }
  .iconStyle{
    width: 70px;
    height: 80px;
  }
  .countIcon{
    width: 28px;
    height: 28px;
  }
</style>