<template>
|
<div>
|
<!-- 左悬浮效果 -->
|
<div class="suspension" id="suspension">
|
<div>
|
<el-select v-model="workshopId" @change="machineName()">
|
<el-option value="7" label="全部"></el-option>
|
<el-option value="1" label="201"></el-option>
|
<el-option value="2" label="202"></el-option>
|
<el-option value="3" label="203"></el-option>
|
<el-option value="4" label="204"></el-option>
|
<el-option value="5" label="205"></el-option>
|
<el-option value="6" label="206"></el-option>
|
</el-select>
|
</div>
|
<div>
|
<div class="chart-content-xs">
|
<e-charts :options="completenum" auto-resize style="width: 100%;height: 150%;"></e-charts>
|
</div>
|
<hr/>
|
<div class="chart-content-xs">
|
<e-charts :options="efficiencyjc" auto-resize style="width: 100%;height: 150%;"></e-charts>
|
</div>
|
<hr/>
|
<div class="chart-content-xs">
|
<e-charts :options="cuttingrate" auto-resize style="width: 100%;height: 150%;"></e-charts>
|
</div>
|
<hr/>
|
<div class="chart-content-xs">
|
<e-charts :options="twoShiftRate" auto-resize style="width: 100%;height: 150%;"></e-charts>
|
</div>
|
<hr/>
|
<div class="chart-content-xs">
|
<e-charts :options="threeShiftRate" auto-resize style="width: 100%;height: 150%;"></e-charts>
|
</div>
|
</div>
|
|
<!-- <div id="machinecolor">
|
<ul class="alarmtype">
|
<li v-for="(item, index) in alarmtypelist" :key="index" @click="alarmtype(item.icolor,item.spanname)">
|
<div v-if="item.divcolor == 'aa'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="clamping" v-if="item.divcolor == 'one'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="orange" v-if="item.divcolor == 'two'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="cyan" v-if="item.divcolor == 'three'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="meired" v-if="item.divcolor == 'four'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="red" v-if="item.divcolor == 'five'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="orangeyellow" v-if="item.divcolor == 'six'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
<div class="yellow" v-if="item.divcolor == 'seven'">
|
<i class="clamping" v-if="item.icolor == 'one'">{{ item.iname }}</i>
|
<i class="orange" v-if="item.icolor == 'two'">{{ item.iname }}</i>
|
<i class="cyan" v-if="item.icolor == 'three'">{{ item.iname }}</i>
|
<i class="meired" v-if="item.icolor == 'four'">{{ item.iname }}</i>
|
<i class="red" v-if="item.icolor == 'five'">{{ item.iname }}</i>
|
<i class="orangeyellow" v-if="item.icolor == 'six'">{{ item.iname }}</i>
|
<i class="yellow" v-if="item.icolor == 'seven'">{{ item.iname }}</i>
|
<span>{{ item.spanname }}</span>
|
</div>
|
</li>
|
</ul>
|
</div> -->
|
</div>
|
<p class="statelists" id="theradio">
|
<el-radio-group v-model="radiotype">
|
<el-radio :label="2" @change="radiotypes()">全部</el-radio>
|
<el-radio :label="1" @change="radiotypes()">关注</el-radio>
|
</el-radio-group>
|
<span><i class="icons backblack"></i><i class="textwenzi">停机</i></span>
|
<span><i class="icons backgreenyellowtitle"></i><i class="textwenzi">运行</i></span>
|
<span><i class="icons backyellow"></i><i class="textwenzi">待机</i></span>
|
<span><i class="icons backgreenredtitle"></i><i class="textwenzi">报警</i></span>
|
</p>
|
<div style="overflow: auto;" v-loading="loading" id="toollist">
|
<div id='drag' @mousewheel.prevent.alt="setZoom($event)" @mousedown.prevent.alt="move">
|
<ul>
|
<li class="machinelists" v-for="(item, index) in malists" :key="index" :class="item.lie?'margintop30':''">
|
<!-- 第一个 -->
|
<div class="content-card" v-if="item.highScale == '1'" :class="{'content-card-gary':item.collectFlag == 0}">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<!-- <el-col :span="12" v-if="item.status == 'ALARM'">-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="police(item)">-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" v-else>-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">-->
|
<!-- </el-col>-->
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<el-checkbox v-model="item.concern" @change="focuson(item)"></el-checkbox>
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1" @click="police(item)"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margint10"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第二个 -->
|
<div class="content-card twotwo" v-if="item.highScale == '2'" :class="{'content-card-gary':item.collectFlag == 0}">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<!-- <el-col :span="12" v-if="item.status == 'ALARM'">-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="police(item)">-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" v-else>-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">-->
|
<!-- </el-col>-->
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<el-checkbox v-model="item.concern" @change="focuson(item)"></el-checkbox>
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1" @click="police(item)"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margint10"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第三个 -->
|
<div class="content-card threethree" v-if="item.highScale == '3'" :class="{'content-card-gary':item.collectFlag == 0}">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<!-- <el-col :span="12" v-if="item.status == 'ALARM'">-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="police(item)">-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" v-else>-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">-->
|
<!-- </el-col>-->
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<el-checkbox v-model="item.concern" @change="focuson(item)"></el-checkbox>
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1" @click="police(item)"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margint10"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
<!-- 第四个 -->
|
<div class="content-card fourfour" v-if="item.highScale == '4'" :class="{'content-card-gary':item.collectFlag == 0}">
|
<div class="device-img-layout" v-if="item.status != ''">
|
<el-row class="paddingt10">
|
<!-- <el-col :span="12" v-if="item.status == 'ALARM'">-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="police(item)">-->
|
<!-- </el-col>-->
|
<!-- <el-col :span="12" v-else>-->
|
<!-- <img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">-->
|
<!-- </el-col>-->
|
<el-col :span="12">
|
<img :src="item.pic" class="mdc-machine-image margint10" @click="showMachineDetail(item.id,item.pic)">
|
</el-col>
|
<el-col :span="12" class="screen">
|
<el-checkbox v-model="item.concern" @change="focuson(item)"></el-checkbox>
|
<div class="mdc-machine-efficiency roomstatelist">
|
<span class="xsName xxstate">机床状态: </span>
|
<span v-if="item.status == 'STOP' || item.status == '' || item.status == null"><i class="icons backblack opacity1"></i></span>
|
<span v-if="item.status == 'RUN' || item.status == 'FEEDHOLDON'"><i class="icons backgreenyellow opacity1"></i></span>
|
<span v-if="item.status == 'IDLE'"><i class="icons backyellow opacity1"></i></span>
|
<span v-if="item.status == 'ALARM'"><i class="icons backgreenred opacity1" @click="police(item)"></i></span>
|
</div>
|
<div class="mdc-machine-efficiency margint10"><span class="xsName">能力利用率: </span>{{ item.efficiency }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">日利用率: </span>{{ item.utilizationDaily }}%</div>
|
<div class="mdc-machine-efficiency"><span class="xsName">完工件数: </span>{{ item.cycleCount }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="device-img-layout" v-else></div>
|
<!-- 机床名称 -->
|
<div class="mdc-machine-name text-center"><span class="xsName">{{ item.name }}</span></div>
|
</div>
|
|
<div v-if="index+=1">
|
|
</div>
|
|
</li>
|
</ul>
|
</div>
|
<!-- 机床详情-->
|
<information v-if="informationVisible" ref="Information"></information>
|
<!-- 报警-->
|
<call-police v-if="visible" ref="CallPolice" @refreshDataList="getNum()"></call-police>
|
</div>
|
</div>
|
|
|
</template>
|
|
<script>
|
// import { default as Bus, SCROLL_TOP, ON_MESSAGE, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
// import { default as Bus, ON_MESSAGE } from '@/bus/EventBus'
|
import ECharts from 'vue-echarts/components/ECharts.vue'
|
import 'echarts/lib/chart/gauge'
|
import 'echarts/lib/chart/Pie'
|
import 'echarts/lib/component/tooltip'
|
import { getMachineNum, getMachineList, focuson } from '@/api/MdcApi'
|
import Information from '../workshop/dialog/MachinDetail'
|
import CallPolice from '../workshop/dialog/callPolice'
|
export default {
|
components: {
|
ECharts,
|
Information,
|
CallPolice
|
},
|
data() {
|
return {
|
loading: false,
|
informationVisible: false, // 详细
|
visible: false, // 报警页面
|
malists: [],
|
newlist: [],
|
radiotype: 2,
|
offsetX: 0,
|
offsetY: 0,
|
deltaY: 0,
|
add: 0,
|
scale: 1,
|
positionX: 0,
|
positionY: 0,
|
// 横向展示个数
|
transverse: 0,
|
// 竖向展示个数
|
vertical: 0,
|
totalNum: 0,
|
// 传入弹框中的值
|
machineDetail: {},
|
workshopId: '7',
|
timer: null,
|
alarmtypelist: [
|
{
|
iname: '1',
|
id: '7',
|
spanname: '全部',
|
icolor: 'seven',
|
divcolor: 'seven'
|
},
|
{
|
iname: '1',
|
id: '1',
|
spanname: '201',
|
icolor: 'one',
|
divcolor: 'aa'
|
},
|
{
|
iname: '1',
|
id: '2',
|
spanname: '202',
|
icolor: 'two',
|
divcolor: 'aa'
|
},
|
{
|
iname: '1',
|
id: '3',
|
spanname: '203',
|
icolor: 'three',
|
divcolor: 'aa'
|
},
|
{
|
iname: '1',
|
id: '4',
|
spanname: '204',
|
icolor: 'four',
|
divcolor: 'aa'
|
},
|
{
|
iname: '1',
|
id: '5',
|
spanname: '205',
|
icolor: 'five',
|
divcolor: 'aa'
|
},
|
{
|
iname: '1',
|
id: '6',
|
spanname: '206',
|
icolor: 'six',
|
divcolor: 'aa'
|
}
|
],
|
// 开机率
|
completenum: {
|
color: ['#518C69', '#888888'],
|
series: [
|
{
|
name: '开机率',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
labelLine: {
|
normal: { show: false }
|
},
|
data: [
|
{ // 数据值
|
value: 0,
|
name: '开机率',
|
selected: false,
|
label: {
|
normal: {
|
show: true,
|
position: 'center',
|
fontSize: '15',
|
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
|
formatter: '{b}' + '\n\r' + '{c}%'
|
}
|
}
|
},
|
{
|
value: 0,
|
label: { normal: { show: false }}
|
}
|
]
|
}
|
]
|
},
|
// 故障率
|
efficiencyjc: {
|
color: ['red', '#888888'],
|
series: [
|
{
|
name: '故障率',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
labelLine: {
|
normal: { show: false }
|
},
|
data: [
|
{ // 数据值
|
value: 0,
|
name: '故障率',
|
selected: false,
|
label: {
|
normal: {
|
show: true,
|
position: 'center',
|
fontSize: '15',
|
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
|
formatter: '{b}' + '\n\r' + '{c}%'
|
}
|
}
|
},
|
{
|
value: 0,
|
label: { normal: { show: false }}
|
}
|
]
|
}
|
]
|
},
|
// 切削率
|
cuttingrate: {
|
color: ['#ff9933', '#888888'],
|
series: [
|
{
|
name: '切削率',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
labelLine: {
|
normal: { show: false }
|
},
|
data: [
|
{ // 数据值
|
value: 0,
|
name: '切削率',
|
selected: false,
|
label: {
|
normal: {
|
show: true,
|
position: 'center',
|
fontSize: '15',
|
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
|
formatter: '{b}' + '\n\r' + '{c}%'
|
}
|
}
|
},
|
{
|
value: 0,
|
label: { normal: { show: false }}
|
}
|
]
|
}
|
]
|
},
|
// 二班开工率
|
twoShiftRate: {
|
color: ['#ff9933', '#888888'],
|
series: [
|
{
|
name: '二班开工率',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
labelLine: {
|
normal: { show: false }
|
},
|
data: [
|
{ // 数据值
|
value: 0,
|
name: '二班开工率',
|
selected: false,
|
label: {
|
normal: {
|
show: true,
|
position: 'center',
|
fontSize: '15',
|
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
|
formatter: '{b}' + '\n\r' + '{c}%'
|
}
|
}
|
},
|
{
|
value: 0,
|
label: { normal: { show: false }}
|
}
|
]
|
}
|
]
|
},
|
// 三班开工率
|
threeShiftRate: {
|
color: ['#ff9933', '#888888'],
|
series: [
|
{
|
name: '三班开工率',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
labelLine: {
|
normal: { show: false }
|
},
|
data: [
|
{ // 数据值
|
value: 0,
|
name: '三班开工率',
|
selected: false,
|
label: {
|
normal: {
|
show: true,
|
position: 'center',
|
fontSize: '15',
|
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
|
formatter: '{b}' + '\n\r' + '{c}%'
|
}
|
}
|
},
|
{
|
value: 0,
|
label: { normal: { show: false }}
|
}
|
]
|
}
|
]
|
}
|
}
|
},
|
computed: {
|
myValue() {
|
return this.$store.state.app.sidebar.opened
|
}
|
},
|
watch: {
|
myValue: function(newVal) {
|
if (newVal === true) {
|
document.getElementById('suspension').style.left = '200px'
|
} else {
|
document.getElementById('suspension').style.left = '50px'
|
}
|
}
|
},
|
mounted() {
|
/* websocket*/
|
// Bus.$on(ON_MESSAGE, res => {
|
// const a = JSON.parse(res)
|
// this.malists.map(item => {
|
// if (item.id === a.machineId) {
|
// if (a.state != null) { item.status = a.state }
|
// if (a.cycleCount != null) { item.cycleCount = a.cycleCount }
|
// if (a.efficiency != null) { item.efficiency = a.efficiency }
|
// if (a.utilizationDaily != null) { item.utilizationDaily = a.utilizationDaily }
|
// }
|
// })
|
// })
|
var state = this.$store.state.app.sidebar.opened
|
if (state === true) {
|
document.getElementById('suspension').style.left = '200px'
|
} else {
|
document.getElementById('suspension').style.left = '50px'
|
}
|
var ksheight = document.body.clientHeight
|
ksheight = ksheight - 150
|
document.getElementById('drag').style.height = ksheight + 'px'
|
this.timer = setInterval(() => {
|
getMachineList(this.currentPage, this.keyWord, 1, this.radiotype, this.workshopId).then(res => {
|
this.malists.map(item => {
|
res.list.map(resItem => {
|
if (item.id === resItem.id) {
|
item.status = resItem.status
|
item.cycleCount = resItem.cycleCount
|
item.efficiency = resItem.efficiency
|
item.utilizationDaily = resItem.utilizationDaily
|
}
|
})
|
})
|
})
|
}, 10000)
|
this.getNum()
|
},
|
created() {
|
},
|
beforeDestroy() {
|
// Bus.$off(ON_MESSAGE)
|
clearInterval(this.timer)
|
this.timer = null
|
},
|
methods: {
|
/* 报警*/
|
police(row) {
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs.CallPolice.init(row)
|
})
|
},
|
/* 详情 */
|
showMachineDetail(machineId, imgurl) {
|
if (machineId !== '') {
|
this.informationVisible = true
|
this.$nextTick(() => {
|
const obj = { imgurl: imgurl, machineId: machineId, concernFlag: this.radiotype }
|
this.$refs.Information.init(obj)
|
})
|
}
|
},
|
/* 关注 */
|
focuson(row) {
|
var num = row.concern
|
if (num === false) { num = 0 } else { num = 1 }
|
focuson(row.id, num).then(res => {
|
if (num === 0) {
|
this.$message({
|
message: '取关成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '关注成功',
|
type: 'success'
|
})
|
}
|
})
|
},
|
move(e) {
|
// let odiv = e.target; //获取目标元素
|
const odiv = document.getElementById('drag') // 获取目标元素
|
// 算出鼠标相对元素的位置
|
const disX = e.clientX - odiv.offsetLeft
|
const disY = e.clientY - odiv.offsetTop
|
document.onmousemove = (e) => { // 鼠标按下并移动的事件
|
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
const left = e.clientX - disX
|
const top = e.clientY - disY
|
|
// 绑定元素位置到positionX和positionY上面
|
this.positionX = top
|
this.positionY = left
|
|
// 移动当前元素
|
odiv.style.left = left + 'px'
|
odiv.style.top = top + 'px'
|
}
|
document.onmouseup = (e) => {
|
document.onmousemove = null
|
document.onmouseup = null
|
}
|
},
|
// alt+滚轮缩放
|
setZoom(e) {
|
this.offsetX = e.clientX
|
this.offsetY = e.clientY
|
this.deltaY = e.deltaY
|
this.zoom('#drag')
|
},
|
zoom(selector, scale = this.scale, option = {}) {
|
// 记录 Translate 的坐标值
|
let prevTranslateMap = {
|
x: 0,
|
y: 0
|
}
|
|
let zoomDom = selector
|
// mx, // 记录鼠标按下时的 x 坐标
|
// my, // 记录鼠标按下时的 y 坐标
|
// tLeft = prevTranslateMap.x, // 最后设置的 translateX 值
|
// tTop = prevTranslateMap.y, // 最后设置的 translateY 值
|
// newsetWidth, // 拖动容器最新的宽度
|
// newsetHeight, // 拖动容器最新的高度
|
// firstMoveFlag = false // 第一次移动标记，防止用户第一次按下和松开鼠标但并未移动，第二次移动时 dom 出现闪现的情况
|
// const { interval = 0.1, minScale = 0.5, maxScale = 3, slopOver = true, disabledZoom = false, disabledDrag = false } = option
|
const { interval = 0.1 } = option
|
if (typeof selector === 'string') {
|
zoomDom = document.querySelector(selector)
|
}
|
zoomDom.style.transformOrigin = '0 0'
|
// 获取最初始的宽高
|
const { width: initWidth, height: initHeight } = zoomDom.getBoundingClientRect()
|
const pDom = zoomDom.parentElement
|
// 滚动事件兼容文章（https://www.zhangxinxu.com/wordpress/2013/04/js-mousewheel-dommousescroll-event/）
|
|
const isZoomOut = this.deltaY < 0 // 缩小
|
// 鼠标坐标
|
const mouseX = this.offsetX
|
const mouseY = this.offsetY
|
// 元素当前宽高
|
const { height, width } = zoomDom.getBoundingClientRect()
|
const { top: pTop, left: pLeft } = pDom.getBoundingClientRect()
|
if (isZoomOut) {
|
// 放大
|
scale += interval
|
this.scale = scale
|
} else {
|
// 缩小
|
scale -= interval
|
if (scale < 0.1) { scale = 0.1 }
|
this.scale = scale
|
}
|
// 获取比例
|
const yScale = (mouseY - pTop - prevTranslateMap.y) / height
|
const xScale = (mouseX - pLeft - prevTranslateMap.x) / width
|
// 放大后的宽高
|
const ampWidth = initWidth * scale
|
const ampHeight = initHeight * scale
|
// 需要重新运算的 translate 坐标
|
const y = yScale * (ampHeight - height)
|
const x = xScale * (ampWidth - width)
|
// 更新
|
const translateY = prevTranslateMap.y - y
|
const translateX = prevTranslateMap.x - x
|
zoomDom.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`
|
// 记录这次的值
|
prevTranslateMap = {
|
x: translateX,
|
y: translateY
|
}
|
},
|
getNum() {
|
return new Promise(resolve => {
|
getMachineNum().then(res => {
|
this.transverse = res.length
|
this.vertical = res.width
|
this.totalNum = this.transverse * this.vertical
|
this.getMachineList()
|
})
|
})
|
},
|
/* 获取矩形方阵 (横/竖)*/
|
getMachineNum() {
|
return new Promise(resolve => {
|
getMachineNum().then(res => {
|
this.transverse = res.length
|
this.vertical = res.width
|
this.totalNum = this.transverse * this.vertical
|
/* 给li设置width*/
|
// let width = 100 / this.transverse
|
// width = width.toFixed(4)
|
var divwidth = this.transverse * 280
|
var jiange = parseInt(this.transverse / 2)
|
jiange = jiange * 30
|
divwidth = jiange + divwidth + 30
|
document.getElementById('drag').style.width = divwidth + 'px'
|
const lilists = document.getElementsByClassName('machinelists')
|
for (var i = 0; i < lilists.length; i++) {
|
lilists[i].style.width = 280 + 'px'
|
lilists[i].style.height = 200 + 'px'
|
}
|
this.loading = false
|
})
|
})
|
},
|
/* 改变全部和关注*/
|
radiotypes() {
|
this.getMachineList()
|
},
|
// 获取机床lists
|
getMachineList() {
|
this.loading = true
|
getMachineList(this.currentPage, this.keyWord, 1, this.radiotype, this.workshopId).then(res => {
|
this.completenum.series[0].data[0].value = res.RUN
|
this.completenum.series[0].data[1].value = 100 - res.RUN
|
this.efficiencyjc.series[0].data[0].value = res.ALRAM
|
this.efficiencyjc.series[0].data[1].value = 100 - res.ALRAM
|
this.cuttingrate.series[0].data[0].value = res.cutRate
|
this.cuttingrate.series[0].data[1].value = 100 - res.cutRate
|
this.cuttingrate.series[0].data[0].value = res.cutRate
|
this.cuttingrate.series[0].data[1].value = 100 - res.cutRate
|
this.twoShiftRate.series[0].data[0].value = res.twoShiftRate
|
this.twoShiftRate.series[0].data[1].value = 100 - res.twoShiftRate
|
this.threeShiftRate.series[0].data[0].value = res.threeShiftRate
|
this.threeShiftRate.series[0].data[1].value = 100 - res.threeShiftRate
|
res.list.map(item => {
|
var name = item.name.split('_')[1]
|
item.pic = '/static/data/img/machine/' + item.workshop + '/' + item.section + '/' + name + '.png'
|
})
|
this.newlist = []
|
/* 占空位*/
|
var addnum = 0
|
res.list.map(item => {
|
addnum++
|
if (addnum === item.firstPosition) {
|
this.newlist.push(item)
|
} else {
|
addnum = this.getnewlists(addnum, item, this.newlist)
|
}
|
})
|
var newarr = this.newlist
|
for (var i = this.newlist.length + 1; i <= this.totalNum; i++) {
|
newarr.push({
|
id: '',
|
ip: '',
|
name: '',
|
port: null,
|
firstPosition: 0,
|
highScale: 1,
|
section: '',
|
type: '',
|
workshop: '',
|
status: '',
|
lie: false
|
})
|
}
|
newarr[newarr.length - 1].end = true
|
this.malists = newarr
|
this.malists.map(item => {
|
item.lie = false
|
})
|
var numlenth = this.transverse * 12
|
numlenth = numlenth + 1
|
this.malists.map((item, index) => {
|
var iione = index + 1
|
var iitwo = numlenth + this.transverse
|
if (iione >= numlenth && iione < iitwo) {
|
item.lie = 'true'
|
}
|
})
|
this.getMachineNum()
|
})
|
},
|
getnewlists(addnum, item, newlist) {
|
var totalNum = this.transverse * this.vertical
|
for (var i = 0; i < totalNum; i++) {
|
if (addnum === item.firstPosition) {
|
newlist.push(item)
|
break
|
} else {
|
newlist.push({
|
id: '',
|
ip: '',
|
name: '',
|
port: null,
|
firstPosition: 0,
|
highScale: 1,
|
section: '',
|
type: '',
|
workshop: '',
|
status: '',
|
lie: false
|
})
|
}
|
addnum++
|
}
|
return addnum
|
},
|
/* 机床详情页面*/
|
details(machineId, imgurl) {
|
if (machineId !== '') {
|
this.informationVisible = true
|
this.$nextTick(() => {
|
const obj = { imgurl: imgurl, machineId: machineId }
|
this.$refs.Information.init(obj)
|
})
|
}
|
},
|
/* 选择类型*/
|
alarmtype(color, name) {
|
this.alarmtypelist.map(item => {
|
if (item.spanname === name) {
|
item.divcolor = color
|
this.workshopId = item.id
|
this.getMachineList()
|
} else {
|
item.divcolor = 'aa'
|
}
|
})
|
},
|
// 选择类型
|
machineName() {
|
this.getMachineList()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.machinelists{position: relative;}
|
.machinelists:nth-of-type(even){margin-right: 30px;}
|
.twotwo{position: absolute;height: 400px !important;z-index: 997;padding-top: 110px !important;}
|
.threethree{position: absolute;height: 600px !important;z-index: 997;padding-top: 220px !important;}
|
.fourfour{position: absolute;height: 800px !important;z-index: 997;padding-top: 330px !important;}
|
|
#machinecolor .alarmtype>li{cursor: pointer;list-style: none;margin-top: 5px;background-color: #eaeaea;border-radius: 4px;height: 35px;line-height: 35px;}
|
#machinecolor .alarmtype i{width: 10px;height: 100%;display: inline-block;color: transparent;margin-right: 10px;}
|
#machinecolor .clamping{background-color: #409EFF;color: #FFFFFF;}
|
#machinecolor .orange{background-color: coral;color: #FFFFFF;}
|
#machinecolor .cyan{background-color: #1AE6E6;color: #FFFFFF;}
|
#machinecolor .meired{background-color: #ff0099;color: #FFFFFF;}
|
#machinecolor .red{background-color: red;color: #FFFFFF;}
|
#machinecolor .orangeyellow{background-color: #E6BD1A;color: #FFFFFF;}
|
#machinecolor .gray{background-color: #858585;color: #FFFFFF;}
|
#machinecolor .yellow{background-color: yellow;color: #FFFFFF;}
|
#drag>ul{padding: 30px;background-color: green;padding-right: 0;}
|
.margintop30{margin-top: 50px;}
|
</style>
|
