总控车间新增配置假数据功能

zhaowei

2024-10-28 b8ba5ab9938b79fa0ec2ee7b6df2f47490536389

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -24,10 +24,14 @@

          <div style="position: relative">
            <img src="../../../assets/image/logo.jpg">
            一拖大拖装配厂
            <span style="cursor: pointer"
                  @dblclick="modalVisible=true">{{isFakeData?fakeData.title:'一拖大拖装配厂'}}</span>
          </div>
          <div>数字化车间智能管理系统</div>
          <div style="cursor: pointer" @dblclick="isFakeData = !isFakeData">
            {{isFakeData?fakeData.subheading:'数字化车间智能管理系统'}}
          </div>
        </div>

        <div class="workshop-bg">
          <div class="navigate-container" style="top:0;left: 5%;">
            <div @click="navigateToSubWorkshopSignage(item)" v-for="item in productionLineList" :key="item.id"
@@ -60,11 +64,16 @@
            </div>
          </div>
        </div>

        <div class="switch-container">
          <div class="switch-item" v-for="(item,index) in switchList" :key="index" @click="navigateToOthers(item,index)"
               :style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
            {{item.label}}
          </div>
        </div>

        <div class="page-description">
          {{isFakeData?fakeData.description:'一拖工材所 与 灵秀智能 联合开发'}}
        </div>
      </div>
      <div class="right-col">
