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:71%">烘房白坯质量统计</div>
    <div class="modelTitle" style="top:65%;left:32%">近7天产量</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.length }}</div>
    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.length }}</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.totalRecordCount }}</div>
    <div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.sumChe }}</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.dollyNumber }}
            </div>
            <div
              class="scrollTable" style="color:#49b2fc">
              {{ item.expend }}KWh
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <Chart ref="chart1" class="chart1"></Chart>
    <Chart ref="chart2" class="chart2"></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";

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 || []
      })

      getHourProductionList().then(e => {
        this.CData = e.filter(v => v.equName.includes('成型机'))
        this.HData = e.filter(v => v.equName.includes('烘房'))
      })
      EnergyExpend().then(e => {
        this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
      })
      agvdata().then(e => {
        this.agvData = e.Data
      })
      PlanAchievementRate().then(e => {
        this.proData = e.data
        this.percent = e.msg
      })
      getHfChartDatas({
        createTimeStart: '2024-11-02 00:00:00',
        createTimeEnd: '2024-11-04 00:00:00',
        chartType: 'cp'
      }).then(e => {
        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),
          },
          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 => {
        console.log(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: [
            {
              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%;

}

.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>