X-web/src/views/modules/home/admin.vue

<template>
  <div class="mod-home" id="content">
    <el-button @click="fullScreen" class="full-screen-btn">全屏</el-button>

    <el-row :span="24" class="sample-bg">
      <el-col :span="6" class="bg1-1">
        <el-row :span="24" class="bg1-1-1">
          <div class="box-company-title">
            <div class="company-title">{{ systemName }}</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-2">
          <div class="box-custom-number">
            <div class="custom-number">客户数：{{ analytics.clients }}</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-1">
          <div class="box-contract-number">
            <div class="contract-number">合同数：{{ analytics.num }}</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-1-2">
          <div class="box-contract-amount">
            <div class="contract-amount">
              合同总金额：{{ analytics.totalAmount }}
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="12" class="bg1-2">
        <el-row :span="24" class="bg1-2-1">
          <div ref="boxnoticetitle" class="box-notice-title" @dblclick="doubleClick">
            <div ref="noticetitle" :class="isTran ? 'notice-title notice-title-animation' : 'notice-title'">{{
              noticeContent }}</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-2-2">
          <div class="box-stat-number">
            <div class="stat-number">
              <div class="item">
                <div class="title">在制物料总数</div>
                <div class="number">{{ produceCensus.produceNum }}</div>
              </div>
              <div class="item">
                <div class="title">已完成数量</div>
                <div class="number">{{ produceCensus.completeNum }}</div>
              </div>
              <div class="item">
                <div class="title">损坏数量</div>
                <div class="number">{{ produceCensus.damageNum }}</div>
              </div>
              <div class="item">
                <div class="title">生产总值</div>
                <div class="number">{{ produceCensus.totalOutputValue }}</div>
              </div>
            </div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-2-3">
          <div class="box-contract-table">
            <div class="contract-table table">
              <el-table ref="contractProdTable" :data="contractProdList" height="100%"
                :row-class-name="contractProdListAddClass" style="width: 100%">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="orderCode" label="合同号"></el-table-column>
                <el-table-column prop="productName" label="物料名称"></el-table-column>
                <el-table-column prop="prodCode" label="物料编号"></el-table-column>
                <el-table-column prop="batchNo" label="批次号"></el-table-column>
                <el-table-column label="生产进度" width="180">
                  <template slot-scope="scope">
                    <el-progress :percentage="parseInt(scope.row.progressBar)"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称"></el-table-column>
                <el-table-column prop="curOperator" label="当前操作人"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg1-3">
        <el-row :span="24" class="bg1-3-1">
          <div class="box-custom-ranking">
            <div class="custom-ranking">客户排名</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg1-3-2">
          <div class="box-custom-ranking">
            <div class="custom-ranking">
              <div class="table">
                <el-table ref="customerRankTable" :data="customerRankList" height="100%"
                  row-class-name="custom-ranking-table-row" style="width: 100%">
                  <el-table-column prop="customerName" label="客户名称"></el-table-column>
                  <el-table-column label="合同金额占比">
                    <template slot-scope="scope">
                      <el-progress :text-inside="true" :stroke-width="16" :percentage="scope.row.percentage * 100"
                        status="success"></el-progress>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row :span="24" class="sample-bg1">
      <el-col :span="6" class="bg2-1">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">合同预警</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                <el-table ref="contractAlarmTable" :data="contractAlarmList" height="100%"
                  row-class-name="custom-ranking-table-row" style="width: 100%">
                  <el-table-column type="index" label="序号"></el-table-column>
                  <el-table-column prop="contractNumber" label="合同号"></el-table-column>
                  <!-- <el-table-column prop="orderCode" label="任务单号"></el-table-column> -->
                  <el-table-column prop="remainTime" label="剩余时间（天）" width="100"></el-table-column>
                  <el-table-column prop="deliveryTime" label="交付日期"></el-table-column>
                  <el-table-column prop="customerName" label="客户名称"></el-table-column>
                  <!-- <el-table-column prop="salesmenName" label="业务员"></el-table-column> -->
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-2">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">报损记录</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                <el-table ref="damageTable" :data="damageList" height="100%" row-class-name="custom-ranking-table-row"
                  style="width: 100%">
                  <el-table-column type="index" label="序号"></el-table-column>
                  <el-table-column prop="productName" label="物料"></el-table-column>
                  <el-table-column prop="prodCode" label="编号"></el-table-column>
                  <!-- <el-table-column prop="damageReason" label="原因"></el-table-column> -->
                  <el-table-column prop="liableUserName" label="报损人" width="80"></el-table-column>
                  <el-table-column prop="createTime" label="报损时间"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-1">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">报工</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                <el-table ref="submittedRecordTable" :data="submittedRecordList" height="100%"
                  row-class-name="custom-ranking-table-row" style="width: 100%">
                  <el-table-column type="index" label="序号"></el-table-column>
                  <el-table-column prop="nodeName" label="工序" width="70"></el-table-column>
                  <el-table-column prop="taskName" label="物料名字"></el-table-column>
                  <el-table-column prop="endTime" label="完成时间"></el-table-column>
                  <el-table-column prop="operatorName" label="操作人名字"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="bg2-2">
        <el-row :span="24" class="bg2-3-1">
          <div class="box-contract-alert">
            <div class="contract-alert">出库记录</div>
          </div>
        </el-row>
        <el-row :span="24" class="bg2-3-2">
          <div class="box-contract-alert">
            <div class="contract-alert">
              <div class="table">
                <el-table ref="outboundRecordTable" :data="outboundRecordList" height="100%"
                  row-class-name="custom-ranking-table-row" style="width: 100%">
                  <el-table-column type="index" label="序号"></el-table-column>
                  <el-table-column prop="materialName" label="物品"></el-table-column>
                  <el-table-column prop="cnt" label="数量" width="50"></el-table-column>
                  <el-table-column prop="createTime" label="时间"></el-table-column>
                  <el-table-column prop="applicant" label="申请人"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="设置通知内容" :visible.sync="dialogFormVisible">
      <el-form :model="noticeForm">
        <el-form-item label="通知内容">
          <el-input v-model="noticeForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAnalytics,
  getContractAlarmList,
  getCustomerRankList,
  getDamageList,
  getOutboundRecordList,
  getContractProdList,
  getSubmittedRecordList,
  getProduceCensus
} from '@/api/home'
export default {
  computed: {
    systemName() {
      return (window.SITE_CONFIG && window.SITE_CONFIG.systemName) || '木之云数字化平台';
    }
  },
  name: 'admin',
  components: {},
  data() {
    return {
      analytics: {
        clients: '', // 客户数
        num: '', // 合同数
        totalAmount: '' // 合同总金额
      },
      analyticsTimer: null,
      // 合同预警列表
      contractAlarmList: [],
      contractAlarmListTimer: null,
      // 客户排名列表
      customerRankList: [],
      customerRankListTimer: null,
      // 报损记录列表
      damageList: [],
      damageListTimer: null,
      // 出库记录列表
      outboundRecordList: [],
      outboundRecordListTimer: null,
      // 合同生产记录列表
      contractProdList: [],
      contractProdListTimer: null,
      // 报工列表
      submittedRecordList: [],
      submittedRecordListTimer: null,
      // 生产统计
      produceCensus: {
        produceNum: 0, // 在制物料总数
        completeNum: 0, // 已完成数量
        damageNum: 0, // 损坏数量
        totalOutputValue: 0 // 生产总值
      },
      produceCensusTimer: null,
      dialogFormVisible: false,
      noticeForm: {
        content: ''
      },
      noticeContent: '',
      isTran: false
    }
  },
  created() {
    this.getAnalytics()
    this.analyticsTimer = setInterval(this.getAnalytics, 1000 * 3600) // 1小时刷新

    this.getContractAlarmList()
    this.contractAlarmListTimer = setInterval(
      this.getContractAlarmList,
      1000 * 60 * 10
    ) // 10分钟刷新

    this.getCustomerRankList()
    this.damageListTimer = setInterval(
      this.getCustomerRankList,
      1000 * 60 * 10
    ) // 10分钟刷新

    this.getDamageList()
    this.customerRankListTimer = setInterval(
      this.getDamageList,
      1000 * 60 * 10
    ) // 10分钟刷新

    this.getOutboundRecordList()
    this.outboundRecordListTimer = setInterval(
      this.getOutboundRecordList,
      1000 * 60 * 5
    ) // 5分钟刷新

    this.getContractProdList()
    this.contractProdListTimer = setInterval(
      this.getContractProdList,
      1000 * 60 * 10
    ) // 10分钟刷新

    this.getSubmittedRecordList()
    this.submittedRecordListTimer = setInterval(
      this.getSubmittedRecordList,
      1000 * 60 * 5
    ) // 5分钟刷新

    this.getProduceCensus()
    this.produceCensusTimer = setInterval(this.getProduceCensus, 1000 * 60 * 5) // 5分钟刷新

    this.getNoticeContent()

    this.setTitleScroll()
  },
  mounted() {
    this.contractProdTableScroll()
    this.customerRankTableScroll()
    this.contractAlarmTableScroll()
    this.outboundRecordTableScroll()
    this.submittedRecordTableScroll()
    this.damageTableScroll()
  },
  beforeDestroy() {
    clearInterval(this.analyticsTimer)
    clearInterval(this.contractAlarmListTimer)
    clearInterval(this.damageListTimer)
    clearInterval(this.customerRankListTimer)
    clearInterval(this.outboundRecordListTimer)
    clearInterval(this.contractProdListTimer)
    clearInterval(this.submittedRecordListTimer)
    clearInterval(this.produceCensusTimer)
  },
  methods: {
    setTitleScroll() {
      this.$nextTick(() => {
        let boxWidth = this.$refs.boxnoticetitle.offsetWidth
        let contentWidth = this.$refs.noticetitle.offsetWidth
        if (contentWidth > boxWidth) {
          // 设置水平滚动效果
          this.isTran = true
        }
      })
    },
    getNoticeContent() {
      let content = sessionStorage.getItem('noticeContent')
      if (content == null || content === '') {
        content = '双击此处修改通知内容'
      }

      this.noticeContent = content
    },
    doubleClick() {
      this.dialogFormVisible = true
    },
    dialogSubmit() {
      this.noticeContent = this.noticeForm.content
      this.dialogFormVisible = false
      sessionStorage.setItem('noticeContent', this.noticeContent)
      this.setTitleScroll()
    },
    // 合同统计
    getAnalytics() {
      getAnalytics({}).then(({ data }) => {
        if (data && data.code === '200') {
          this.analytics = { ...data.data }
        }
      })
    },
    // 合同预警列表
    getContractAlarmList() {
      let params = {
        current: 1,
        size: 20
      }
      getContractAlarmList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.contractAlarmList = data.data.records
        }
      })
    },
    // 客户排名列表
    getCustomerRankList() {
      let params = {
        current: 1,
        size: 20
      }
      getCustomerRankList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.customerRankList = data.data
        }
      })
    },
    // 报损记录列表
    getDamageList() {
      let params = {
        current: 1,
        size: 20
      }
      getDamageList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.damageList = data.data.records
        }
      })
    },
    // 出库记录列表
    getOutboundRecordList() {
      let params = {
        current: 1,
        size: 20
      }
      getOutboundRecordList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.outboundRecordList = data.data.records
        }
      })
    },
    // 合同生产记录列表
    getContractProdList() {
      let params = {
        current: 1,
        size: 20
      }
      getContractProdList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.contractProdList = data.data.records
        }
      })
    },
    contractProdListAddClass({ row, rowIndex }) {
      if (row.warningState === '3') {
        return 'custom-ranking-table-row overdue-row'
      }

      if (row.warningState === '2') {
        return 'custom-ranking-table-row warning-row'
      }

      return 'custom-ranking-table-row'
    },
    // 报工列表
    getSubmittedRecordList() {
      let params = {
        current: 1,
        size: 20
      }
      getSubmittedRecordList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.submittedRecordList = data.data.records
        }
      })
    },
    // 生产统计
    getProduceCensus() {
      getProduceCensus({}).then(({ data }) => {
        if (data && data.code === '200') {
          this.produceCensus = data.data
        }
      })
    },
    contractProdTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.contractProdTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    customerRankTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.customerRankTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    contractAlarmTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.contractAlarmTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    outboundRecordTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.outboundRecordTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    submittedRecordTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.submittedRecordTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    damageTableScroll() {
      this.$nextTick(() => {
        const divData = this.$refs.damageTable.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (
            divData.clientHeight + divData.scrollTop + 1 >
            divData.scrollHeight
          ) {
            divData.scrollTop = 0
          }
        }, 50)
      })
    },
    // 全屏显示
    fullScreen() {
      const element = document.getElementById('content')
      element.requestFullscreen()
    }
  }
}
</script>