@@ -85,19 +94,26 @@
        </div>
      </div>
    </div>

    <SignageModal :fakeData="fakeData" :modalVisible="modalVisible"
                  @closeModal="modalVisible=false" @reloadData="reloadData"></SignageModal>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import api from '@/api/mdc'
  import SignageModal from './modules/MasterControlWorkshopSignage/SignageModal'

  export default {
    name: 'MasterControlWorkshopSignage',
    components: {},
    components: { SignageModal },
    data() {
      return {
        activeIndex: 0,
        isFakeData: true,
        fakeData: {},
        modalVisible: false,
        activeIndex: null,
        firstEnterDevicePixelRatio: null,
        currentDevicePixelRatio: null,
        leftColChart1: '',
@@ -150,6 +166,8 @@
        rightColChart1: '',
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2Data: '',
        rightColChart3Data: '',
        rightColChart2And3Data: '',
        rightColChart2CarouselTime: null,
        rightColChart3CarouselTime: null,
@@ -162,7 +180,6 @@
      this.firstEnterDevicePixelRatio = window.devicePixelRatio
      window.addEventListener('resize', this.handleWindowResize)
      this.getProductionListByApi()
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
@@ -170,12 +187,66 @@
      if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
      if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
    },
    watch: {
      isFakeData: {
        handler(value) {
          if (value) {
            this.getFakeDataByApi()
          } else {
            this.getChartDataByApi()
          }
        },
        immediate: true
      }
    },
    methods: {
      getProductionListByApi() {
        api.getProductionLineListApi()
          .then(res => {
            if (res.success) this.productionLineList = res.result
          })
      },

      getFakeDataByApi() {
        api.getFakeDataApi()
          .then(res => {
            console.log('res', res)
            if (res.success) this.fakeData = res.result
            this.leftColChart1Data = [
              {
                name: '产品合格率',
                count: res.result.passRate / 100
              },
              {
                name: '设备利用率',
                count: res.result.utilizationRate / 100
              },
              {
                name: '计划完成率',
                count: res.result.planCompleteRate / 100
              }
            ]
            this.leftColChart2Data = res.result.todayProductionList
            this.leftColChart3Data = res.result.todayPassRateList
            this.leftColChart4Data = res.result.todayShiftCountList
            this.rightColChart2Data = res.result.todayOpenRateList
            this.rightColChart3Data = res.result.todayUtilizationRateList
            this.rightColChart4Data = res.result.monthUtilizationRateList
            this.$nextTick(() => {
              this.drawLeftColChart1()
              this.drawLeftColChart2()
              this.drawLeftColChart3()
              this.drawLeftColChart4()
              this.drawRightColChart2()
              this.drawRightColChart3()
              this.drawRightColChart4()
            })
          })
      },

      reloadData() {
        this.modalVisible = false
        if (this.isFakeData) this.getFakeDataByApi()
      },

      getChartDataByApi() {
@@ -189,7 +260,6 @@
      },

      getLeftColChart1DataByApi() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        api.getYesterdayOverviewApi()
          .then(res => {
            // console.log('res', res)
@@ -214,7 +284,6 @@
      },

      getLeftColChart2DataByApi() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        api.getTodayProductionProgressApi()
          .then(res => {
            // console.log('res', res)
@@ -226,7 +295,6 @@
      },

      getLeftColChart3DataByApi() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        api.getTodayProductPassRateApi()
          .then(res => {
            // console.log('res', res)
@@ -238,7 +306,6 @@
      },

      getLeftColChart4DataByApi() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        api.getTeamCompletionCountApi()
          .then(res => {
            // console.log('res', res)
@@ -255,8 +322,6 @@
      },

      getRightColChart2And3DataByApi() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        api.getTodayEquipmentWorkEfficiencyApi()
          .then(res => {
            // console.log('res', res)
@@ -269,7 +334,6 @@
      },

      getRightColChart4DataByApi() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        api.getMonthEquipmentUtilizationRateApi()
          .then(res => {
            // console.log('res', res)
@@ -282,6 +346,9 @@

      /* 绘制左侧第一个图表 */
      drawLeftColChart1() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        console.log('leftColChart1Data', this.leftColChart1Data)

        const yAxisData = []
        const option = {
          radar: [
@@ -410,14 +477,26 @@

      /* 绘制左侧第二个图表 */
      drawLeftColChart2() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        const xAxisData = []
        const seriesData1 = []
        const seriesData2 = []
        this.leftColChart2Data.forEach(item => {
          xAxisData.push(item.productName == null ? '' : item.productName)
          seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
          seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        if (this.isFakeData) {
          this.leftColChart2Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData1.push({ value: item.value1 == null ? '' : item.value1 })
              seriesData2.push({ value: item.value2 == null ? '' : item.value2 })
            }
          })
        } else {
          this.leftColChart2Data.forEach(item => {
            xAxisData.push(item.productName == null ? '' : item.productName)
            seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
            seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
          })
        }

        const option = {
          tooltip: {
            show: true,
@@ -570,6 +649,7 @@

      /* 绘制左侧第三个图表 */
      drawLeftColChart3() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        const data = [
          {
            'number': 'A_1',
@@ -623,12 +703,24 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.leftColChart3Data.forEach(item => {
          xAxisData.push(item.productionName == null ? '' : item.productionName)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
        if (this.isFakeData) {
          this.leftColChart3Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({
                value: this.toDecimal2NoZero(((item.value1 == null ? '' : item.value1) * 100) > 100 ? 100 : (((item.value1 == null ? '' : item.value1) * 100)))
              })
            }
          })
        })
        } else {
          this.leftColChart3Data.forEach(item => {
            xAxisData.push(item.productionName == null ? '' : item.productionName)
            seriesData.push({
              value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
            })
          })
        }

        const option = {
          tooltip: {
            show: true,
@@ -831,12 +923,22 @@

      /* 绘制左侧第四个图表 */
      drawLeftColChart4() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        const xAxisData = []
        const seriesData = []
        this.leftColChart4Data.forEach(item => {
          xAxisData.push(item.clazz == null ? '' : item.clazz)
          seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        if (this.isFakeData) {
          this.leftColChart4Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 == null ? '' : item.value1 })
            }
          })
        } else {
          this.leftColChart4Data.forEach(item => {
            xAxisData.push(item.clazz == null ? '' : item.clazz)
            seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -1195,6 +1297,7 @@

      /* 绘制右侧第二个图表 */
      drawRightColChart2() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        const data = [
          {
            'number': 'A_1',
@@ -1358,10 +1461,20 @@
          )
        ]

        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        if (this.isFakeData) {
          this.rightColChart2Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart2And3Data.forEach(item => {
            xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
            seriesData.push({ value: item.openRate })
          })
        }

        const option = {
          tooltip: {
            show: true,
@@ -1481,6 +1594,7 @@
        option.series[0].data = seriesData
        this.rightColChart2.setOption(option, true)

        clearInterval(this.rightColChart2CarouselTime)
        this.rightColChart2CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
@@ -1493,6 +1607,7 @@

      /* 绘制右侧第三个图表 */
      drawRightColChart3() {
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        const data = [
          {
            'number': 'A_1',
@@ -1655,10 +1770,19 @@
            ]
          )
        ]
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        if (this.isFakeData) {
          this.rightColChart3Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart2And3Data.forEach(item => {
            xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
            seriesData.push({ value: item.utilizationRate })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -1778,6 +1902,7 @@
        option.series[0].data = seriesData
        this.rightColChart3.setOption(option, true)

        clearInterval(this.rightColChart3CarouselTime)
        this.rightColChart3CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
@@ -1790,6 +1915,7 @@

      /* 绘制右侧第四个图表 */
      drawRightColChart4() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        const data = [
          {
            'number': 'A_1',
@@ -2032,10 +2158,19 @@
            ]
          )
        ]
        this.rightColChart4Data.forEach(item => {
          xAxisData.push(item.date == null ? '' : item.date)
          seriesData.push({ value: item.utilizationRate })
        })
        if (this.isFakeData) {
          this.rightColChart4Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart4Data.forEach(item => {
            xAxisData.push(item.date == null ? '' : item.date)
            seriesData.push({ value: item.utilizationRate })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -2146,6 +2281,7 @@
        option.series[0].data = seriesData
        this.rightColChart4.setOption(option, true)

        clearInterval(this.rightColChart4CarouselTime)
        this.rightColChart4CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
@@ -2294,6 +2430,12 @@
            cursor: pointer;
          }
        }

        .page-description {
          text-align: center;
          color: #fff;
          font-size: 14px;
        }
      }

      .left-col, .right-col {