1141 lines
39 KiB
Vue
1141 lines
39 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-01-29 16:50:26
|
||
* @LastEditTime: 2024-04-25 09:03:50
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
|
||
<template>
|
||
<div id="container" ref="container" class="visual-container" :style="styles">
|
||
<el-row class="container-title" :style="{
|
||
height: 88 + 'px',
|
||
lineHeight: 88 + 'px',
|
||
fontSize: 31 + 'px'
|
||
}">
|
||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||
许昌安彩冷端看板
|
||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||
<h3 class="time">{{ times }}</h3>
|
||
<!-- <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px',fontSize:'32px'}"
|
||
@click="changeFullScreen">
|
||
<svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
|
||
<svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
|
||
</el-button> -->
|
||
</el-row>
|
||
<el-row class="container-main flex-col" type="flex">
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
|
||
:table-data="cutTableDataList" /> -->
|
||
<dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
|
||
</base-container>
|
||
</el-col>
|
||
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||
<base-container :show-time="true" :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
|
||
:title-icon="'energyMonitoring'">
|
||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||
<top-radio-group />
|
||
</div> -->
|
||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||
<div v-if="coldDetData" class="myLegend">
|
||
<div class=" barCircleLegend"></div>
|
||
<div class=" barCircle"></div>
|
||
<h4 class="barText">产线良品率</h4>
|
||
<div class="barLegend"></div>
|
||
<h4 class="barCircleText">产线产量</h4>
|
||
</div>
|
||
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
|
||
:height="359" :show-legend="true" />
|
||
</base-container>
|
||
</el-col>
|
||
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||
<base-container :show-time="true" :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'"
|
||
:title-icon="'scrap'">
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
||
:table-data="ISRAList" /> -->
|
||
<ISRAChart ref="ISRAChart" />
|
||
<!-- <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> -->
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :show-time="true" :no-content-padding="true" :height="256" :title="'废片 缺陷数据'"
|
||
:size="'eqStatus'" :title-icon="'scrap'">
|
||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||
<top-radio-group />
|
||
</div> -->
|
||
<!-- <el-row :gutter="9"> -->
|
||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
|
||
<pile-bar-chart id=" 'one' " style="margin-top: -5px;" ref="firstPileChart" :height="80" />
|
||
<second-pile-bar-chart id=" 'second' " ref="secondPileChart" :height="90" />
|
||
<third-pile-bar-chart id=" 'third' " ref="thirdPileChart" :height="90" />
|
||
<fourth-pile-bar-chart id=" 'fourth' " ref="fourthPileChart" :height="90" />
|
||
<fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="90" />
|
||
<!-- <pile-bar-chart ref="secondPileChart"
|
||
:height="90" />
|
||
<pile-bar-chart ref="thirdPileChart"
|
||
:height="90" />
|
||
<pile-bar-chart ref="fourthPileChart"
|
||
:height="90" />
|
||
<pile-bar-chart ref="fifthPileChart"
|
||
:height="90" /> -->
|
||
<!-- </el-col> -->
|
||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-table3
|
||
:page="2"
|
||
:limit="5"
|
||
|
||
:table-config="qualityTableProps2"
|
||
:table-data="qualityList2"
|
||
/>
|
||
</el-col> -->
|
||
<!-- </el-row> -->
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
|
||
<base-container :show-time="false" :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'"
|
||
:title-icon="'eqMonitoring'">
|
||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||
<top-radio-group />
|
||
</div> -->
|
||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||
<el-col :span="8" style="">
|
||
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0">熔化风机</div>
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||
:table-data="funList" /> -->
|
||
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
|
||
</el-col>
|
||
<span class="eqLine"></span>
|
||
<el-col :span="8">
|
||
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||
:table-data="annealFunList" /> -->
|
||
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
|
||
</el-col>
|
||
<span class="eqLineTwo"></span>
|
||
<el-col :span="8" style="float: right;">
|
||
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
|
||
:table-data="realEqList" /> -->
|
||
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
|
||
|
||
</el-col>
|
||
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||
:show-legend="true" /> -->
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- end -->
|
||
<!-- <el-col :span="16">
|
||
<el-row>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container :height="672">
|
||
<base-video :video-height="624" />
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
-->
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import baseContainer from './components/baseContainer'
|
||
import baseTable1 from './components/baseTable'
|
||
import screenfull from 'screenfull'
|
||
import pileBarChart from './components/pileBarChart'
|
||
import secondPileBarChart from './components/pileBarChart'
|
||
import thirdPileBarChart from './components/pileBarChart'
|
||
import fourthPileBarChart from './components/pileBarChart'
|
||
import fifthPileBarChart from './components/pileBarChart'
|
||
|
||
import colorDiv from './components/colorDiv'
|
||
import moment from "moment";
|
||
import doubleYChart from './components/coldDoubleYChart'
|
||
import { parseTime } from '../core/mixins/code-filter';
|
||
import ISRAChart from './components/ISRAChart.vue';
|
||
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
|
||
import LinearBarChart from './components/linearBarChart'
|
||
import WebSocketHeartbeat from './ws.js';
|
||
export default {
|
||
name: 'ProductionMonitoringCockpit',
|
||
components: {
|
||
baseContainer,
|
||
baseTable1,
|
||
pileBarChart,
|
||
doubleYChart,
|
||
LinearBarChart,
|
||
ISRAChart,
|
||
secondPileBarChart,
|
||
thirdPileBarChart ,
|
||
fourthPileBarChart,
|
||
fifthPileBarChart ,
|
||
},
|
||
data() {
|
||
return {
|
||
beilv2: 1,
|
||
beilv: 1,
|
||
value: 100,
|
||
realEqList:[],
|
||
orderList: [],
|
||
times: '',
|
||
cutConfig: {
|
||
header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [60,60, 132, 142, 105,105,90],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
funConfig: {
|
||
header: ['序号', '设备名称', '运行状态'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [60, 180, 90],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
realEqConfig: {
|
||
header: ['序号','设备名称','运行状态'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [60, 180, 90],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
annealFunConfig: {
|
||
header: ['序号', '设备名称', '运行状态'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [60, 180, 90],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
ISRAConfig: {
|
||
header: ['序号', '产线', '时间', '缺陷类型', '缺陷数量', '占比'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [70, 70, 130, 150, 110, 110,],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
ISRAList:[],
|
||
EnergyMonitoringNameList: [],
|
||
EnergyMonitoringList: [],
|
||
clientWidth: 0,
|
||
containerWidth: 111111,
|
||
isFullScreen: false,
|
||
cutWsData: {},
|
||
Cutws: undefined,
|
||
funWs: undefined,
|
||
SJGws: undefined,
|
||
funWsData: {},
|
||
coldDetData:[],
|
||
SJGWsData: {},
|
||
cxNameList:[],
|
||
cxDataList:[],
|
||
// orderProcessList: [],
|
||
dateType: '0',
|
||
wsIsOpen:false,
|
||
funList:[],
|
||
annealFunList: [],
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
equipmentId: null,
|
||
productionLineId: null,
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
// ...mapGetters(['sidebar']),
|
||
styles() {
|
||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
|
||
return {
|
||
transform: `scale(${v})`,
|
||
transformOrigin: 'top left'
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
isFullScreen:function (val) {
|
||
if (val) {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
console.log(_this.beilv2);
|
||
} else {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
}
|
||
},
|
||
clientWidth(val) {
|
||
if (!this.timer) {
|
||
this.clientWidth = val
|
||
this.beilv2 = this.clientWidth / 1920
|
||
this.timer = true
|
||
let _this = this
|
||
setTimeout(function () {
|
||
_this.timer = false
|
||
}, 500)
|
||
}
|
||
// 这里可以添加修改时的方法
|
||
this.windowWidth(val);
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
setTimeout(() => {
|
||
window.location.reload()
|
||
}, 86400000)
|
||
// this.getData()
|
||
// this.getReaiData()
|
||
},
|
||
destroyed() {
|
||
this.CutWebsocketClose()
|
||
this.SJGWebsocketClose()
|
||
this.funWebSocketClose()
|
||
if (this.wsIsOpen) {
|
||
closeDcsMsg()
|
||
this.wsIsOpen = false
|
||
console.log('关闭============')
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getProductData()
|
||
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||
this.getTimes()
|
||
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
|
||
this.funInitWebSocket()
|
||
if (!this.wsIsOpen) {
|
||
getDcsMsg()
|
||
this.wsIsOpen = true
|
||
console.log('开启websocket==========')
|
||
}
|
||
this.CutInitWebSocket()
|
||
this.SJGInitWebSocket()
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
window.onresize = () => {
|
||
return (() => {
|
||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||
this.beilv2 = _this.clientWidth / 1920
|
||
})()
|
||
}
|
||
},
|
||
methods: {
|
||
getProductData() {
|
||
let nameList = []
|
||
let nameWasteList = []
|
||
let topNameList = []
|
||
let productList = []
|
||
let wasteList = []
|
||
let yieldList = []
|
||
let sumAreaList = []
|
||
// let yieldList = []
|
||
// this.cutTableDataList =
|
||
this.coldDetData = [
|
||
{
|
||
"first": 0.8834,
|
||
"lineName": "Y61",
|
||
"product": 0.8834,
|
||
"productArea": 35069.28,
|
||
"second": 0,
|
||
'sumArea': 38400,
|
||
'wastArea': 3330.72,
|
||
"yield": 0.9133
|
||
},
|
||
{
|
||
"first": 0.847,
|
||
"lineName": "Y62",
|
||
"product": 0.847,
|
||
"productArea": 26765.46,
|
||
"second": 0,
|
||
'sumArea': 1111111,
|
||
'wastArea': 22222,
|
||
"yield": 0.9133
|
||
},
|
||
{
|
||
"first": 0.8668,
|
||
"lineName": "Y63",
|
||
"product": 0.8668,
|
||
"productArea": 26448.46,
|
||
"second": 0,
|
||
'sumArea': 1111111,
|
||
'wastArea': 22222,
|
||
"yield": 0.9133
|
||
},
|
||
{
|
||
"first": 0.9064,
|
||
"lineName": "Y64",
|
||
"product": 0.9064,
|
||
"productArea": 26667.32,
|
||
"second": 0,
|
||
'sumArea': 1111111,
|
||
'wastArea': 22222,
|
||
"yield": 0.9133
|
||
},
|
||
{
|
||
"first": 0.8838,
|
||
"lineName": "Y65",
|
||
"product": 0.8838,
|
||
"productArea": 26554.32,
|
||
"second": 0,
|
||
'sumArea': 1111111,
|
||
'wastArea': 22222,
|
||
"yield": 0.9133
|
||
}
|
||
]
|
||
this.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) + '㎡')
|
||
// yieldList.push({
|
||
// name: '良品',
|
||
// yield:ele.yield
|
||
// })
|
||
sumAreaList.push(ele.sumArea)
|
||
yieldList.push((ele.yield * 100).toFixed(0))
|
||
})
|
||
this.$nextTick(() => {
|
||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||
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]])
|
||
})
|
||
},
|
||
// getReaiData() {
|
||
// let detData = [
|
||
// {
|
||
// name: '1',
|
||
// run: '运行',
|
||
// },
|
||
// {
|
||
// name: '2',
|
||
// run: '未运行',
|
||
// },
|
||
// {
|
||
// name: '3',
|
||
// run: '运行',
|
||
// },
|
||
// {
|
||
// name: '4',
|
||
// run: '未运行',
|
||
// },
|
||
// {
|
||
// name: '1',
|
||
// run: '运行',
|
||
// },
|
||
// ]
|
||
// let arr = []
|
||
// let index = 0
|
||
// for (let i in detData) {
|
||
// index++,
|
||
// arr.push([
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||
// </span>`,
|
||
// // `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
|
||
// // </span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)"><div style="${detData[i] == '运行' ? '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> ${detData[i] || ''}</span>`,
|
||
// ])
|
||
// }
|
||
// // this.$nextTick(() => {
|
||
// this.annealFunConfig.data = arr
|
||
// this.$refs['annealFunScrollBoard'].updateRows(arr)
|
||
// // })
|
||
// },
|
||
// getData() {
|
||
// let detData = [
|
||
// {
|
||
// name: '1',
|
||
// run: '运行',
|
||
// },
|
||
// {
|
||
// name: '2',
|
||
// run: '未运行',
|
||
// },
|
||
// {
|
||
// name: '3',
|
||
// run: '运行',
|
||
// },
|
||
// {
|
||
// name: '4',
|
||
// run: '未运行',
|
||
// },
|
||
// {
|
||
// name: '1',
|
||
// run: '运行',
|
||
// },
|
||
// ]
|
||
// this.realEqList = detData.map((item, index) => [
|
||
// // console.log(item)
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
// </span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? '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.run || ''}</span>`,
|
||
// ])
|
||
// // this.$nextTick(() => {
|
||
// this.realEqConfig.data = this.realEqList
|
||
// this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
|
||
// // })
|
||
// },
|
||
CutWebsocketClose(e) {
|
||
this.Cutws.ws.onclose = (event) => { console.log(event );}
|
||
},
|
||
SJGWebsocketClose(e) {
|
||
this.SJGws.ws.onclose = (event) => { console.log(event); }
|
||
},
|
||
funWebSocketClose(e) {
|
||
this.funWs.ws.onclose = (event) => { console.log(event); }
|
||
},
|
||
formatTime(time, option) {
|
||
console.log(time);
|
||
const d = new Date(time)
|
||
return (
|
||
d.getMonth() +
|
||
1 +
|
||
'月' +
|
||
d.getDate() +
|
||
'日' +
|
||
d.getHours() +
|
||
'时'
|
||
// +
|
||
// d.getMinutes() +
|
||
// '分'
|
||
)
|
||
// }
|
||
},
|
||
getTimes() {
|
||
setInterval(this.getTimesInterval, 1000);
|
||
},
|
||
getTimesInterval: function () {
|
||
let _this = this;
|
||
let year = new Date().getFullYear(); //获取当前时间的年份
|
||
let month = new Date().getMonth() + 1; //获取当前时间的月份
|
||
let day = new Date().getDate(); //获取当前时间的天数
|
||
let hours = new Date().getHours(); //获取当前时间的小时
|
||
let minutes = new Date().getMinutes(); //获取当前时间的分数
|
||
let seconds = new Date().getSeconds(); //获取当前时间的秒数
|
||
//当小于 10 的是时候，在前面加 0
|
||
if (hours < 10) {
|
||
hours = "0" + hours;
|
||
}
|
||
if (minutes < 10) {
|
||
minutes = "0" + minutes;
|
||
}
|
||
if (seconds < 10) {
|
||
seconds = "0" + seconds;
|
||
}
|
||
//拼接格式化当前时间
|
||
this.times = year + "." + month + "." + day + " " + hours + ":" + minutes + ":" + seconds;
|
||
},
|
||
SJGInitWebSocket() {
|
||
let date = new Date().valueOf()
|
||
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
||
this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
|
||
|
||
// 处理收到的消息
|
||
this.SJGws.ws.onmessage = (event) => {
|
||
this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
|
||
if (this.SJGWsData.type === 'isra') {
|
||
console.log('222222', this.SJGWsData.detData)
|
||
console.log(this.SJGWsData.detData);
|
||
let chartData = this.SJGWsData.detData.map((item, index) => {
|
||
return {
|
||
name: item.type,
|
||
num: item.num
|
||
}
|
||
})
|
||
this.$refs['ISRAChart'].updateChart(chartData)
|
||
} else if (this.SJGWsData.type === 'equipment') {
|
||
this.realEqList = this.SJGWsData.detData.map((item, index) => [
|
||
// console.log(item)
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? '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.run || ''}</span>`,
|
||
])
|
||
}
|
||
this.realEqConfig.data = this.realEqList
|
||
// this.$nextTick(() => {
|
||
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
|
||
// })
|
||
};
|
||
// if (typeof (WebSocket) === 'undefined') {
|
||
// alert('您的浏览器不支持WebSocket')
|
||
// } else {
|
||
// // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
|
||
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||
// let date = new Date().valueOf()
|
||
// const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
||
// this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||
// // 监听 WebSocket 连接
|
||
// this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||
// // 监听 WebSocket 错误信息
|
||
// this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
||
// // 监听 WebSocket 消息
|
||
// this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
||
// // 监听 webSocket 断开信息
|
||
// this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
||
// }
|
||
},
|
||
CutInitWebSocket() {
|
||
let date = new Date().valueOf()
|
||
const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
|
||
// const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
||
this.Cutws = new WebSocketHeartbeat(cutWsUrl);
|
||
|
||
// 处理收到的消息
|
||
this.Cutws.ws.onmessage = (event) => {
|
||
console.log(event)
|
||
this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
|
||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||
let cutArr = this.cutWsData.productHourData.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.lineName || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${this.formatTime(item.time) || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${this.getSize(item.size) || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${this.NumFormat(item.productArea) + '㎡' || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${this.NumFormat(item.wasteArea) + '㎡' || ''}</span>`,
|
||
`<div style = "${(item.product * 100).toFixed(0) >= 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(0) + '%' || ''}</div>
|
||
<div style = "${(item.product * 100).toFixed(0) <= 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
|
||
])
|
||
this.cutConfig.data = cutArr
|
||
// this.$nextTick(() => {
|
||
this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||
// })
|
||
// this.cutConfig.data = cutArr
|
||
// this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||
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(2)))
|
||
})
|
||
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') {
|
||
// alert('您的浏览器不支持WebSocket')
|
||
// } else {
|
||
// // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
|
||
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||
// let date = new Date().valueOf()
|
||
// const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
|
||
|
||
// this.cutWebsocket = new WebSocket(cutWsUrl)
|
||
// // 监听 WebSocket 连接
|
||
// this.cutWebsocket.onopen = this.cutWebsocketOnOpen
|
||
// // 监听 WebSocket 错误信息
|
||
// this.cutWebsocket.onerror = this.cutWebsocketOnError
|
||
// // 监听 WebSocket 消息
|
||
// this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
|
||
// // 监听 webSocket 断开信息
|
||
// this.cutWebsocket.onclose = this.cutWebsocketClose
|
||
// }
|
||
},
|
||
funInitWebSocket() {
|
||
let date = new Date().valueOf()
|
||
const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
|
||
this.funWs = new WebSocketHeartbeat(funWsUrl);
|
||
// 处理收到的消息
|
||
this.funWs.ws.onmessage = (event) => {
|
||
this.funWsData = event?.data ? JSON.parse(event?.data) : {}
|
||
// FanInfo
|
||
if (this.funWsData.type === 'AnnealFanInfo') {
|
||
let arr = []
|
||
let index = 0
|
||
for (let i in this.funWsData.data.annealFanInfo) {
|
||
index++,
|
||
arr.push([
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||
</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
|
||
// </span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.annealFanInfo[i] == '运行' ? '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> ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
|
||
])
|
||
}
|
||
this.annealFunConfig.data = arr
|
||
// this.$nextTick(() => {
|
||
this.$refs['annealFunScrollBoard'].updateRows(arr)
|
||
// })
|
||
}
|
||
if (this.funWsData.type === 'FanInfo') {
|
||
let arr = []
|
||
let index = 0
|
||
for (let i in this.funWsData.data.fanInfo) {
|
||
index++,
|
||
arr.push([
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${i || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.fanInfo[i] == '运行' ? '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> ${this.funWsData.data.fanInfo[i] || ''}</span>`,
|
||
])
|
||
}
|
||
this.funConfig.data = arr
|
||
// this.$nextTick(() => {
|
||
this.$refs['funScrollBoard'].updateRows(arr)
|
||
// })
|
||
}
|
||
};
|
||
// if (typeof (WebSocket) === 'undefined') {
|
||
// alert('您的浏览器不支持WebSocket')
|
||
// } else {
|
||
// // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
|
||
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||
// let date = new Date().valueOf()
|
||
// const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
|
||
// this.funWebsocket = new WebSocket(funWsUrl)
|
||
// // 监听 WebSocket 连接
|
||
// this.funWebsocket.onopen = this.funWebsocketOnOpen
|
||
// // 监听 WebSocket 错误信息
|
||
// this.funWebsocket.onerror = this.funWebsocketOnError
|
||
// // 监听 WebSocket 消息
|
||
// this.funWebsocket.onmessage = this.funWebsocketOnMessage
|
||
// // 监听 webSocket 断开信息
|
||
// this.funWebsocket.onclose = this.funWebsocketClose
|
||
// }
|
||
},
|
||
NumFormat(value) {
|
||
if (!value) return '0.00'
|
||
value = value.toFixed(2)
|
||
var intPart = Math.trunc(value) // 获取整数部分
|
||
// var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
|
||
var floatPart = '.00' // 预定义小数部分
|
||
var value2Array = value.split('.')
|
||
// =2表示数据有小数位
|
||
if (value2Array.length === 2) {
|
||
floatPart = value2Array[1].toString() // 拿到小数部分
|
||
if (floatPart.length === 1) {
|
||
return intPart + '.' + floatPart + '0'
|
||
} else {
|
||
return intPart + '.' + floatPart
|
||
}
|
||
} else {
|
||
return intPart + floatPart
|
||
}
|
||
},
|
||
// funWebsocketOnOpen() {
|
||
// console.log('socket连接成功')
|
||
// this.SJGWebsocket.onmessage()
|
||
// },
|
||
// // 连接建立失败重连
|
||
// funWebsocketOnError(e) {
|
||
// this.funInitWebSocket()
|
||
// },
|
||
// 数据接收
|
||
// funWebsocketOnMessage(e) {
|
||
// this.funWsData = e?.data ? JSON.parse(e?.data) : {}
|
||
// // FanInfo
|
||
// if (this.funWsData.type === 'AnnealFanInfo') {
|
||
// let arr = []
|
||
// let index = 0
|
||
// for (let i in this.funWsData.data.annealFanInfo) {
|
||
// index++,
|
||
// arr.push([
|
||
// `
|
||
// <span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||
// </span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
|
||
// </span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
|
||
// ])
|
||
// }
|
||
// this.annealFunConfig.data = arr
|
||
// this.$refs['annealFunScrollBoard'].updateRows(arr)
|
||
// }
|
||
// if (this.funWsData.type === 'FanInfo') {
|
||
// let arr = []
|
||
// let index = 0
|
||
// for (let i in this.funWsData.data.fanInfo) {
|
||
// index++,
|
||
// arr.push([
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
|
||
// ])
|
||
// }
|
||
// this.funConfig.data = arr
|
||
// this.$refs['funScrollBoard'].updateRows(arr)
|
||
// }
|
||
// },
|
||
// cutWebsocketOnOpen() {
|
||
// console.log('socket连接成功')
|
||
// this.SJGWebsocket.onmessage()
|
||
// },
|
||
// // 连接建立失败重连
|
||
// cutWebsocketOnError(e) {
|
||
// this.CutInitWebSocket()
|
||
// },
|
||
getSize(str) {
|
||
// console.log(str.match(/\d+(\.\d+)?/g))
|
||
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
|
||
return parseFloat(ele)
|
||
})
|
||
// console.log(size[0] + '*' + size[1] + '*' + size[2]);
|
||
return size[0] + '*' + size[1] + '*' + size[2]
|
||
},
|
||
windowWidth(value) {
|
||
this.clientWidth = value
|
||
this.beilv2 = this.clientWidth / 1920
|
||
},
|
||
change() {
|
||
console.log(this.isFullScreen);
|
||
this.isFullScreen = screenfull.isFullscreen
|
||
},
|
||
init() {
|
||
if (screenfull.isEnabled) {
|
||
screenfull.on('change', this.change)
|
||
}
|
||
},
|
||
destroy() {
|
||
if (screenfull.isEnabled) {
|
||
screenfull.off('change', this.change)
|
||
}
|
||
},
|
||
changeFullScreen() {
|
||
// this.containerWidth = 223223223
|
||
if (!screenfull.isEnabled) {
|
||
this.$message({
|
||
message: 'you browser can not work',
|
||
type: 'warning'
|
||
})
|
||
return false
|
||
}
|
||
screenfull.toggle()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.myLegend{
|
||
position: absolute;
|
||
top: -20px;
|
||
right: 20px;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,.6);
|
||
.barLegend{
|
||
// float: left;
|
||
background: linear-gradient(#9DD5FF, #1295FF);
|
||
width: 10px;
|
||
height: 10px;
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
border-radius: 30%;
|
||
}
|
||
.barText{
|
||
// float: right;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
.barCircleLegend{
|
||
width: 15px;
|
||
height: 1px;
|
||
background-color: rgba(255, 209, 96, 1);
|
||
position: absolute;
|
||
left: -4.1715px;
|
||
top: 21.7px;
|
||
}
|
||
.barCircle{
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 209, 96, 1);
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
margin-bottom: 1.7px;
|
||
}
|
||
.barCircleText{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.visual-container {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
||
background-size: cover;
|
||
|
||
// opacity: .8;
|
||
.container-title {
|
||
width: 100%;
|
||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
color: rgba(0, 255, 247, 1);
|
||
text-align: center;
|
||
letter-spacing: 8px;
|
||
word-spacing: 8px;
|
||
.unit {
|
||
position: absolute;
|
||
left: 290px;
|
||
top: 25px;
|
||
color: rgba(255, 255, 255, 0.80);
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.time {
|
||
position: absolute;
|
||
left: 1360px;
|
||
color: rgba(255, 255, 255, 0.80);
|
||
top: 25px;
|
||
font-size: 20px;
|
||
letter-spacing: .72px;
|
||
}
|
||
|
||
.title-button {
|
||
color: rgba(255, 255, 255, 0.80);
|
||
font-size: 20px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
.container-main {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.now-team-title {
|
||
margin: 0;
|
||
margin-top: -1em;
|
||
font-size: 1.2em;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
|
||
.main-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.now-secondary-title {
|
||
margin: 0;
|
||
font-size: 1em;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
|
||
.now-team-content {
|
||
font-size: 3em;
|
||
line-height: 1em;
|
||
color: #52fff1;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .el-progress-bar__inner {
|
||
background-color: unset;
|
||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||
}
|
||
|
||
.visual-select {
|
||
position: absolute;
|
||
right: 1em;
|
||
top: 2em;
|
||
}
|
||
|
||
.screen-btn {
|
||
color: #00fff0;
|
||
font-size: 32px;
|
||
}
|
||
// .container-main {
|
||
// padding: 5px;
|
||
// }
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.eqLine{
|
||
height: 290px;
|
||
width: 1px;
|
||
position: absolute;
|
||
left: 33.8%;
|
||
top: 12%;
|
||
background: linear-gradient(to bottom,rgba(60,
|
||
231,
|
||
255,0), #3CE7FF, rgba(60,
|
||
231,
|
||
255, 0));
|
||
}
|
||
.eqLineTwo {
|
||
height: 290px;
|
||
width: 1px;
|
||
position: absolute;
|
||
left: 66.3%;
|
||
top: 12%;
|
||
background: linear-gradient(to bottom, rgba(60,
|
||
231,
|
||
255, 0), #3CE7FF, rgba(60,
|
||
231,
|
||
255, 0));
|
||
}
|
||
.visual-container {
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-track-piece {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
width: 6px;
|
||
background: #1b2b3d;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba($color: #5bc4be, $alpha: 0.7);
|
||
background-clip: padding-box;
|
||
min-height: 28px;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
transition: background-color 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba($color: #5bc4be, $alpha: 1);
|
||
}
|
||
}
|
||
|
||
.coldSelect {
|
||
.el-input {
|
||
min-height: 10px;
|
||
}
|
||
|
||
// .el-input__inner {
|
||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||
// color: aliceblue;
|
||
// }
|
||
|
||
.el-divider--vertical {
|
||
height: 174px;
|
||
width: 1px;
|
||
border: rgba(255, 255, 255, 0.15);
|
||
color: rgba(255, 255, 255, 0.15);
|
||
margin-left: 3em;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<style scoped>
|
||
.flex-col {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1 1;
|
||
}
|
||
|
||
.h-full {
|
||
height: calc(100vh - 150px);
|
||
}
|
||
|
||
/* .container-main {
|
||
min-height: calc(100vh - 10em);
|
||
} */
|
||
.orange {
|
||
color: rgba(255, 209, 96, 1)
|
||
}
|
||
|
||
.white {
|
||
color: rgba(255, 255, 255, 0.5)
|
||
}
|
||
.tooltip {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.tooltip .tooltiptext {
|
||
visibility: hidden;
|
||
width: 120px;
|
||
background-color: black;
|
||
color: #fff;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
padding: 5px 0;
|
||
position: absolute;
|
||
z-index: 1;
|
||
bottom: 150%;
|
||
left: 50%;
|
||
margin-left: -60px;
|
||
}
|
||
|
||
.tooltip .tooltiptext::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
border-color: black transparent transparent transparent;
|
||
}
|
||
|
||
.tooltip:hover .tooltiptext {
|
||
visibility: visible;
|
||
}
|
||
|
||
</style>
|