lanju-front/src/views/cs/index3.vue

<template>
  <div class="bg">
    <div class="title">白坯车间数字应用大屏</div>
    <div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
    <!--    <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>-->
    <div class="modelTitle" style="top:15.2%;left:32%">烘房耗电量</div>
    <div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
    <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
    <!--    <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
    <div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
    <!--    <div class="title1" style="top:24%;left:34%">成型机产量：</div>-->
    <!--    <div class="title1" style="top:24%;left:52.5%">烘房产量：</div>-->
    <!--    <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>-->
    <!--    <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>-->
    <!--    <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
    <!--    <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
    <!--    <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
    <!--    <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
    <!--    <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
    <!--    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
    <!--    <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
    <!--    <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
    <div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
    <div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
    <div class="unit2" style="top: 76.5%;left: 95%;">车</div>
    <div class="unit2" style="top: 88.5%;left: 95%;">车</div>
    <div class="num2" style="top: 76.8%;left: 90.7%;color:#12fdae">{{ proData.sumChe }}</div>
    <div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.totalRecordCount }}</div>
    <div class="num3" style="top: 80.3%;left: 78.6%;">{{ percent }}</div>
    <div class="title3" style="top: 91%;left: 78.8%;">计划达成率</div>

    <div class="table1">
      <div style="background-color: #0d61aa;height: 5%;line-height: calc(3.9vh - 8px);color:#fbfafd">
        <div class="scrollTable" style="font-weight: bold;">
          烘房
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          温度
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          湿度
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          在生产
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          单车耗能
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="{...chart1TableOption,limitMoveNum:10}"
        :data="table1Data"
        style="height: 94%;overflow: hidden;margin-top: 1%"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"
          class="case-item"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ item.equipment_code }}
            </div>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ item.temperature }}℃
            </div>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ item.humidity }}
            </div>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ item.Intheoven }}
            </div>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ (parseFloat(item.expend / item.yield) || 0).toFixed(2) }}KWh
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <Chart ref="chart1" class="chart1"></Chart>
    <Chart ref="chart2" class="chart2"></Chart>
    <Chart ref="chart3" class="chart3"></Chart>
  </div>
</template>
<script>

import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  agvdata,
  avgdata,
  dryRoomDataCarousel,
  EnergyExpend, getHfChartDatas,
  getHourProductionList, getHourProductionLists,
  PlanAchievementRate
} from "../../api/board/cs3";
import {parseTime} from "../../utils/openPlatform";

