|
|
@@ -1,977 +1,17 @@
|
|
|
<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 class="box-notice-title" @dblclick="doubleClick">
|
|
|
- <div class="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="custom-ranking-table-row"
|
|
|
- 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="70"
|
|
|
- ></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" class="dialog-footer">
|
|
|
- <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="dialogSubmit">确 定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ <div class="mod-home">
|
|
|
+ <h3>木之云平台，欢迎您！</h3>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- getAnalytics,
|
|
|
- getContractAlarmList,
|
|
|
- getCustomerRankList,
|
|
|
- getDamageList,
|
|
|
- getOutboundRecordList,
|
|
|
- getContractProdList,
|
|
|
- getSubmittedRecordList,
|
|
|
- getProduceCensus
|
|
|
-} from '@/api/home'
|
|
|
-export default {
|
|
|
- name: 'home',
|
|
|
- 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: ''
|
|
|
- }
|
|
|
- },
|
|
|
- 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()
|
|
|
- },
|
|
|
- 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: {
|
|
|
- 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)
|
|
|
- },
|
|
|
- // 合同统计
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 报工列表
|
|
|
- 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()
|
|
|
- }
|
|
|
+ export default {
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-html,
|
|
|
-body,
|
|
|
-.site-wrapper,
|
|
|
-.site-content__wrapper,
|
|
|
-.site-content,
|
|
|
-.el-card,
|
|
|
-.el-card__body {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.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%;
|
|
|
-}
|
|
|
-
|
|
|
-.notice-title {
|
|
|
- font-size: 20px;
|
|
|
- color: red;
|
|
|
- margin: 0 auto;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-.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%;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-ranking-table-row {
|
|
|
- font-size: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.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);
|
|
|
-}
|
|
|
+ .mod-home {
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
</style>
|
|
|
+
|
liqianyi