<style>
html,
body,
.site-wrapper,
.site-content__wrapper,
.site-content,
.el-tabs--top,
.el-tabs__content,
.el-tab-pane,
.el-card,
.el-card__body {
  height: 100%;
}

.custom-ranking-table-row {
  font-size: 8px;
}

.el-table .warning-row {
  color: #FFD700;
}

.el-table .overdue-row {
  color: #FF0000;
}
</style>
<style scoped>
.mod-home {
  /* line-height: 1.5; */
  height: 100%;
  position: relative;
}

.full-screen-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  padding: 0 0;
  border-radius: 0;
}

.sample-bg {
  background-color: #021327;
  height: 60%;
}

.sample-bg1 {
  background-color: #021327;
  height: 40%;
}

.bg1-1 {
  /* background-color: yellow; */
  height: 100%;
}

.bg1-2 {
  /* background-color: orange; */
  height: 100%;
}

.bg1-3 {
  /* background-color: orchid; */
  height: 100%;
}

.bg2-1 {
  /* background-color: red; */
  height: 100%;
}

.bg2-2 {
  /* background-color: aqua; */
  height: 100%;
}

.bg1-1-1 {
  height: 25%;
  padding: 10px 10px;
  /* border: 1px solid black; */
}

.bg1-1-2 {
  height: 25%;
  padding: 10px;
  /* border: 1px solid black; */
}