export default {
  components: {
    Chart,
    vueSeamlessScroll,
  },
  data() {
    return {
      chart1TableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      table1Data: [],
      CData: [],
      HData: [],
      expend: 0,
      agvData: [],
      proData: {},
      percent: ''
    }
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, 5 * 1000)
  },
  methods: {
    getData() {
      dryRoomDataCarousel().then(e => {
        this.table1Data = e.data.dryingroomList.filter(v => parseFloat(v.expend / v.yield)) || []
      })
      EnergyExpend().then(e => {
        this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
        let data = e.map(v=>{
          return {
            ...v,
            monitorName:parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0])
          }
        })
        data.sort((a,b)=>a.monitorName-b.monitorName)

        let option2 = {
          grid: {
            top: '15%',
            bottom: '10%',
            // left: '5%',
            right: '3%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          legend: {
            right: 0,
            textStyle: {
              color: '#eee'
            }
          },
          xAxis: {
            data: data.map(v => v.monitorName + "#"),
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: '#fff' //X轴文字颜色
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '单位：KWh',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              label: {
                show: true,
                position: 'top',
                formatter: "{c}",
                color: "#fff"
              },
              name: '耗电量',
              type: 'bar',
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: "emptyCircle", //标记的图形为实心圆
              symbolSize: 5, //标记的大小
              // itemStyle: {
              //   //折线拐点标志的样式
              //   color: "#058cff",
              // },
              // lineStyle: {
              //   color: "#058cff",
              // },
              // areaStyle: {
              //   color: "rgba(5,140,255, 0.2)",
              // },
              data: data.map(v => parseFloat(v.expend)),
            },
          ]
        };
        this.$refs.chart3.setData(option2)
      })
      agvdata().then(e => {
        this.agvData = e.Data.filter(v => v.State === 2)
      })
      PlanAchievementRate().then(e => {
        this.proData = e.data
        this.percent = e.msg
      })
      let time = parseTime(new Date(), '{h}-{i}').split('-')
      let i = parseFloat(time[0]) || 0
      let s = parseFloat(time [1]) || 0
      let createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
      let createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
      if (parseFloat(`${i}.${s}`) > 7.3 && parseFloat(`${i}.${s}`) < 19.3) {
        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
      } else if (parseFloat(`${i}.${s}`) < 7.3) {
        createTimeStart = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) - 1} 19:30:00`
        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
      } else if (parseFloat(`${i}.${s}`) > 19.3) {
        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) + 1} 07:30:00`
      } else {
        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
      }

      getHourProductionList({
        productDateStart: createTimeStart,
        productDateEnd: createTimeEnd
      }).then(e => {
        this.CData = e.filter(v => v.equName.includes('成型机'))
        this.HData = e.filter(v => v.equName.includes('烘房'))
      })

      getHfChartDatas({
        createTimeStart: createTimeStart,
        createTimeEnd: createTimeEnd,
        chartType: 'cp'
      }).then(vv => {
        let e = vv.checkList
        console.log(e)

        let option = {
          grid: {
            top: '15%',
            bottom: '10%',
            left: '6%',
            right: '6%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          legend: {
            right: 0,
            textStyle: {
              color: '#eee'
            }
          },
          xAxis: {
            data: e.map(v => v.machineName),
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              interval:0,
              show: true,
              textStyle: {
                color: '#fff' //X轴文字颜色
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '合格数',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            {
              type: 'value',
              name: '合格率',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              label: {
                show: true,
                position: 'top',
                formatter: "{c}%",
                color: "#fff"
              },
              name: '合格率',
              type: 'line',
              yAxisIndex: 1,
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: "emptyCircle", //标记的图形为实心圆
              symbolSize: 5, //标记的大小
              // itemStyle: {
              //   //折线拐点标志的样式
              //   color: "#058cff",
              // },
              // lineStyle: {
              //   color: "#058cff",
              // },
              // areaStyle: {
              //   color: "rgba(5,140,255, 0.2)",
              // },
              data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)),
            },
            {
              label: {
                show: true,
                position: 'top',
                formatter: "{c}",
                color: "#fff"
              },

              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0, color: '#1e60f2' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#00b9ff' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              name: '合格数',
              type: 'bar',
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: "emptyCircle", //标记的图形为实心圆
              symbolSize: 5, //标记的大小
              // itemStyle: {
              //   //折线拐点标志的样式
              //   color: "#058cff",
              // },
              // lineStyle: {
              //   color: "#058cff",
              // },
              // areaStyle: {
              //   color: "rgba(5,140,255, 0.2)",
              // },
              data: e.map(v => parseFloat(v.quality)),
            },
          ]
        };
        // let option = {
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       // Use axis to trigger tooltip
        //       type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        //     }
        //   },
        //   legend: {
        //     textStyle: {
        //       color: '#eee'
        //     }
        //   },
        //   grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        //   },
        //   xAxis: {
        //     type: 'value'
        //   },
        //   yAxis: {
        //     type: 'category',
        //     axisLabel: {
        //       color: '#ccc'
        //     },
        //     data: e.checkList.map(v => v.machineName),
        //     // data: e.checkList.map((v,k) => '产品'+k),
        //   },
        //   series: [
        //     {
        //       name: '合格数量',
        //       type: 'bar',
        //       stack: 'total',
        //       label: {
        //         show: true,
        //         position: 'insideRight',
        //         formatter: "{c}车",
        //         color: "#000"
        //       },
        //       emphasis: {
        //         focus: 'series'
        //       },
        //       itemStyle: {
        //         color: {
        //           type: 'linear',
        //           x: 0,
        //           y: 0,
        //           x2: 1,
        //           y2: 0,
        //           colorStops: [{
        //             offset: 0, color: '#1e60f2' // 0% 处的颜色
        //           }, {
        //             offset: 1, color: '#00b9ff' // 100% 处的颜色
        //           }],
        //           global: false // 缺省为 false
        //         }
        //       },
        //       data: e.checkList.map(v => parseFloat(v.quality))
        //     },
        //     {
        //       name: '不合格数量',
        //       type: 'bar',
        //       stack: 'total',
        //       label: {
        //         show: true,
        //         position: 'right'
        //       },
        //       emphasis: {
        //         focus: 'series'
        //       },
        //       data: e.checkList.map(v => 0)
        //     },
        //   ]
        // };
        this.$refs.chart1.setData(option)
      })

      getHourProductionLists().then(e => {
        let option1 = {
          grid: {
            top: '15%',
            bottom: '10%',
            // left: '5%',
            right: '3%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          legend: {
            right: 0,
            textStyle: {
              color: '#eee'
            }
          },
          xAxis: {
            data: e.map(v => v.pdate),
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff' //X轴文字颜色
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '单位：车',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              label: {
                show: true,
                position: 'top',
                formatter: "{c}",
                color: "#fff"
              },
              name: '产量',
              type: 'line',
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: "emptyCircle", //标记的图形为实心圆
              symbolSize: 5, //标记的大小
              // itemStyle: {
              //   //折线拐点标志的样式
              //   color: "#058cff",
              // },
              // lineStyle: {
              //   color: "#058cff",
              // },
              // areaStyle: {
              //   color: "rgba(5,140,255, 0.2)",
              // },
              data: e.map(v => parseFloat(v.quantity)),
            },
          ]
        };
        this.$refs.chart2.setData(option1)
      })
    },
  },
}
</script>
<style scoped lang="less">
.bg {
  background-image: url("~@/assets/board/cs3/bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 2vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.title1 {
  position: absolute;
  font-size: 1.2vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.title2 {
  position: absolute;
  font-size: 0.7vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.title3 {
  position: absolute;
  font-size: 1.2vw;
  color: #0394fc;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
}

.unit1 {
  position: absolute;
  font-size: 0.8vw;
  color: #eee;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.unit2 {
  position: absolute;
  font-size: 0.8vw;
  color: #eee;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.num1 {
  position: absolute;
  font-size: 1.3vw;
  color: #4ab4fd;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
}

.num2 {
  position: absolute;
  font-size: 1.3vw;
  color: #4ab4fd;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
}

.num3 {
  position: absolute;
  font-size: 2vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
}

.modelTitle {
  position: absolute;
  font-size: 1vw;
  color: #fff;
  letter-spacing: 2px;
  transform: translateY(-50%);
}

.scrollTable {
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  //overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 20%;
}

.table1 {
  position: absolute;
  top: 18.5%;
  left: 3.2%;
  width: 25.4%;
  height: 78%;
}

.chart1 {
  position: absolute;
  width: 27.4%;
  height: 41.7%;
  top: 18%;
  left: 70.4%;

}

.chart2 {
  position: absolute;
  width: 37.4%;
  height: 28.5%;
  top: 67.6%;
  left: 31.3%;

}

.chart3 {
  position: absolute;
  width: 37.4%;
  height: 42.5%;
  top: 17.6%;
  left: 31.3%;
}

.case-item {
  border: 2px solid #0c61ad;
  border-radius: 2px;
  margin: 8px 0 0 0;
  color: #0c61ad;
  font-size: 0.9vw;
  line-height: 1.5vw;
  background-color: #134781;
}
</style>