Merge pull request 'projects/mesxc-zhp' (#339) from projects/mesxc-zhp into projects/mesxc-test
Reviewed-on: #339
This commit is contained in:
		@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-01-29 16:50:26
 | 
			
		||||
 * @LastEditTime: 2024-04-11 09:55:04
 | 
			
		||||
 * @LastEditTime: 2024-04-16 13:44:14
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -635,32 +635,34 @@ export default {
 | 
			
		||||
          // this.cutConfig.data = cutArr
 | 
			
		||||
          // this.$refs['cutScrollBoard'].updateRows(cutArr)
 | 
			
		||||
        } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
 | 
			
		||||
          let nameList = []
 | 
			
		||||
          let nameWasteList = []
 | 
			
		||||
          let topNameList = []
 | 
			
		||||
          let productList = []
 | 
			
		||||
          let wasteList = []
 | 
			
		||||
          let sumAreaList = []
 | 
			
		||||
          let yieldList = []
 | 
			
		||||
          this.coldDetData = this.cutWsData.coldDetData
 | 
			
		||||
          // this.cutTableDataList =
 | 
			
		||||
          this.cutWsData.coldDetData.forEach((ele, index) => {
 | 
			
		||||
            nameList.push(ele.lineName)
 | 
			
		||||
            topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
 | 
			
		||||
            productList.push(ele.productArea)
 | 
			
		||||
            wasteList.push(ele.wastArea)
 | 
			
		||||
            nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
 | 
			
		||||
            sumAreaList.push(ele.sumArea)
 | 
			
		||||
            yieldList.push(parseFloat((ele.yield * 100).toFixed(0)))
 | 
			
		||||
          })
 | 
			
		||||
          this.$nextTick(() => {
 | 
			
		||||
            this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
 | 
			
		||||
            this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
 | 
			
		||||
            this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
 | 
			
		||||
            this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
 | 
			
		||||
            this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
 | 
			
		||||
            this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
 | 
			
		||||
          })
 | 
			
		||||
          if (this.cutWsData.coldDetData.length !== 0) {
 | 
			
		||||
            let nameList = []
 | 
			
		||||
            let nameWasteList = []
 | 
			
		||||
            let topNameList = []
 | 
			
		||||
            let productList = []
 | 
			
		||||
            let wasteList = []
 | 
			
		||||
            let sumAreaList = []
 | 
			
		||||
            let yieldList = []
 | 
			
		||||
            this.coldDetData = this.cutWsData.coldDetData
 | 
			
		||||
            // this.cutTableDataList =
 | 
			
		||||
            this.cutWsData.coldDetData.forEach((ele, index) => {
 | 
			
		||||
              nameList.push(ele.lineName)
 | 
			
		||||
              topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea + '㎡')
 | 
			
		||||
              productList.push(ele.productArea)
 | 
			
		||||
              wasteList.push(ele.wastArea)
 | 
			
		||||
              nameWasteList.push('缺陷面积:' + this.NumFormat(ele.wastArea) + '㎡')
 | 
			
		||||
              sumAreaList.push(ele.sumArea)
 | 
			
		||||
              yieldList.push(parseFloat((ele.yield * 100).toFixed(0)))
 | 
			
		||||
            })
 | 
			
		||||
            this.$nextTick(() => {
 | 
			
		||||
              this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
 | 
			
		||||
              this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
 | 
			
		||||
              this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]])
 | 
			
		||||
              this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]])
 | 
			
		||||
              this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]])
 | 
			
		||||
              this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
 | 
			
		||||
            })
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      };
 | 
			
		||||
      // if (typeof (WebSocket) === 'undefined') {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-01-29 13:45:56
 | 
			
		||||
 * @LastEditTime: 2024-04-15 09:28:21
 | 
			
		||||
 * @LastEditTime: 2024-04-16 13:43:05
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -126,22 +126,22 @@ export default {
 | 
			
		||||
						color: '#fff00',
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					bottom: '10%',
 | 
			
		||||
					left: 'center',
 | 
			
		||||
					itemWidth: 12,
 | 
			
		||||
					itemHeight:12,
 | 
			
		||||
          icon: 'roundRect',
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						color: '#fff'
 | 
			
		||||
					},
 | 
			
		||||
					data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
 | 
			
		||||
						name:item.name,
 | 
			
		||||
						itemStyle:{
 | 
			
		||||
							color: this.colors[index%4]
 | 
			
		||||
						}
 | 
			
		||||
					}))
 | 
			
		||||
				},
 | 
			
		||||
				// legend: {
 | 
			
		||||
				// 	bottom: '10%',
 | 
			
		||||
				// 	left: 'center',
 | 
			
		||||
				// 	itemWidth: 12,
 | 
			
		||||
				// 	itemHeight:12,
 | 
			
		||||
        //   icon: 'roundRect',
 | 
			
		||||
				// 	textStyle: {
 | 
			
		||||
				// 		color: '#fff'
 | 
			
		||||
				// 	},
 | 
			
		||||
				// 	data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
 | 
			
		||||
				// 		name:item.name,
 | 
			
		||||
				// 		itemStyle:{
 | 
			
		||||
				// 			color: this.colors[index%4]
 | 
			
		||||
				// 		}
 | 
			
		||||
				// 	}))
 | 
			
		||||
				// },
 | 
			
		||||
				series:[{
 | 
			
		||||
						name: 'ISRA缺陷检测',
 | 
			
		||||
            type: 'pie',
 | 
			
		||||
@@ -168,7 +168,7 @@ export default {
 | 
			
		||||
              },
 | 
			
		||||
              textStyle: {            // 提示文字的样式
 | 
			
		||||
                // color: '#595959',
 | 
			
		||||
                fontSize: 16
 | 
			
		||||
                fontSize: 18
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
						},
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2023-09-21 09:06:28
 | 
			
		||||
 * @LastEditTime: 2024-04-09 15:24:39
 | 
			
		||||
 * @LastEditTime: 2024-04-16 13:39:25
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -156,6 +156,8 @@ export default {
 | 
			
		||||
      this.chart.setOption({
 | 
			
		||||
        // color: colors,
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'item',
 | 
			
		||||
          className: "isra-chart-tooltip",
 | 
			
		||||
          trigger: 'axis',
 | 
			
		||||
          axisPointer: {
 | 
			
		||||
            type: 'cross'
 | 
			
		||||
@@ -318,8 +320,16 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style>
 | 
			
		||||
 | 
			
		||||
.coldProductChart{
 | 
			
		||||
  top: -10px;
 | 
			
		||||
}
 | 
			
		||||
.isra-chart-tooltip {
 | 
			
		||||
  background: #0a2b4f77 !important;
 | 
			
		||||
  border: none !important;
 | 
			
		||||
  backdrop-filter: blur(12px);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 .isra-chart-tooltip * {
 | 
			
		||||
  color: #fff !important;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2023-09-21 09:06:28
 | 
			
		||||
 * @LastEditTime: 2024-04-09 15:24:28
 | 
			
		||||
 * @LastEditTime: 2024-04-16 13:37:38
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -162,6 +162,8 @@ export default {
 | 
			
		||||
        this.chart.setOption({
 | 
			
		||||
          // color: colors,
 | 
			
		||||
          tooltip: {
 | 
			
		||||
            trigger: 'item',
 | 
			
		||||
            className: "isra-chart-tooltip",
 | 
			
		||||
            trigger: 'axis',
 | 
			
		||||
            axisPointer: {
 | 
			
		||||
              type: 'cross'
 | 
			
		||||
@@ -327,4 +329,13 @@ export default {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  top: -30px;
 | 
			
		||||
}
 | 
			
		||||
    .isra-chart-tooltip {
 | 
			
		||||
      background: #0a2b4f77 !important;
 | 
			
		||||
      border: none !important;
 | 
			
		||||
      backdrop-filter: blur(12px);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .isra-chart-tooltip * {
 | 
			
		||||
      color: #fff !important;
 | 
			
		||||
    }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -128,6 +128,8 @@ export default {
 | 
			
		||||
        this.chart.setOption({
 | 
			
		||||
          tooltip: {
 | 
			
		||||
            trigger: 'axis',
 | 
			
		||||
            trigger: 'item',
 | 
			
		||||
            className: "isra-chart-tooltip",
 | 
			
		||||
            axisPointer: {
 | 
			
		||||
              // 坐标轴指示器,坐标轴触发有效
 | 
			
		||||
              type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
 | 
			
		||||
@@ -226,4 +228,13 @@ export default {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  top: -30px;
 | 
			
		||||
}
 | 
			
		||||
.isra-chart-tooltip {
 | 
			
		||||
  background: #0a2b4f77 !important;
 | 
			
		||||
  border: none !important;
 | 
			
		||||
  backdrop-filter: blur(12px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.isra-chart-tooltip * {
 | 
			
		||||
  color: #fff !important;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2023-12-27 13:54:52
 | 
			
		||||
 * @LastEditTime: 2024-04-03 18:12:18
 | 
			
		||||
 * @LastEditTime: 2024-04-16 13:16:34
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -101,11 +101,14 @@ export default {
 | 
			
		||||
      });;
 | 
			
		||||
    },
 | 
			
		||||
    initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
 | 
			
		||||
      let rawData = []
 | 
			
		||||
      let colors = ['#0fdedb', '#2359ec']
 | 
			
		||||
      if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
 | 
			
		||||
        return
 | 
			
		||||
      } else {
 | 
			
		||||
        let rawData = []
 | 
			
		||||
        let colors = ['#0fdedb', '#2359ec']
 | 
			
		||||
        rawData.push(passRateList, wasteList)
 | 
			
		||||
      const totalData = [];
 | 
			
		||||
      // if (rawData.length != 0 && raw,Data,length != 0) {
 | 
			
		||||
        const totalData = [];
 | 
			
		||||
        // if (rawData.length != 0 && raw,Data,length != 0) {
 | 
			
		||||
        for (let i = 0; i < rawData[0].length; ++i) {
 | 
			
		||||
          let sum = 0;
 | 
			
		||||
          for (let j = 0; j < rawData.length; ++j) {
 | 
			
		||||
@@ -113,150 +116,152 @@ export default {
 | 
			
		||||
          }
 | 
			
		||||
          totalData.push(sum);
 | 
			
		||||
        }
 | 
			
		||||
      // }
 | 
			
		||||
      // rawData[1].map((d, did) =>
 | 
			
		||||
      //   console.log((d / totalData[did]).toFixed(3))
 | 
			
		||||
      //   // totalData[did] <= 0 ? 0 : d / totalData[did]
 | 
			
		||||
      // )
 | 
			
		||||
      console.log('total', totalData)
 | 
			
		||||
      const series = [
 | 
			
		||||
        '良品',
 | 
			
		||||
        '废品',
 | 
			
		||||
        // 'Affiliate Ad',
 | 
			
		||||
        // 'Video Ad',
 | 
			
		||||
        // 'Search Engine'
 | 
			
		||||
      ].map((name, sid) => {
 | 
			
		||||
        // console.log(sid)
 | 
			
		||||
        return {
 | 
			
		||||
          name,
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          stack: 'total',
 | 
			
		||||
          barWidth: 12,
 | 
			
		||||
          // label: {
 | 
			
		||||
          //   show: true,
 | 
			
		||||
          //   formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
 | 
			
		||||
          // },
 | 
			
		||||
          color:colors[sid],
 | 
			
		||||
          data: rawData.length != 0 ? rawData[sid].map((d, did) =>
 | 
			
		||||
            totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
 | 
			
		||||
          ) : []
 | 
			
		||||
        };
 | 
			
		||||
      });
 | 
			
		||||
      // this.charts.resize({
 | 
			
		||||
      //   //width: width,
 | 
			
		||||
      //   //height: height,
 | 
			
		||||
      //   // es6解构
 | 
			
		||||
      //   width,
 | 
			
		||||
      //   height
 | 
			
		||||
      // })
 | 
			
		||||
      this.chart = echarts.init(document.getElementById(this.id))
 | 
			
		||||
      let isFinished = false //标记 isFinished
 | 
			
		||||
      this.chart.on('finished', _ => {
 | 
			
		||||
        if (!isFinished) {
 | 
			
		||||
          console.log('我只执行一次')
 | 
			
		||||
          isFinished = true
 | 
			
		||||
          // this.isLoading = false //关闭loading
 | 
			
		||||
          this.chart.resize() //重新渲染charts大小
 | 
			
		||||
        }
 | 
			
		||||
        console.log(113, 'finished')
 | 
			
		||||
      })
 | 
			
		||||
      this.chart.setOption({
 | 
			
		||||
        legend: {
 | 
			
		||||
          formatter: function (name) {
 | 
			
		||||
            //通过name获取到数组对象中的单个对象
 | 
			
		||||
            let singleData = series.filter(function (item) {
 | 
			
		||||
              return item.name == name
 | 
			
		||||
            })
 | 
			
		||||
            return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
 | 
			
		||||
          },
 | 
			
		||||
          itemWidth: 12,
 | 
			
		||||
          itemHeight: 12,
 | 
			
		||||
          bottom: '20',
 | 
			
		||||
          left: '20',
 | 
			
		||||
          icon: 'roundRect',
 | 
			
		||||
          textStyle: {
 | 
			
		||||
            color: 'rgba(255,255,255,.9)',
 | 
			
		||||
            fontSize:12,
 | 
			
		||||
        // }
 | 
			
		||||
        // rawData[1].map((d, did) =>
 | 
			
		||||
        //   console.log((d / totalData[did]).toFixed(3))
 | 
			
		||||
        //   // totalData[did] <= 0 ? 0 : d / totalData[did]
 | 
			
		||||
        // )
 | 
			
		||||
        console.log('total', totalData)
 | 
			
		||||
        const series = [
 | 
			
		||||
          '良品',
 | 
			
		||||
          '废品',
 | 
			
		||||
          // 'Affiliate Ad',
 | 
			
		||||
          // 'Video Ad',
 | 
			
		||||
          // 'Search Engine'
 | 
			
		||||
        ].map((name, sid) => {
 | 
			
		||||
          // console.log(sid)
 | 
			
		||||
          return {
 | 
			
		||||
            name,
 | 
			
		||||
            type: 'bar',
 | 
			
		||||
            stack: 'total',
 | 
			
		||||
            barWidth: 12,
 | 
			
		||||
            // label: {
 | 
			
		||||
            //   show: true,
 | 
			
		||||
            //   formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
 | 
			
		||||
            // },
 | 
			
		||||
            color: colors[sid],
 | 
			
		||||
            data: rawData.length != 0 ? rawData[sid].map((d, did) =>
 | 
			
		||||
              totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
 | 
			
		||||
            ) : []
 | 
			
		||||
          };
 | 
			
		||||
        });
 | 
			
		||||
        // this.charts.resize({
 | 
			
		||||
        //   //width: width,
 | 
			
		||||
        //   //height: height,
 | 
			
		||||
        //   // es6解构
 | 
			
		||||
        //   width,
 | 
			
		||||
        //   height
 | 
			
		||||
        // })
 | 
			
		||||
        this.chart = echarts.init(document.getElementById(this.id))
 | 
			
		||||
        let isFinished = false //标记 isFinished
 | 
			
		||||
        this.chart.on('finished', _ => {
 | 
			
		||||
          if (!isFinished) {
 | 
			
		||||
            console.log('我只执行一次')
 | 
			
		||||
            isFinished = true
 | 
			
		||||
            // this.isLoading = false //关闭loading
 | 
			
		||||
            this.chart.resize() //重新渲染charts大小
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        grid: {
 | 
			
		||||
          top:'0',
 | 
			
		||||
          left: '3%',
 | 
			
		||||
          right: '4%',
 | 
			
		||||
          // bottom: '3%',
 | 
			
		||||
          width: 'auto',
 | 
			
		||||
          height: '95',
 | 
			
		||||
          containLabel: true
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: [
 | 
			
		||||
          {
 | 
			
		||||
            type: 'category',
 | 
			
		||||
            inverse: true,
 | 
			
		||||
            splitLine: {
 | 
			
		||||
              show: false
 | 
			
		||||
          console.log(113, 'finished')
 | 
			
		||||
        })
 | 
			
		||||
        this.chart.setOption({
 | 
			
		||||
          legend: {
 | 
			
		||||
            formatter: function (name) {
 | 
			
		||||
              //通过name获取到数组对象中的单个对象
 | 
			
		||||
              let singleData = series.filter(function (item) {
 | 
			
		||||
                return item.name == name
 | 
			
		||||
              })
 | 
			
		||||
              return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
 | 
			
		||||
            },
 | 
			
		||||
            axisTick: {
 | 
			
		||||
              show: false
 | 
			
		||||
            },
 | 
			
		||||
            axisLine: {
 | 
			
		||||
              show: false
 | 
			
		||||
            },
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              show: true,
 | 
			
		||||
              inside: true,
 | 
			
		||||
              interval: 0, //横轴信息全部显
 | 
			
		||||
              splitNumber: 50,
 | 
			
		||||
              // boundaryGap: [20, 20],
 | 
			
		||||
              textStyle: {
 | 
			
		||||
                color: 'rgba(255,255,255,.9)',
 | 
			
		||||
                verticalAlign: 'bottom',
 | 
			
		||||
                fontSize: 16,
 | 
			
		||||
                align: 'left',
 | 
			
		||||
                padding: [0, 0, 10, -5]
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
            data: topNameList
 | 
			
		||||
            itemWidth: 12,
 | 
			
		||||
            itemHeight: 12,
 | 
			
		||||
            bottom: '20',
 | 
			
		||||
            left: '20',
 | 
			
		||||
            icon: 'roundRect',
 | 
			
		||||
            textStyle: {
 | 
			
		||||
              color: 'rgba(255,255,255,.9)',
 | 
			
		||||
              fontSize: 12,
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            type: 'category',
 | 
			
		||||
            inverse: true,
 | 
			
		||||
            splitLine: {
 | 
			
		||||
              show: false
 | 
			
		||||
          grid: {
 | 
			
		||||
            top: '0',
 | 
			
		||||
            left: '3%',
 | 
			
		||||
            right: '4%',
 | 
			
		||||
            // bottom: '3%',
 | 
			
		||||
            width: 'auto',
 | 
			
		||||
            height: '95',
 | 
			
		||||
            containLabel: true
 | 
			
		||||
          },
 | 
			
		||||
          yAxis: [
 | 
			
		||||
            {
 | 
			
		||||
              type: 'category',
 | 
			
		||||
              inverse: true,
 | 
			
		||||
              splitLine: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisTick: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisLine: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisLabel: {
 | 
			
		||||
                show: true,
 | 
			
		||||
                inside: true,
 | 
			
		||||
                interval: 0, //横轴信息全部显
 | 
			
		||||
                splitNumber: 50,
 | 
			
		||||
                // boundaryGap: [20, 20],
 | 
			
		||||
                textStyle: {
 | 
			
		||||
                  color: 'rgba(255,255,255,.9)',
 | 
			
		||||
                  verticalAlign: 'bottom',
 | 
			
		||||
                  fontSize: 16,
 | 
			
		||||
                  align: 'left',
 | 
			
		||||
                  padding: [0, 0, 10, -5]
 | 
			
		||||
                }
 | 
			
		||||
              },
 | 
			
		||||
              data: topNameList
 | 
			
		||||
            },
 | 
			
		||||
            axisTick: {
 | 
			
		||||
              show: false
 | 
			
		||||
            },
 | 
			
		||||
            axisLine: {
 | 
			
		||||
              show: false
 | 
			
		||||
            },
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              show: true,
 | 
			
		||||
              inside: true,
 | 
			
		||||
              interval: 0, //横轴信息全部显
 | 
			
		||||
              splitNumber: 50,
 | 
			
		||||
              // boundaryGap: [20, 20],
 | 
			
		||||
              textStyle: {
 | 
			
		||||
                color: 'rgba(255,255,255,.9)',
 | 
			
		||||
                verticalAlign: 'bottom',
 | 
			
		||||
                fontSize: 16,
 | 
			
		||||
                align: 'right',
 | 
			
		||||
                padding: [0, 0, 10, -5]
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
            data: nameWasteList
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          // max: 120,
 | 
			
		||||
          show: false,
 | 
			
		||||
        },
 | 
			
		||||
        series:series
 | 
			
		||||
      })
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        setTimeout(() => {
 | 
			
		||||
          this.resize()
 | 
			
		||||
        },1000);
 | 
			
		||||
      })
 | 
			
		||||
            {
 | 
			
		||||
              type: 'category',
 | 
			
		||||
              inverse: true,
 | 
			
		||||
              splitLine: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisTick: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisLine: {
 | 
			
		||||
                show: false
 | 
			
		||||
              },
 | 
			
		||||
              axisLabel: {
 | 
			
		||||
                show: true,
 | 
			
		||||
                inside: true,
 | 
			
		||||
                interval: 0, //横轴信息全部显
 | 
			
		||||
                splitNumber: 50,
 | 
			
		||||
                // boundaryGap: [20, 20],
 | 
			
		||||
                textStyle: {
 | 
			
		||||
                  color: 'rgba(255,255,255,.9)',
 | 
			
		||||
                  verticalAlign: 'bottom',
 | 
			
		||||
                  fontSize: 16,
 | 
			
		||||
                  align: 'right',
 | 
			
		||||
                  padding: [0, 0, 10, -5]
 | 
			
		||||
                }
 | 
			
		||||
              },
 | 
			
		||||
              data: nameWasteList
 | 
			
		||||
            }
 | 
			
		||||
          ],
 | 
			
		||||
          xAxis: {
 | 
			
		||||
            // max: 120,
 | 
			
		||||
            show: false,
 | 
			
		||||
          },
 | 
			
		||||
          series: series
 | 
			
		||||
        })
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          setTimeout(() => {
 | 
			
		||||
            this.resize()
 | 
			
		||||
          }, 1000);
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      // this.chart.resize({
 | 
			
		||||
      //   width: 'auto',
 | 
			
		||||
      //   height: 90
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-07-19 15:18:30
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @LastEditTime: 2024-04-10 16:10:11
 | 
			
		||||
 * @LastEditTime: 2024-04-16 14:03:31
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -42,14 +42,16 @@
 | 
			
		||||
              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;">
 | 
			
		||||
                <!-- <el-col :span="12"> -->
 | 
			
		||||
                <!-- <div style="height: 34px;"> -->
 | 
			
		||||
                <span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
 | 
			
		||||
                <el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider>
 | 
			
		||||
                <!-- <span v-if="op.size" class="split"></span> -->
 | 
			
		||||
                <span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                op.specifications }}</span>
 | 
			
		||||
                <el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
 | 
			
		||||
                <span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                op.planQuantity }}</span>
 | 
			
		||||
                <span style="display: inline-block;width: 330px;">
 | 
			
		||||
                  <span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
 | 
			
		||||
                  <el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider>
 | 
			
		||||
                  <!-- <span v-if="op.size" class="split"></span> -->
 | 
			
		||||
                  <span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                    op.specifications }}</span>
 | 
			
		||||
                  <el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
 | 
			
		||||
                  <span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                    op.planQuantity }}</span>
 | 
			
		||||
                </span>
 | 
			
		||||
                <span v-if="op.actualQuantity" class="orderFinish"
 | 
			
		||||
                  style="font-size: 14px;opacity: calc(.6);margin-left: 130px;">{{
 | 
			
		||||
                  op.actualQuantity
 | 
			
		||||
@@ -108,80 +110,80 @@ const qualityYearList = [
 | 
			
		||||
	{
 | 
			
		||||
		name: '翻转机',
 | 
			
		||||
		code: 'EQ20240110112358000235',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
		status: '正常',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '烘干炉',
 | 
			
		||||
		code: 'EQ20240110112537000241',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
		status: '计划停机',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '清洗机',
 | 
			
		||||
		code: '	EQ20240110112310000232',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '钢化清洗机',
 | 
			
		||||
		code: 'EQ20240110111700000208',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '固化机',
 | 
			
		||||
		code: 'EQ20240110111700000201',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '磨边清洗机',
 | 
			
		||||
		code: '	EQ20240110111700000208',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '预热机',
 | 
			
		||||
		code: 'EQ20240110111700000205',
 | 
			
		||||
		status: '故障',
 | 
			
		||||
		error: '是',
 | 
			
		||||
    error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '下片机',
 | 
			
		||||
		code: 'EQ20240115151435000279',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'false',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '冷却机',
 | 
			
		||||
		code: 'EQ20240110111700000203',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'false',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: 'A储片机106',
 | 
			
		||||
		code: 'EQ20240110111700000202',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'false',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '二次清洗机',
 | 
			
		||||
		code: 'EQ20240110111700000209',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'false',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '二次磨边机',
 | 
			
		||||
		code: '	EQ20240110110927000181',
 | 
			
		||||
		status: '故障',
 | 
			
		||||
		error: '是',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'false',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		name: '测试设备',
 | 
			
		||||
		code: 'EQ20240110111700000201',
 | 
			
		||||
		status: '运行',
 | 
			
		||||
		error: '否',
 | 
			
		||||
    status: '正常',
 | 
			
		||||
		error: 'true',
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const qualityMonthList = [
 | 
			
		||||
@@ -380,7 +382,7 @@ export default {
 | 
			
		||||
        progressRate: 0.933333,
 | 
			
		||||
        specifications: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish:111,
 | 
			
		||||
        actualQuantity:111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '2',
 | 
			
		||||
@@ -388,7 +390,7 @@ export default {
 | 
			
		||||
        progressRate: 0.932323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '3',
 | 
			
		||||
@@ -396,7 +398,7 @@ export default {
 | 
			
		||||
        progressRate: 0.23232,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '4',
 | 
			
		||||
@@ -404,7 +406,7 @@ export default {
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '5',
 | 
			
		||||
@@ -412,7 +414,7 @@ export default {
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '6',
 | 
			
		||||
@@ -420,7 +422,7 @@ export default {
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '7',
 | 
			
		||||
@@ -428,7 +430,7 @@ export default {
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '8',
 | 
			
		||||
@@ -436,7 +438,7 @@ export default {
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
        actualQuantity: 111,
 | 
			
		||||
      },
 | 
			
		||||
			// {
 | 
			
		||||
			//   id: '5',
 | 
			
		||||
@@ -456,7 +458,7 @@ export default {
 | 
			
		||||
          progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
 | 
			
		||||
          specifications: ele.specifications ?  '规格' + ele.specifications :null,
 | 
			
		||||
          planQuantity: ele.plan ? '计划' + ele.plan + '片' : null,
 | 
			
		||||
          finish: ele.finish + '片',
 | 
			
		||||
          actualQuantity: ele.actualQuantity + '片',
 | 
			
		||||
				};
 | 
			
		||||
			}
 | 
			
		||||
		});
 | 
			
		||||
@@ -480,8 +482,8 @@ export default {
 | 
			
		||||
          <span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
 | 
			
		||||
            </span>`,
 | 
			
		||||
			`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == 'false' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:13px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
		]);
 | 
			
		||||
    this.eqConfig.data = eqArr;
 | 
			
		||||
    let data = [
 | 
			
		||||
@@ -747,8 +749,8 @@ export default {
 | 
			
		||||
						`<span style="color:rgba(255,255,255,0.5)">${
 | 
			
		||||
							item.code || ''
 | 
			
		||||
						}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '正常' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == 'false' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:10px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
					]);
 | 
			
		||||
          this.eqConfig.data = eqArr;
 | 
			
		||||
          // this.$nextTick(() => {
 | 
			
		||||
@@ -790,7 +792,23 @@ export default {
 | 
			
		||||
              outputNumList
 | 
			
		||||
            );
 | 
			
		||||
          })
 | 
			
		||||
				} else if (this.SJGInitWebSocket === 'inspection') {
 | 
			
		||||
        } else if (this.SJGWsData.type === 'inspection') {
 | 
			
		||||
          let processArr = this.SJGWsData.detData.map((item, index) => [
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
 | 
			
		||||
            </span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
 | 
			
		||||
            </span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''
 | 
			
		||||
            }</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)">${item.count || ''
 | 
			
		||||
            }</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''
 | 
			
		||||
            }</span>`,
 | 
			
		||||
          ]);
 | 
			
		||||
          this.processConfig.data = processArr;
 | 
			
		||||
          // this.$nextTick(() => {
 | 
			
		||||
          this.$refs['processScrollBoard'].updateRows(processArr);
 | 
			
		||||
          // })
 | 
			
		||||
				}
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user