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">东齐公司大数据看板</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 {
  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>