首页/物品分发/物品报废

liuguocan

2023-11-28 ed2117c738eedd3143d3b2ad6b0d40b2116afcf6

 admin-web/src/views/dashboard/index.vue

@@ -1,212 +1,112 @@
<template>
  <div class="content">
<!--    <el-row :gutter="10">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/qbgd.png"></img>
                <span>全部工单</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">20<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/gdc.png"></img>
                <span>工单池</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">2<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/gdc.png"></img>
                <span>待响应工单</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">1<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span class="font-18 font-bold">待办名称</span>
          </div>
          <div class="f-r f-r-between m-b-10">
            <el-radio-group v-model="waitType" size="medium">
              <el-radio-button label="1">全部</el-radio-button>
            </el-radio-group>
            <div class="to-more" @click="nav('/stock/transfer/transferissue')">查看更多 ></div>
          </div>
          <el-table :data="waitWorkData" class="top-tb" :show-header="false" size="medium">
            <el-table-column prop="number" align="center"></el-table-column>
            <el-table-column prop="type" align="center" width="100"></el-table-column>
            <el-table-column prop="orgName" align="center" width="100"></el-table-column>
            <el-table-column prop="name" align="center" width="80"></el-table-column>
            <el-table-column prop="createTime" align="center" width="180">
              <template slot-scope="scope">
                <span class="font-14 color-333">{{ formattTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="aduitThis(scope.row.id)" size="small" type="primary">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/jxzgd.png"></img>
                <span>进行中工单</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">3<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/gdc.png"></img>
                <span>事件池</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">{{eventInfo.pool}}<span class="font-12">个</span> </div>
                <div>
                  <img v-if="eventInfo.poolLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img>
                  <img  v-if="eventInfo.poolLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img>
                  环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/dxy.png"></img>
                <span>进行中事件</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">{{eventInfo.wait}}<span class="font-12">个</span> </div>
                <div>
                  <img v-if="eventInfo.waitLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img>
                  <img  v-if="eventInfo.waitLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img>
                  环比上周</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span class="font-18 font-bold">预警通知</span>
          </div>
          <div class="f-r f-r-between m-b-10">
            <el-radio-group  size="medium" v-model="earlyWarningType" @change="changeEarlyWarning">
              <el-radio-button label="1">全部</el-radio-button>
              <el-radio-button label="2">缺货（12）</el-radio-button>
              <el-radio-button label="3">超出（3）</el-radio-button>
            </el-radio-group>
            <div class="to-more" @click="nav('/stock/ledger/alertQuery')">查看更多 ></div>
          </div>
          <el-table :data="earlyWarningData" class="top-tb" :show-header="false" size="medium">
            <el-table-column prop="type" align="center"></el-table-column>
            <el-table-column prop="name" align="center" width="100"></el-table-column>
            <el-table-column prop="orgName" align="center" width="100"></el-table-column>
            <el-table-column prop="surplus" align="center" width="100">
              <template slot-scope="scope">
                <span class="font-14 color-333">剩余{{ scope.row.surplus }}套</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" align="center" width="180">
              <template slot-scope="scope">
                <span class="font-14 color-333">{{ formattTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="aduitThis(scope.row.id)" size="small" type="primary">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 10px">
    <!-- 中间统计部分-->
    <div class="f-r f-r-between total-list">
      <div class="total-item">
        <div class="font-14 color-666">物品数量</div>
        <div class="font-14 color-333" style="margin-top:6px;"><span class="total-num">1200</span></div>
      </div>
      <div class="total-item">
        <div class="font-14 color-666">资产总金额</div>
        <div class="font-14 color-333" style="margin-top:6px;"><span class="total-num">120.88</span>万元</div>
      </div>
      <div class="total-item">
        <div class="font-14 color-666">物品占用率</div>
        <div class="font-14 color-333" style="margin-top:6px;"><span class="total-num">80%</span></div>
      </div>
      <div class="total-item">
        <div class="font-14 color-666">A类物品数量</div>
        <div class="font-14 color-333" style="margin-top:6px;"><span class="total-num">120</span></div>
      </div>
      <div class="total-item">
        <div class="font-14 color-666">B类物品数量</div>
        <div class="font-14 color-333" style="margin-top:6px;"><span class="total-num">123</span></div>
      </div>
    </div>
  <!-- 类别金额统计/类别数量统计 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/wtc.png"></img>
                <span>问题池</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">0<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/dxy.png"></img>
                <span>待响应问题</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">0<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/gdc.png"></img>
                <span>变更工单</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">0<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <LBSLTJ></LBSLTJ>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/dxy.png"></img>
                <span>待响应变更</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">0<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/fbgd.png"></img>
                <span>发布工单</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">2<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex bg-fff box flex-between">
              <div class="flex f-c f-col">
                <img class="icon" src="@/assets/images/index/dxy.png"></img>
                <span>待响应发布</span>
              </div>
              <div class="flex f-e f-col">
                <div class="font-28">5<span class="font-12">个</span> </div>
                <div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <LBJETJ></LBJETJ>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <XMGZD></XMGZD>
      </el-col>
      <el-col :span="12">
        <XYZC></XYZC>
      </el-col>
    </el-row>
    <el-card class="box-card">

        <span style="font-weight: 600;font-size: 20px">工单统计</span>

      <el-row :gutter="10">
        <el-col :span="6">
          <SJDJ></SJDJ>
        </el-col>
        <el-col :span="6">
        <GDLX></GDLX>
        </el-col>
        <el-col :span="6">
          <SJGDZB></SJGDZB>
        </el-col>
        <el-col :span="6">
          <progressMY></progressMY>
        </el-col>
      </el-row>

    </el-card>-->
  <!--  资产增长/报废统计图（数量）-->
    <XYZC></XYZC>
  </div>
</template>

<script>
// 创建Context
import {formattedDate} from "@/utils/DateFormatter";
import * as dash from '@/api/dashboard/dash'
// import * as createEvent from "@/api/eventManage/createEvent";
import {LongToDateTime} from "@/utils/DateFormatter";

const ComponentContext = require.context('./components', false, /\.vue$/i);
let res_components = {};
// 生成待待注册组件集合
@@ -219,84 +119,105 @@
  components: {...res_components},
  data() {
    return {
      eventInfo:{}
      waitType: '1',
      waitWorkData: [
        {number: 'SJQ12345', type: '物品申领', orgName: '金融业务部', name: '张三丰', createTime: 20231127150606, id: 1},
        {number: 'SJQ12345', type: '物品申领', orgName: '金融业务部', name: '张三丰', createTime: 20231127150606, id: 2},
        {number: 'SJQ12345', type: '物品申领', orgName: '金融业务部', name: '张三丰', createTime: 20231127150606, id: 3},
        {number: 'SJQ12345', type: '物品申领', orgName: '金融业务部', name: '张三丰', createTime: 20231127150606, id: 4},
        {number: 'SJQ12345', type: '物品申领', orgName: '金融业务部', name: '张三丰', createTime: 20231127150606, id: 5},
      ], // 待办工作
      earlyWarningType: '1',
      earlyWarningData: [
        {type: '施乐复印机碳粉', name: '施乐c2201', surplus: 4, createTime: 20231127150606, id: 1},
        {type: '施乐复印机碳粉', name: '施乐c2201', surplus: 5, createTime: 20231127150606, id: 2},
        {type: '施乐复印机碳粉', name: '施乐c2201', surplus: 6, createTime: 20231127150606, id: 3},
        {type: '施乐复印机碳粉', name: '施乐c2201', surplus: 6, createTime: 20231127150606, id: 4},
      ] // 预警通知
    };
  },
  created() {
    // this.getEventInfo()

  },
  methods: {
       // 获取事件数据
       getEventInfo(){
         dash.getEventInfo().then(res => {
           if (res) {
             this.eventInfo = res
           }
         })
       }
    // 格式化时间
    formattTime(time) {
      return LongToDateTime(time)
    },
    // 获取预警通知列表数据
    getAduitList() {
      let form = {
        pageSize: 5,
        pageNum: 1,
        waitType: this.waitType
      }
    },
    // 处理待办工作
    aduitThis(id) {
    },
    // 切换预警通知
    changeEarlyWarning(e) {
      this.earlyWarningType = e
      this.$nextTick(() => {
        this.getWarningList()
      })
    },
    // 获取预警通知列表数据
    getWarningList() {
      let form = {
        pageSize: 5,
        pageNum: 1,
        earlyWarningType: this.earlyWarningType
      }
    },
  //  跳转
    nav(url){
      this.$router.push(url)
    }
  }

};
</script>
<style lang="scss" scoped>
.content{
  padding:10px
.content {
  padding: 10px
}
.box{
  border-radius: 10px;
  padding: 20px 0;
  align-items: flex-end;

.to-more {
  font-size: 14px;
  color: #0d997c;
  cursor: pointer;
}
.flex{
  display: flex;
}
.flex-between{
  justify-content: space-around;
}
.f-col{
  flex-direction: column;
}
.f-c{
  align-items: center;
}
.f-e{
  align-items: flex-end;
}
.f-s{
  align-items: flex-start;
}
.c-1{
  color: #11AD6F;
}
.c-f{
  color: #FF4B4B;
}
.font-28{
  font-size: 28px;
}
.font-12{
  font-size: 12px;
}
.icon{
  width: 30px;
  height: 30px;

.m-b-10 {
  margin-bottom: 10px;
}
.arrow{
  width: 12px;
  height: 12px;
}
.box-card {
  margin-top: 10px;

.top-tb {
  width: 100%;
  border-radius: 10px;
  border: none;
  .card-title-right {
    display: flex;
    align-items: center;
    align-self: flex-end;
    float: right;
  }
}
>>>.el-table__body{
  min-height: 265px;
}
.total-list {
  padding: 15px 0;
}

.total-item {
  width: 19%;
  padding: 12px 20px;
  border-radius: 8px;
  margin-right: 1%;
  background-color: #FFFFFF;
}

.total-item:last-child {
  margin: 0;
}

.total-num {
  font-size: 24px;
  font-weight: bold;
  margin-right: 3px;
}
</style>