|
|
|
|
@ -1,45 +1,99 @@
|
|
|
|
|
<script src="../../../router/index.js"></script>
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="headTitle">数字化注塑车间管控中心</div>
|
|
|
|
|
<div class="centerDevice"></div>
|
|
|
|
|
<div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: <span style="color: #6ACBFD">432</span></div>
|
|
|
|
|
<div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: <span style="color: #68FD82">432</span></div>
|
|
|
|
|
<div class="text1" style="top: 24%;left: 5.5%;">今日差异数: <span style="color: #FEF16A">432</span></div>
|
|
|
|
|
<div class="text1" style="top: 24%;left: 16.8%;">今日完成率: <span style="color: #69CBFE">98%</span></div>
|
|
|
|
|
<div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: <span style="color: #6ACBFD">{{ form.text1 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: <span style="color: #68FD82">{{
|
|
|
|
|
form.text2
|
|
|
|
|
}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text1" style="top: 24%;left: 5.5%;">今日差异数: <span style="color: #FEF16A">{{ form.text3 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text1" style="top: 24%;left: 16.8%;">今日完成率: <span style="color: #69CBFE">{{ form.text4 }}%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div>
|
|
|
|
|
<div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div>
|
|
|
|
|
<div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 75%;">正常: <span style="color: #6AFD81">300</span></div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 82.4%;">告警: <span style="color: #FFF46C">01</span></div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 89.8%;">停机: <span style="color: #F9241F">01</span></div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">1</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">2</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">3</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">4</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">5</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">6</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">7</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">8</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">9</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">0</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">1</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">2</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">3</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">4</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">5</div>
|
|
|
|
|
<div class="text2" style="top: 12.7%;left: 84.7%;">设备总数: <span style="color: #68CBFF">320</span></div>
|
|
|
|
|
<div class="text2" style="top: 41%;left: 84.7%;">总维修次数: <span style="color: #EF241E">257</span></div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 75%;">正常: <span style="color: #6AFD81">{{ form.text8 }}</span></div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 82.4%;">告警: <span style="color: #FFF46C">{{ form.text9 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text1" style="top: 19.1%;left: 89.8%;">停机: <span style="color: #F9241F">{{ form.text10 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">{{
|
|
|
|
|
(form.text5 || '').padStart(5, '0').split('')[0]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">{{
|
|
|
|
|
(form.text5 || '').padStart(5, '0').split('')[1]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">{{
|
|
|
|
|
(form.text5 || '').padStart(5, '0').split('')[2]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">{{
|
|
|
|
|
(form.text5 || '').padStart(5, '0').split('')[3]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">{{
|
|
|
|
|
(form.text5 || '').padStart(5, '0').split('')[4]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">{{
|
|
|
|
|
(form.text6 || '').padStart(5, '0').split('')[0]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">{{
|
|
|
|
|
(form.text6 || '').padStart(5, '0').split('')[1]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">{{
|
|
|
|
|
(form.text6 || '').padStart(5, '0').split('')[2]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">{{
|
|
|
|
|
(form.text6 || '').padStart(5, '0').split('')[3]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">{{
|
|
|
|
|
(form.text6 || '').padStart(5, '0').split('')[4]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">{{
|
|
|
|
|
(form.text7 || '').padStart(5, '0').split('')[0]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">{{
|
|
|
|
|
(form.text7 || '').padStart(5, '0').split('')[1]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">{{
|
|
|
|
|
(form.text7 || '').padStart(5, '0').split('')[2]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">{{
|
|
|
|
|
(form.text7 || '').padStart(5, '0').split('')[3]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">{{
|
|
|
|
|
(form.text7 || '').padStart(5, '0').split('')[4]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text2" style="top: 12.7%;left: 84.7%;">设备总数: <span style="color: #68CBFF">{{ form.text11 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text2" style="top: 41%;left: 84.7%;">总维修次数: <span style="color: #EF241E">{{ form.text12 }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
|
|
|
|
|
<div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
|
|
|
|
|
<div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
|
|
|
|
|
<div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
|
|
|
|
|
<div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
|
|
|
|
|
<div class="deviceError">
|
|
|
|
|
<div class="deviceError" v-if="form.view1">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
<div class="text" style="left: 18%">设备1#</div>
|
|
|
|
|
<div class="text" style="left: 42%;color: #F42223">产品未顶出</div>
|
|
|
|
|
<div class="text" style="left: 75%">66:66:66</div>
|
|
|
|
|
<div class="text" style="left: 18%">{{ form.info1.text1 }}</div>
|
|
|
|
|
<div class="text" style="left: 42%;color: #F42223">{{ form.info1.text2 }}</div>
|
|
|
|
|
<div class="text" style="left: 75%">{{ form.info1.text3 }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
|
|
@ -62,47 +116,48 @@
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
:class-option="scrollTableOption"
|
|
|
|
|
:data="scrollTableData"
|
|
|
|
|
:data="form.table1"
|
|
|
|
|
class="case-item"
|
|
|
|
|
:key="key"
|
|
|
|
|
style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData"
|
|
|
|
|
v-for="(item, index) in form.table1"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 25%">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
{{ item.text1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 16.66%">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
{{ item.text2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 16.66%">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
{{ item.text3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 16.66%">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
{{ item.text4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 25%">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
{{ item.text5 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="repairTimes">
|
|
|
|
|
<div class="item" v-for="i in 3">
|
|
|
|
|
<div class="num">{{ i }}</div>
|
|
|
|
|
<div class="deviceName">SC-228NE</div>
|
|
|
|
|
<div class="item" v-for="(i,k) in form.table2">
|
|
|
|
|
<div class="num">{{ k + 1 }}</div>
|
|
|
|
|
<div class="deviceName">{{ i.text1 }}</div>
|
|
|
|
|
<div class="schedule">
|
|
|
|
|
<div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
|
|
|
|
|
<div class="progressBar" :style="{width: i.text2 + '%'}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="times">{{ 10 - i + 1 }}次</div>
|
|
|
|
|
<div class="times">{{ i.text3 }}次</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart1">
|
|
|
|
|
@ -117,12 +172,278 @@
|
|
|
|
|
<div class="chart3">
|
|
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="config">
|
|
|
|
|
<el-button class="btn" @click="configDialogVisible = true">配置</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isData">
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="提示"
|
|
|
|
|
:visible.sync="configDialogVisible"
|
|
|
|
|
width="70%">
|
|
|
|
|
<el-form :inline="true" :model="form" label-width="120px">
|
|
|
|
|
<el-form-item label="今日计划数">
|
|
|
|
|
<el-input v-model="form.text1" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日完成数">
|
|
|
|
|
<el-input v-model="form.text2" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日差异数">
|
|
|
|
|
<el-input v-model="form.text3" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日完成率">
|
|
|
|
|
<el-input v-model="form.text4" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日用水">
|
|
|
|
|
<el-input v-model="form.text5" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日用电">
|
|
|
|
|
<el-input v-model="form.text6" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="今日用气">
|
|
|
|
|
<el-input v-model="form.text7" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备正常数">
|
|
|
|
|
<el-input v-model="form.text8" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备告警数">
|
|
|
|
|
<el-input v-model="form.text9" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备停机数">
|
|
|
|
|
<el-input v-model="form.text10" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备总数">
|
|
|
|
|
<el-input v-model="form.text11" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="总维修次数">
|
|
|
|
|
<el-input v-model="form.text12" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否报警">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="form.view1"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949">
|
|
|
|
|
</el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="报警设备">
|
|
|
|
|
<el-input v-model="form.info1.text1" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="报警原因">
|
|
|
|
|
<el-input v-model="form.info1.text2" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="报警时间">
|
|
|
|
|
<el-input v-model="form.info1.text3" autocomplete="off"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="工单进度" class="fullLine">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="form.table1"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="型号"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table1[scope.$index].text1" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="计划数"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table1[scope.$index].text2" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="完成数">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table1[scope.$index].text3" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="差异数">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table1[scope.$index].text4" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="执行进度">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table1[scope.$index].text5" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="key +=1;form.table1.push({
|
|
|
|
|
text1: '1',
|
|
|
|
|
text2: '0',
|
|
|
|
|
text3: '0',
|
|
|
|
|
text4: '0',
|
|
|
|
|
text5: '0%'})" style="font-size: 24px"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="维修分析" class="fullLine">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="form.table2"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="设备型号"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table2[scope.$index].text1" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="占比"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table2[scope.$index].text2" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="次数">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input v-model="form.table2[scope.$index].text3" autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-circle-plus-outline" @click=" form.table2.push({
|
|
|
|
|
text1: '1',
|
|
|
|
|
text2: '0',
|
|
|
|
|
text3: '0' })" style="font-size: 24px"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="合格数">
|
|
|
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.chart1.value1"
|
|
|
|
|
autocomplete="off"></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="不合格数">
|
|
|
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.chart1.value2"
|
|
|
|
|
autocomplete="off"></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="质量追溯" class="fullLine">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="form.chart4"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="产品名"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart4[scope.$index].value1"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="合格率"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart4[scope.$index].value2"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="合格上限">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart4[scope.$index].value3"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart4.push({
|
|
|
|
|
value1: '',
|
|
|
|
|
value2: '0',
|
|
|
|
|
value3: '100' })" style="font-size: 24px"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="设备分析" class="fullLine">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="form.chart2"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="设备型号"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart2[scope.$index].value1"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="数量"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart2[scope.$index].value2"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart2.push({
|
|
|
|
|
value1: '1',
|
|
|
|
|
value2: '1'})" style="font-size: 24px"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="维修分析" class="fullLine">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="form.chart3"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="时间"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart3[scope.$index].value1"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="次数"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-input @change="chartInit" v-model="form.chart3[scope.$index].value2"
|
|
|
|
|
autocomplete="off"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart3.push({
|
|
|
|
|
value1: '1',
|
|
|
|
|
value2: '0' })" style="font-size: 24px"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="configDialogVisible = false">预 览</el-button>
|
|
|
|
|
<el-button type="primary" @click="save">保 存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
|
|
import Chart from "@/components/board/Chart.vue";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import {getSimulateData} from "@/api/board/getData";
|
|
|
|
|
import {updateCustomData} from "@/api/base/customData";
|
|
|
|
|
import {Message} from "element-ui";
|
|
|
|
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
export default {
|
|
|
|
|
@ -132,9 +453,71 @@ export default {
|
|
|
|
|
name: "Liner",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// form: {
|
|
|
|
|
// text1: '1',
|
|
|
|
|
// text2: '2',
|
|
|
|
|
// text3: '3',
|
|
|
|
|
// text4: '4',
|
|
|
|
|
// text5: '12345',
|
|
|
|
|
// text6: '54321',
|
|
|
|
|
// text7: '13579',
|
|
|
|
|
// text8: '5',
|
|
|
|
|
// text9: '6',
|
|
|
|
|
// text10: '7',
|
|
|
|
|
// text11: '8',
|
|
|
|
|
// text12: '9',
|
|
|
|
|
// view1: true,
|
|
|
|
|
// info1: {
|
|
|
|
|
// text1: '设备1#',
|
|
|
|
|
// text2: '产品未顶出',
|
|
|
|
|
// text3: '66:66:66',
|
|
|
|
|
// },
|
|
|
|
|
// table1: Array(20).fill(0).map(i => {
|
|
|
|
|
// return {
|
|
|
|
|
// text1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
|
|
|
|
|
// text2: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// text3: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// text4: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// text5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
|
|
|
|
|
// }
|
|
|
|
|
// }),
|
|
|
|
|
// table2: Array(3).fill(0).map((i, k) => {
|
|
|
|
|
// return {
|
|
|
|
|
// text1: 'SC-228NE',
|
|
|
|
|
// text2: '' + Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// text3: '' + Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// }
|
|
|
|
|
// }),
|
|
|
|
|
// chart1: {
|
|
|
|
|
// value1: 1000,
|
|
|
|
|
// value2: 100,
|
|
|
|
|
// },
|
|
|
|
|
// chart2: Array(8).fill(0).map((i, k) => {
|
|
|
|
|
// return {
|
|
|
|
|
// value1: 'SC-228NE',
|
|
|
|
|
// value2: Math.ceil(Math.floor(Math.random() * 25)),
|
|
|
|
|
// }
|
|
|
|
|
// }),
|
|
|
|
|
// chart3: Array(5).fill(0).map((i, k) => {
|
|
|
|
|
// return {
|
|
|
|
|
// value1: '13:0' + k + ':00',
|
|
|
|
|
// value2: Math.ceil(Math.floor(Math.random() * 25)),
|
|
|
|
|
// }
|
|
|
|
|
// }),
|
|
|
|
|
// chart4: Array(5).fill(0).map((i, k) => {
|
|
|
|
|
// return {
|
|
|
|
|
// value1: '产品' + (k + 1),
|
|
|
|
|
// value2: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
// value3: '100',
|
|
|
|
|
// }
|
|
|
|
|
// }),
|
|
|
|
|
// },
|
|
|
|
|
form: {},
|
|
|
|
|
key: 0,
|
|
|
|
|
configDialogVisible: false,
|
|
|
|
|
scrollTableOption: {
|
|
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
|
limitMoveNum: 3,// 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
|
@ -142,18 +525,27 @@ export default {
|
|
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
|
waitTime: 0,
|
|
|
|
|
},
|
|
|
|
|
isData: false,
|
|
|
|
|
row: {}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
const dataMap = {
|
|
|
|
|
'合格数': 100,
|
|
|
|
|
'不合格数': 100
|
|
|
|
|
}
|
|
|
|
|
getSimulateData({customCode: 'board-1' || '', customType: 1}).then(val => {
|
|
|
|
|
this.row = val.rows[0]
|
|
|
|
|
this.form = JSON.parse(val.rows[0].customData);
|
|
|
|
|
this.isData = true
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.chartInit()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
chartInit() {
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
title: {
|
|
|
|
|
y: 'center',
|
|
|
|
|
left: '60%',
|
|
|
|
|
text: `{dot1|●} {name|合格数} ：{value|1000}\n\n\n{dot2|●} {name|不合格数} ：{value|100}`,
|
|
|
|
|
text: `{dot1|●} {name|合格数} ：{value|${this.form.chart1.value1}}\n\n\n{dot2|●} {name|不合格数} ：{value|${this.form.chart1.value2}}`,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
rich: {
|
|
|
|
|
@ -206,7 +598,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: 15,
|
|
|
|
|
value: this.form.chart1.value2,
|
|
|
|
|
name: '不合格数',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#4E97FF',
|
|
|
|
|
@ -215,7 +607,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 85,
|
|
|
|
|
value: this.form.chart1.value1,
|
|
|
|
|
name: '合格数',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#0000',
|
|
|
|
|
@ -250,9 +642,9 @@ export default {
|
|
|
|
|
fontSize: 8,
|
|
|
|
|
color: '#ddd',
|
|
|
|
|
},
|
|
|
|
|
indicator: Array(8).fill(0).map((item, index) => {
|
|
|
|
|
return {name: '产品' + (index + 1), index, max: 100}
|
|
|
|
|
}),
|
|
|
|
|
indicator: this.form.chart4.map(e => {
|
|
|
|
|
return {name: e.value1, max: e.value3}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
@ -268,8 +660,8 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: Array(8).fill(0).map((item, index) => {
|
|
|
|
|
return 90 + Math.floor(Math.random() * 10);
|
|
|
|
|
value: this.form.chart4.map(e => {
|
|
|
|
|
return e.value2
|
|
|
|
|
}),
|
|
|
|
|
name: 'Allocated Budget',
|
|
|
|
|
areaStyle: {
|
|
|
|
|
@ -289,12 +681,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
let barData = Array(8).fill(0).map((item, index) => {
|
|
|
|
|
return 5 + Math.floor(Math.random() * 8);
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: Array(8).fill(0).map((item, index) => 'SC-228NE'),
|
|
|
|
|
data: this.form.chart2.map(e => e.value1),
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#377097',
|
|
|
|
|
@ -319,7 +708,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
max: 25,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
@ -381,7 +769,7 @@ export default {
|
|
|
|
|
color: '#66C7FA',
|
|
|
|
|
position: 'top',
|
|
|
|
|
},
|
|
|
|
|
data: barData,
|
|
|
|
|
data: this.form.chart2.map(e => e.value2),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
@ -396,13 +784,13 @@ export default {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#0D2DD7'
|
|
|
|
|
},
|
|
|
|
|
data: barData,
|
|
|
|
|
data: this.form.chart2.map(e => e.value2),
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: ["13:00:00", "13:01:00", "13:02:00", "13:03:00", "13:04:00", '13:05:00'],
|
|
|
|
|
data: this.form.chart3.map(e => e.value1),
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
@ -430,7 +818,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
max: 10,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
@ -480,30 +867,21 @@ export default {
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: Array(6).fill(0).map((item, index) => {
|
|
|
|
|
let num = Math.floor(Math.random() * 2) + 2
|
|
|
|
|
return Math.max(num, 0)
|
|
|
|
|
})
|
|
|
|
|
data: this.form.chart3.map(e => e.value2),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
computed: {
|
|
|
|
|
scrollTableData() {
|
|
|
|
|
return Array(222).fill(0).map(i => {
|
|
|
|
|
return {
|
|
|
|
|
value1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
|
|
|
|
|
value2: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
value3: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
value4: Math.ceil(Math.floor(Math.random() * 100)),
|
|
|
|
|
value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
|
|
|
|
|
}
|
|
|
|
|
save() {
|
|
|
|
|
updateCustomData({
|
|
|
|
|
...this.row,
|
|
|
|
|
customData: JSON.stringify(this.form)
|
|
|
|
|
}).then(res => {
|
|
|
|
|
Message({message: '保存成功', type: 'success'})
|
|
|
|
|
this.configDialogVisible = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
@ -723,4 +1101,31 @@ export default {
|
|
|
|
|
width: 23.8%;
|
|
|
|
|
height: 29%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.config {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 3%;
|
|
|
|
|
right: 3%;
|
|
|
|
|
width: 10%;
|
|
|
|
|
height: 5vw;
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fullLine {
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
/deep/ .el-form-item__content {
|
|
|
|
|
width: calc(100% - 120px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
suixy
2 weeks ago
