wt_project_web_bak/src/views/invest/components/years.vue

<template>
  <div class="flex flex-center flex-col">
    <div class="full-width">
      <basic-tab
        :tabs="tabs"
        :full="true"
        @change="change"
        style="width: 99%"
      />
    </div>
    <el-row class="flex flex-center full-width mt-10 flex-wrap">
      <el-col :span="12" v-for="i in dash" :key="i">
        <div class="box" :style="`box-shadow: ` + i.box">
          <div class="flex flex-col bold font-16 padding-14">
            <div class="flex flex-justify-start flex-align-end">
              <img :src="i.icon" />
              <span class="grey-6 ml-5">{{ i.name }}</span>
              <span v-if="i.index !== 2" class="font-12 grey-6 ml-10"
                >万元</span
              >
            </div>
            <div
              v-if="i.index !== 2"
              class="flex flex-align-end flex-justify-start mt-10"
            >
              <span class="grey" style="margin-left: 3px">￥</span>
              <span class="ml-5 font-24" :style="`color:` + i.color">{{
                info[i.prop] ? info[i.prop].toLocaleString() : '0'
              }}</span>
              <el-icon
                :size="15"
                v-if="
                  (i.index === 0 && user.info.viewStage === 1) ||
                  (i.index === 0 &&
                    permissions.vaildPermission('edit_plan_amount'))
                "
                class="ml-10 pointer"
                @click="edit(i)"
              >
                <Edit />
              </el-icon>
            </div>
            <div v-else class="flex flex-justify-start flex-center full-width">
              <div class="progress-bar mt-10">
                <div
                  v-if="info[i.prop]"
                  class="bar full-height"
                  :style="
                    `width: ` +
                    (Number.parseFloat(info[i.prop].replace('%', '')) > 100
                      ? '100%'
                      : info[i.prop])
                  "
                ></div>
              </div>
              <span class="ml-10 font-24 mt-10" :style="`color:` + i.color">{{
                info[i.prop]
              }}</span>
            </div>
          </div>
          <div style="margin-top: -20px">
            <wave :color="i.color" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import basicTab from '@/components/basic-tab/index.vue'
import wave from '@/views/invest/components/wave.vue'
import { useStore } from '@/store/user.js'
import { ElMessageBox } from 'element-plus'
import index from '@/views/task/index.vue'
import permissionStore from '@/store/permission.js'

export default {
  name: 'years',
  computed: {
    index() {
      return index
    }
  },
  components: { basicTab, wave },
  setup() {
    const user = useStore()
    const permissions = permissionStore()
    return { user, permissions }
  },
  props: {
    deptId: {
      type: String,
      default: ''
    },
    year: {
      type: String,
      default: ''
    }
  },
  watch: {
    deptId: {
      handler(val) {
        this.load()
      },
      immediate: true
    },
    year: {
      handler(val) {
        this.load()
      },
      immediate: true
    }
  },
  data() {
    return {
      times: [],
      info: {},
      tabs: [
        { name: '总览', value: 0 },
        { name: '一季度', value: 1 },
        { name: '二季度', value: 2 },
        { name: '三季度', value: 3 },
        { name: '四季度', value: 4 }
      ],
      quarter: '',
      dash: [
        {
          icon: new URL('../../../assets/svg/invest/1.svg', import.meta.url)
            .href,
          name: '责任目标',
          value: 0,
          prop: 'plan_complete_amount',
          box: '0 1px 10px 0 rgba(105, 204, 243, 0.3)',
          color: '#32B5F3',
          index: 0,
          background: new URL(
            '../../../assets/svg/invest/bg1.svg',
            import.meta.url
          ).href
        },
        {
          icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url)
            .href,
          name: '累计完成投资',
          value: 0,
          prop: 'total_complete_amount',
          box: '0 1px 10px 0 rgba(200, 150, 230, 0.3)',
          color: '#AD46CB',
          index: 1
        },
        {
          icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url)
            .href,
          name: '投资完成比例',
          value: 0,
          prop: 'rate',
          box: '0 1px 10px 0 rgba(236, 171, 83, 0.3)',
          color: '#EC9040',
          index: 2
        },
        {
          icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url)
            .href,
          name: '累计纳统投资',
          value: 0,
          prop: 'total_investment_amount',
          box: '0 1px 10px 0 rgba(119, 94, 241, 0.3)',
          color: '#4F5EE7',
          index: 3
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    load() {
      this.tabs[0].name = this.year + '年总览'
      this.$api.invest
        .homeInvest({
          deptId: this.deptId === null ? '' : this.deptId,
          year: this.year === null ? '' : this.year,
          quarter: this.quarter
        })
        .then(res => {
          if (res.code === 200) {
            this.info = res.data
          }
        })
    },
    init() {
      const year = new Date().getFullYear()
      this.tabs[0].name = year + '年总览'
    },
    change(index) {
      this.quarter = index.value === 0 ? '' : index.value
      this.$emit('change', index)
      this.load()
    },
    edit(item) {
      ElMessageBox.prompt(
        '当前责任目标为' +
          this.info[item.prop].toLocaleString() +
          '万元，请输入新的责任目标(数字，小数点)',
        '提示',
        {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          inputPattern: /^([1-9]\d*|0)(\.\d+)?$/,
          inputErrorMessage: '信息错误'
        }
      ).then(({ value }) => {
        let data = {}
        switch (this.quarter) {
          case 0: // 年度
            data = { number: value }
            break
          case 1: // 1季度
            data = { number: value, type: 1 }
            break
          case 2: // 2季度
            data = { number: value, type: 2 }
            break
          case 3: // 3季度
            data = { number: value, type: 3 }
            break
          case 4: // 4季度
            data = { number: value, type: 4 }
            break
          default:
            data = { number: value }
            break
        }
        this.$api.invest
          .savePlan(
            Object.assign(
              {
                deptId: this.deptId === null ? '' : this.deptId,
                year: this.year === null ? '' : this.year
              },
              data
            )
          )
          .then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.info[item.prop] = value
            } else {
              this.$message.error(res.msg)
            }
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-image: url('@/assets/svg/invest/wave/1.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box {
  min-width: 280px;
  border-radius: 8px;
  min-height: 115px;
  margin: 20px;
  background-color: #f6f9fd;
}

.progress-bar {
  width: 60%;
  height: 10px;
  background: white;
  border-radius: 10px;
  margin-left: 5px;
  border: 1px solid #f8b65f;
}

.bar {
  background: #f8b65f;
  border-radius: 10px;
}
</style>