.box-company-title {
  background-color: #094198;
  display: flex;
  height: 100%;
}

.company-title {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-custom-number {
  background-color: #d65246;
  display: flex;
  height: 100%;
}

.custom-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-contract-number {
  background-color: #11d2b7;
  display: flex;
  height: 100%;
}

.contract-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.box-contract-amount {
  background-color: #f6a647;
  display: flex;
  height: 100%;
}

.contract-amount {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

/*中间通知区域*/

.bg1-2-1 {
  height: 15%;
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-2-2 {
  height: 25%;
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-2-3 {
  height: 60%;
  padding: 10px;
  /* border: 1px solid black; */
}

.box-notice-title {
  background-color: #2fb5f2;
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.notice-title {
  font-size: 20px;
  color: red;
  margin: 0 auto;
  align-items: center;
  display: flex;
  white-space: nowrap;
}

.notice-title-animation {
  animation: wordsLoop 25s linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  100% {
    transform: translateX(-51%);
    -webkit-transform: translateX(-51%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  100% {
    transform: translateX(-51%);
    -webkit-transform: translateX(-51%);
  }
}

.box-stat-number {
  background-color: #415065;
  display: flex;
  height: 100%;
}

.stat-number {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.stat-number>.item {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.stat-number>.item>.title {
  color: darkturquoise;
}

.stat-number>.item>.number {
  text-align: center;
}

/*合同列表*/
.box-contract-table {
  background-color: #415065;
  display: flex;
  height: 100%;
}

.contract-table {
  font-size: 20px;
  color: aliceblue;
  margin: 0 auto;
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.bg1-3-1 {
  height: 10%;
  /* min-height: 45px; */
  padding: 10px;
  /* border: 1px solid black; */
}

.bg1-3-2 {
  height: 90%;
  padding: 2px 10px 10px;
  /* border: 1px solid black; */
}

/*客户排名*/
.box-custom-ranking {
  background-color: #415065;
  height: 100%;
}

.custom-ranking {
  font-size: 14px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
  width: 100%;
  height: 100%;
}

.custom-ranking>.table {
  background-color: darkturquoise;
  height: 100%;
  width: 100%;
}

.bg2-3-1 {
  height: 10%;
  padding: 5px 10px;
  /* border: 1px solid black; */
}

.bg2-3-2 {
  height: 90%;
  padding: 2px 10px 10px;
  /* border: 1px solid black; */
}

/*合同预警*/
.box-contract-alert {
  background-color: #415065;
  height: 100%;
}

.contract-alert {
  font-size: 14px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
  width: 100%;
  height: 100%;
}

.contract-alert>.title>div {
  background-color: #415065;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
}

.contract-alert>.table {
  background-color: darkturquoise;
  height: 100%;
  width: 100%;
}

.table thead .cell {
  font-size: 12px;
  -webkit-transform: scale(0.8) !important;
}

.table tbody .cell {
  font-size: 12px;
  -webkit-transform: scale(0.8) !important;
}

/* 设置滚动条的样式 */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 滚动槽 */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);

  border-radius: 10px;
}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
  border-radius: 10px;

  background: rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(161, 156, 156, 0.2);
}
</style>