zhaoshangyinzi/ruoyi-ui/src/views/statistical/putProduction/index.vue

<template>
  <div class="in_box">
    <el-row>
      <el-col :span="18">
        <div class="in_left">
          <div class="toReviewed">
            <el-table v-loading="loading" style="max-height: 695px;overflow-y: auto;" :data="infoList">
              <el-table-column label="项目名称" align="center" prop="name" />
              <el-table-column label="时间" align="center" prop="createTime" />
              <el-table-column label="操作" width="280" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" style="background: #F5A40C;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:query']"
                    @click="dec_btn(scope.row)">查看详情</el-button>
                 <!-- <el-button size="mini" type="text" style="background: #0669B2;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']"
                    @click="infoBtn(scope.row)" v-if="scope.row.projectStatus%2==1">提交</el-button>
                  <el-button size="mini" type="text" style="background: #DE1939;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']"
                    @click="bh_brn(scope.row)">销号</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="exl_box">
            <div class="exl_title">
              <span></span>
              <el-date-picker v-model="lb_value" style="width: 100px;" type="year" value-format="yyyy" @change="picher_fn"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <echarts :ehaersList="ehaersList" :echartData="echartData" v-if="flags"></echarts>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="padding: 24px 12px 24px 0 ;">
        <div class="in_right">
          <div class="rig_title">
            "两区"及乡镇
          </div>
          <div class="rig_tab_top">
            <div class="rig_tab_item">
              单位名称
            </div>
            <div class="rig_tab_item">
              入规目标
            </div>
            <div class="rig_tab_item">
              已完成任务
            </div>
          </div>
          <div class="rig_cont">
            <div class="rig_items" v-for="(item,index) in unitList" :key="index">
              <span>{{item.deptName}}</span>
              <span>{{item.targetSigningNum == '0.0000'?item.targetSigningNum:0}}个</span>
              <span>{{item.successMission?item.successMission:0}}个</span>
            </div>
          </div>
        </div>
        <div class="rig_tab_top" style="background-color: #1C84C6;">
          <div class="rig_title">
          市直榜单
          </div>
          <div class="rig_tab_top">
            <div class="rig_tab_item">
              单位名称
            </div>
            <div class="rig_tab_item">
              实际到资
            </div>
            <div class="rig_tab_item">
              投产项目
            </div>
          </div>
          <div class="rig_cont">
            <div class="rig_items" v-for="(item,index) in cityList" :key="index">
              <span>{{item.deptName}}</span>
              <span>{{item.payForMoney != '0.0000'?item.payForMoney:0}}万元</span>
              <span>{{item.successMission?item.successMission:0}}个</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from '@/components/Echarts/index.vue'
  import {
    getStatisticst,
    delProject,
    toBeReviewedList,
    setExamine,
    setReject,
    setInvestmentList,
    getProjectInvestmentEharts, setInvestmentCityList
  } from '@/api/statistical'
  export default {
    data() {
      return {
        infoList: [],
        zjList: [],
        ehaersList: {},
        echartData: {
          name: '投产项目个数柱状图',
          numName: '投产项目个数',
          numNameArr: ['投产项目个数']
        },
        loading: false,
        unitList: [],
        cityList: [],
        flags: false,
        lb_value: '2021', // 柱状图类别
      }
    },
    components: {
      echarts
    },
    mounted() {
      this.getList()
      this.bd_btn()
      this.eharts_fn()
      this.city_btn()
    },
    methods: {
      picher_fn() {
        this.eharts_fn()
      },
      eharts_fn(val) {
        getProjectInvestmentEharts({
          year: this.lb_value
        }).then(res => {
          this.ehaersList = res.data
          this.flags = true
        })
      },
      bd_btn() {
        setInvestmentList().then(res => {
          this.unitList = res.rows
        })
      },
      city_btn() {
        setInvestmentCityList().then(res => {
          this.cityList = res.rows
        })
      },
      dec_btn(row) {
        this.$router.push({
          path: '/management/row/index',
          query: {
            setid: row.id,
            setrd: row.projectStatus,
            tabIndex: 4,
          },
        })
      },
      bh_brn(scope) {
        const _this =  this
        this.$confirm('是否确认销号', "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          delProject(scope.id).then(() => {
            _this.getList();
            _this.msgSuccess("提交成功");
          })
        })
      },
      infoBtn(scope) {
        const _this = this
        this.$confirm('是否确认提交申请', "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          setExamine({
            code: 1,
            bmProjectId: scope.id
          });
        }).then(() => {
          _this.getList();
          _this.msgSuccess("提交成功");
        })
      },
      getList() {
        getStatisticst('8,9').then(res => {
          this.infoList = res.rows
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .rig_tab_top {
    display: flex;
    background: #6DCEF6;
    line-height: 36px;
    color: #fff;

    .rig_tab_item {
      font-size: 14px;
      flex: 1;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .rig_cont {
    border: 1px solid #CDCDCD;
    box-sizing: border-box;
    margin-bottom: 31px;
    max-height: 270px;
    overflow-y: auto;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .rig_items {
      line-height: 36px;
      color: #343434;
      font-size: 12px;
      display: flex;

      span {
        flex: 1;
        text-align: center;
      }
    }
  }

  .in_right {
    padding: 15px 15px 0;
    border: 1px solid #DADADA;
    box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);

    .rig_title {
      color: #1C84C6;
      font-size: 18px;
      line-height: 36px;
      margin-bottom: 15px;
    }
  }

  .in_left {
    padding: 24px 20px 40px;

    .toReviewed {
      padding: 19px 16px;
      border: 1px solid #DADADA;
      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
      margin-bottom: 38px;

      .rev_title {
        margin-bottom: 23px;
      }
    }

    .exl_box {
      border: 1px solid #DADADA;
      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
      padding: 20px;
      box-sizing: border-box;

      .exl_title {
        display: flex;
        justify-content: space-between;

        span {
          color: #1C84C6;
          font-size: 18px;
          line-height: 36px;
        }

      }
    }
  }
</style>