大屏功能更新
This commit is contained in:
parent
62ec0e0084
commit
f31bdefab2
@ -1,63 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="company-header"></div>
|
||||
<div class="company-line-wrap">
|
||||
<div class="company-column left-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行状态</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="equ-run-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{equipTotalNum}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in eqpLineNum"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(item.status)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
<div class="app">
|
||||
<div class="company-header"></div>
|
||||
<div class="company-line-wrap">
|
||||
<div class="company-column left-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行状态</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="equ-run-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{equipTotalNum}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in eqpLineNum"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(item.status)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各个厂区巡检工单任务变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column">
|
||||
<div class="main-bg">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
style="border:none;width:20%"
|
||||
@change="handleCompanyChange"
|
||||
></el-cascader>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各个厂区巡检工单任务变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
id="mapChart"
|
||||
@click="stopClick"
|
||||
:style="{ height: height,border:'none' }"
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
<!-- <div
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column">
|
||||
<div class="main-bg">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
style="border:none;width:20%"
|
||||
@change="handleCompanyChange"
|
||||
></el-cascader>
|
||||
<div
|
||||
id="mapChart"
|
||||
@click="stopClick"
|
||||
:style="{ height: height,border:'none' }"
|
||||
></div>
|
||||
<!-- <div
|
||||
id="popPanel1"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
@ -83,133 +82,132 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
id="popPanel1"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ this.showProvinceName }} <el-button
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
id="popPanel1"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
v-for="(item, index) in mapTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="headPanel">{{ this.showProvinceName }} <el-button
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
v-for="(item, index) in mapTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="single-contentPanel">
|
||||
<div class="single-showdata">
|
||||
<div>{{ item.deptName }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "产线数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.deptNum + "台" }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "报警数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.alarmNum + "条" }}</div>
|
||||
</div>
|
||||
<div class="single-contentPanel">
|
||||
<div class="single-showdata">
|
||||
<div>{{ item.deptName }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "产线数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.deptNum + "台" }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "报警数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.alarmNum + "条" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各厂区维修记录变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart3"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区最新报警记录</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
:data="alarmList"
|
||||
v-loading="loading"
|
||||
:row-style="{height:'50px'}"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:red;">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column right-column">
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">预警信息总览</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="alarm-list-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{totalAlarmNum}}</span>
|
||||
<span>{{"报警总数"}}</span>
|
||||
</div>
|
||||
<div class="alarm-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in alarmNum"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
<div class="item-title">各厂区维修记录变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart3"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区最新报警记录</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
:data="alarmList"
|
||||
v-loading="loading"
|
||||
:row-style="{height:'50px'}"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
<div :class="changeMark(item.status)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:red;">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column right-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">预警信息总览</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="alarm-list-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{totalAlarmNum}}</span>
|
||||
<span>{{"报警总数"}}</span>
|
||||
</div>
|
||||
<div class="alarm-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in alarmNum"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(item.status)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区保养工单任务变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart5"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区保养工单任务变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart5"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">最近预警变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart6"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">最近预警变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart6"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1760,11 +1758,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100vh; /* 视口高度 */
|
||||
}
|
||||
.company-line-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 24% 50% 24%;
|
||||
grid-gap: 1%;
|
||||
min-height: calc(100vh - 90px);
|
||||
min-height: calc(100vh - 110px);
|
||||
margin: 0 8px;
|
||||
background: url(../../../assets/images/bigscreen/company/background.png)
|
||||
no-repeat center top,
|
||||
|
||||
@ -1,143 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="factory-header"></div>
|
||||
<div class="factory-line-wrap">
|
||||
<div class="factory-column left-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行状态</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="app">
|
||||
<div class="factory-header"></div>
|
||||
<div class="factory-line-wrap">
|
||||
<div class="factory-column left-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备运行状态</div>
|
||||
<div class="item-content run-status">
|
||||
<div
|
||||
id="echarts1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
id="echarts1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in echartList"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div style="font-size:16px;display: flex;">
|
||||
<div
|
||||
class="line-name"
|
||||
:style="{ backgroundColor:lineBackgroundColor(index)}"
|
||||
></div>
|
||||
<!-- <span class="label-icon"></span> -->
|
||||
<span style="margin-left:10px;font-family: BIAOTI;">{{ item.name }}</span>
|
||||
</div>
|
||||
<div style="margin-left:10%;font-size:18px;font-weight:bolder">{{ item.value }} 台</div>
|
||||
v-for="(item, index) in echartList"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div style="font-size:16px;display: flex;">
|
||||
<div
|
||||
class="line-name"
|
||||
:style="{ backgroundColor:lineBackgroundColor(index)}"
|
||||
></div>
|
||||
<!-- <span class="label-icon"></span> -->
|
||||
<span style="margin-left:10px;font-family: BIAOTI;">{{ item.name }}</span>
|
||||
</div>
|
||||
<div style="margin-left:10%;font-size:18px;font-weight:bolder">{{ item.value }} 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">产线设备状态分布</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">产线传感器分布</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="factory-column">
|
||||
<div class="main-bg">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
style="border:1px;width:20%"
|
||||
@change="handleFactoryChange"
|
||||
></el-cascader>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">产线设备状态分布</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各产线报警趋势</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart3"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">产线传感器分布</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="factory-column">
|
||||
<div class="main-bg">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
style="border:1px;width:20%"
|
||||
@change="handleFactoryChange"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各产线报警趋势</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart3"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区最新报警记录</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
:data="alarmList"
|
||||
v-loading="loading"
|
||||
:row-style="{height:'50px'}"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区最新报警记录</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
:data="alarmList"
|
||||
v-loading="loading"
|
||||
:row-style="{height:'50px'}"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:red;">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:red;">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="factory-column right-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各产线设备运行情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart4"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="factory-column right-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各产线设备运行情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart4"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">半年内各产线维修情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart5"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">半年内各产线维修情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart5"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">半年内各产线保养情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart6"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">半年内各产线保养情况</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart6"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1385,6 +1383,10 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100vh; /* 视口高度 */
|
||||
}
|
||||
@font-face {
|
||||
font-family: "BIAOTI";
|
||||
src: url(../../../assets/biaoti.ttf);
|
||||
@ -1393,7 +1395,7 @@ export default {
|
||||
display: grid;
|
||||
grid-template-columns: 24% 50% 24%;
|
||||
grid-gap: 1%;
|
||||
min-height: calc(100vh - 90px);
|
||||
min-height: calc(100vh - 110px);
|
||||
margin: 0 8px;
|
||||
background: url(../../../assets/images/bigscreen/factory/background.png)
|
||||
no-repeat center top,
|
||||
|
||||
@ -1,283 +1,281 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="company-header"></div>
|
||||
<div class="company-line-wrap">
|
||||
<div class="company-column left-column">
|
||||
<div class="app">
|
||||
<div class="company-header"></div>
|
||||
<div class="company-line-wrap">
|
||||
<div class="company-column left-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">在线轴承运行信息</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
v-loading="loading1"
|
||||
:data="runList"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="客户名称"
|
||||
align="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="equNum"
|
||||
label="轴承数量"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="液压状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.status == 0"
|
||||
class="table-label"
|
||||
>
|
||||
<div class="normal-label" />
|
||||
<div>{{ "正常" }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-label"
|
||||
v-else
|
||||
>
|
||||
<div class="err-label" />
|
||||
<div>{{ "异常" }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="waveStatus"
|
||||
label="振动状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.waveStatus == 0"
|
||||
class="table-label"
|
||||
>
|
||||
<div class="normal-label" />
|
||||
<div>{{ "正常" }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-label"
|
||||
v-else
|
||||
>
|
||||
<div class="err-label" />
|
||||
<div>{{ "异常" }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">故障率统计</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">维修信息</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="mainten-total">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.maintenTotal}}</span>
|
||||
<span>{{"维修总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in maintenList"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(index + 1 )">
|
||||
<span>{{ item.deptName }}</span>
|
||||
</div>
|
||||
<div>{{ item.data }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column">
|
||||
<div class="main-bg">
|
||||
<div class="middle-header">
|
||||
<div class="worldwide-overall">
|
||||
<div class="head-value">28家</div>
|
||||
<div class="head-info">产品全球化</div>
|
||||
</div>
|
||||
<div class="custom-overall">
|
||||
<div class="head-value">28家</div>
|
||||
<div class="head-info">客户规模</div>
|
||||
</div>
|
||||
<div class="line-overall">
|
||||
<div class="head-value">129条</div>
|
||||
<div class="head-info">产线规模</div>
|
||||
</div>
|
||||
<div class="equip-overall">
|
||||
<div class="head-value">1234台</div>
|
||||
<div class="head-info">运行轴承</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="mapChart"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
<div
|
||||
id="popPanel"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ this.provinceName + ":" + this.eqpNums + "台" }} <el-button
|
||||
style="margin-left:20px"
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
class="contentPanel"
|
||||
v-for="(item, index) in cityEquNumList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="item-name"
|
||||
style="margin-right: 5%;"
|
||||
>{{ item.name + ":" }}</div>
|
||||
<div class="item-value">{{ item.value + "台" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">在线轴承运行信息</div>
|
||||
<div class="item-title">客户告警信息</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
v-loading="loading1"
|
||||
:data="runList"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
v-loading="loading2"
|
||||
:data="alarmList"
|
||||
:row-style="{height: '30px'}"
|
||||
>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="客户名称"
|
||||
align="left"
|
||||
prop="params.companyName"
|
||||
label="公司名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="equNum"
|
||||
label="轴承数量"
|
||||
>
|
||||
</el-table-column>
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="液压状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.status == 0"
|
||||
class="table-label"
|
||||
>
|
||||
<div class="normal-label" />
|
||||
<div>{{ "正常" }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-label"
|
||||
v-else
|
||||
>
|
||||
<div class="err-label" />
|
||||
<div>{{ "异常" }}</div>
|
||||
</div>
|
||||
prop="content"
|
||||
label="报警内容"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
> <template slot-scope="scope">
|
||||
<span style="color:red">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="waveStatus"
|
||||
label="振动状态"
|
||||
prop="alarmLevel"
|
||||
label="严重等级"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.waveStatus == 0"
|
||||
class="table-label"
|
||||
>
|
||||
<div class="normal-label" />
|
||||
<div>{{ "正常" }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-label"
|
||||
v-else
|
||||
>
|
||||
<div class="err-label" />
|
||||
<div>{{ "异常" }}</div>
|
||||
</div>
|
||||
<span style="color:yellow">{{ scope.row.alarmLevel + "级" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">故障率统计</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column right-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">应用行业及占有率</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="equ-run-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.industryTotal}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">维修信息</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="mainten-total">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.maintenTotal}}</span>
|
||||
<span>{{"维修总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
<div
|
||||
v-for="(item, index) in maintenList"
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(index + 1 )">
|
||||
<span>{{ item.deptName }}</span>
|
||||
</div>
|
||||
<div>{{ item.data }} | {{ item.rate }}</div>
|
||||
<div class="industry-des-container">
|
||||
<div
|
||||
v-for="(item, index) in industryInfo"
|
||||
:key="index"
|
||||
class="industry-des"
|
||||
>
|
||||
<div :class="changeIndustryMark(index)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column">
|
||||
<div class="main-bg">
|
||||
<div class="middle-header">
|
||||
<div class="worldwide-overall">
|
||||
<div class="head-value">28家</div>
|
||||
<div class="head-info">产品全球化</div>
|
||||
</div>
|
||||
<div class="custom-overall">
|
||||
<div class="head-value">28家</div>
|
||||
<div class="head-info">客户规模</div>
|
||||
</div>
|
||||
<div class="line-overall">
|
||||
<div class="head-value">129条</div>
|
||||
<div class="head-info">产线规模</div>
|
||||
</div>
|
||||
<div class="equip-overall">
|
||||
<div class="head-value">1234台</div>
|
||||
<div class="head-info">运行轴承</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各公司维修统计</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
id="mapChart"
|
||||
ref="chart5"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
<div
|
||||
id="popPanel"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ this.provinceName + ":" + this.eqpNums + "台" }} <el-button
|
||||
style="margin-left:20px"
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
class="contentPanel"
|
||||
v-for="(item, index) in cityEquNumList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="item-name"
|
||||
style="margin-right: 5%;"
|
||||
>{{ item.name + ":" }}</div>
|
||||
<div class="item-value">{{ item.value + "台" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">客户告警信息</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
:data="alarmList"
|
||||
:row-style="{height: '30px'}"
|
||||
>
|
||||
<el-table-column
|
||||
prop="params.companyName"
|
||||
label="公司名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="报警内容"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
> <template slot-scope="scope">
|
||||
<span style="color:red">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmLevel"
|
||||
label="严重等级"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:yellow">{{ scope.row.alarmLevel + "级" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-column right-column">
|
||||
<div class="equ-item">
|
||||
<div class="item-title">应用行业及占有率</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="equ-run-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.industryTotal}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
<div class="industry-des-container">
|
||||
<div
|
||||
v-for="(item, index) in industryInfo"
|
||||
:key="index"
|
||||
class="industry-des"
|
||||
>
|
||||
<div :class="changeIndustryMark(index)">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备及产线总览</div>
|
||||
<div class="line-equ-overall">
|
||||
<div class="line-title">
|
||||
<div>产线</div>
|
||||
<div>总览</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">各公司维修统计</div>
|
||||
<div class="item-content">
|
||||
<div>
|
||||
<div
|
||||
ref="chart5"
|
||||
id="echarts1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">设备及产线总览</div>
|
||||
<div class="line-equ-overall">
|
||||
<div class="line-title">
|
||||
<div>产线</div>
|
||||
<div>总览</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
id="echarts1"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="lines-total">
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{ 3 }}</div>
|
||||
</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{1}}</div>
|
||||
<div class="lines-total">
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{ 3 }}</div>
|
||||
</div>
|
||||
<div class="line-title">
|
||||
<div>设备</div>
|
||||
<div>总数</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
id="echarts2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="lines-total">
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{7}}</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{3}}</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{1}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-title">
|
||||
<div>设备</div>
|
||||
<div>总数</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
id="echarts2"
|
||||
:style="{ height: height }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="lines-total">
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{7}}</div>
|
||||
</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{3}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2007,11 +2005,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100vh; /* 视口高度 */
|
||||
}
|
||||
.company-line-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 24% 50% 24%;
|
||||
grid-gap: 1%;
|
||||
min-height: calc(100vh - 90px);
|
||||
min-height: calc(100vh - 110px);
|
||||
margin: 0 8px;
|
||||
background: url(../../../assets/images/bigscreen/overall/background.png)
|
||||
no-repeat center center,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user