Compare commits
16 Commits
ea47028178
...
projects/z
| Author | SHA1 | Date | |
|---|---|---|---|
| 86a9e425a9 | |||
| d4495e97f1 | |||
| 755fe3adab | |||
| d380907298 | |||
| 94874a9d76 | |||
| b7d65b47c8 | |||
| cc65c44cb8 | |||
| 3e13028f9f | |||
| b28816f515 | |||
| 9c1f36d460 | |||
| 67e3b08c82 | |||
| afb62375da | |||
| e93e7d530d | |||
| 86eca859aa | |||
| 1e9bfee1e7 | |||
| b4985d4018 |
5
.env.dev
5
.env.dev
@@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2024-12-18 09:02:56
|
||||
# @LastEditTime: 2025-03-05 16:46:35
|
||||
# @LastEditors: zwq
|
||||
# @Description:
|
||||
###
|
||||
@@ -17,6 +17,9 @@ VUE_APP_TITLE = 成本管理系统
|
||||
VUE_APP_BASE_API = 'http://100.64.0.45:48080'
|
||||
# VUE_APP_BASE_API = 'http://172.16.33.10:48080'
|
||||
|
||||
# ws地址
|
||||
VUE_APP_WS_API = 'ws://100.64.0.45:48080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
# @Author: zwq
|
||||
# @Date: 2024-03-27 15:49:55
|
||||
# @LastEditors: zwq
|
||||
# @LastEditTime: 2024-09-10 15:19:19
|
||||
# @LastEditTime: 2025-03-05 16:30:45
|
||||
# @Description:
|
||||
###
|
||||
# 生产环境配置
|
||||
@@ -20,6 +20,9 @@ VUE_APP_BASE_API = ''
|
||||
# PUBLIC_PATH = 'http://192.168.0.33:8888/'
|
||||
PUBLIC_PATH = ''
|
||||
|
||||
# ws地址
|
||||
VUE_APP_WS_API = 'ws://10.1.17.10:48080'
|
||||
|
||||
# 二级部署路径
|
||||
VUE_APP_APP_NAME ='yudao-admin'
|
||||
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -20,4 +20,6 @@ selenium-debug.log
|
||||
*.local
|
||||
|
||||
package-lock.json
|
||||
echarts.js
|
||||
echarts.js
|
||||
sync_line_sczg_prod.bat
|
||||
sync_line_sczg_aliyun.bat
|
||||
@@ -15,7 +15,7 @@ export function updatecostOriginRatioHis(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 获得原片良品率
|
||||
// 获得原片产线良品率
|
||||
export function getcostOriginRatioHisPage(query) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/page',
|
||||
@@ -24,6 +24,15 @@ export function getcostOriginRatioHisPage(query) {
|
||||
})
|
||||
}
|
||||
|
||||
// 获得原片工段良品率
|
||||
export function getcostOriginWSRatioHisPage(query) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/page-ws',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出原片良品率 Excel
|
||||
export function exportcostOriginRatioHisExcel(query) {
|
||||
return request({
|
||||
@@ -34,3 +43,14 @@ export function exportcostOriginRatioHisExcel(query) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 导出原片良品率 工段Excel
|
||||
export function exportcostOriginWSRatioHisExcel(query) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/export-excel-ws',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
4
src/assets/font/font.css
Normal file
4
src/assets/font/font.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: '站酷庆科黄油体';
|
||||
src: url('./站酷庆科黄油体.ttf') format('truetype');;
|
||||
}
|
||||
BIN
src/assets/font/站酷庆科黄油体.ttf
Normal file
BIN
src/assets/font/站酷庆科黄油体.ttf
Normal file
Binary file not shown.
BIN
src/assets/img/cold-data-board-msg1.png
Normal file
BIN
src/assets/img/cold-data-board-msg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/cold-data-board-msg2.png
Normal file
BIN
src/assets/img/cold-data-board-msg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -67,7 +67,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '中建材智能化院',
|
||||
title: '中建材自贡新能源',
|
||||
logo: logoImg,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -4,6 +4,7 @@ import Element from 'element-ui';
|
||||
import './assets/styles/element-variables.scss';
|
||||
import '@/assets/styles/index.scss'; // global css
|
||||
import '@/assets/styles/ruoyi.scss'; // ruoyi css
|
||||
import '@/assets/font/font.css'
|
||||
import App from './App';
|
||||
import store from './store';
|
||||
import router from './router';
|
||||
@@ -34,7 +35,6 @@ import {
|
||||
getDictDatas,
|
||||
getDictDatas2,
|
||||
} from '@/utils/dict';
|
||||
|
||||
import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
||||
|
||||
// 全局方法挂载
|
||||
|
||||
@@ -69,6 +69,26 @@ export const constantRoutes = [
|
||||
component: (resolve) => require(['@/views/print/design'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/allDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/allDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/rawDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/rawDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/deepDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/deepDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/coldDashboard-model',
|
||||
component: (resolve) => require(['@/views/dashboard/coldDashboard/index-model'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
component: Layout,
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
size="mini"
|
||||
type="text"
|
||||
style="font-size: 24px; color: white; margin-right: 30px"
|
||||
:disabled="!permission"
|
||||
@click="goDetail">
|
||||
<svg-icon icon-class="list"></svg-icon>
|
||||
详细
|
||||
@@ -273,7 +274,7 @@ export default {
|
||||
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
|
||||
getUserProfile().then((response) => {
|
||||
this.user = response.data;
|
||||
if (this.user.nickname !== '技术中心') {
|
||||
if (this.user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
this.getData();
|
||||
} else {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2024-09-05 15:33:16
|
||||
* @LastEditTime: 2025-06-13 10:59:54
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -15,7 +15,9 @@
|
||||
label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线" prop="bindObjectName">
|
||||
<el-form-item
|
||||
:label="activeName === 'his' ? '产线' : '工段'"
|
||||
prop="bindObjectName">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="dataForm.bindObjectName"
|
||||
@@ -33,7 +35,7 @@
|
||||
placeholder="选择所属日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="activeName === 'his'">
|
||||
<el-form-item label="厚度" prop="thick">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
@@ -43,7 +45,7 @@
|
||||
placeholder="请输入厚度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="activeName === 'his'">
|
||||
<el-form-item label="在线速度" prop="speed">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
@@ -53,7 +55,7 @@
|
||||
placeholder="请输入在线速度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="activeName === 'his'">
|
||||
<el-form-item label="掰边宽度" prop="width">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
@@ -64,25 +66,27 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="拉引量" prop="inArea">
|
||||
<el-form-item
|
||||
:label="activeName === 'his' ? '拉引量' : '进片数'"
|
||||
prop="inArea">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
style="width: 85%"
|
||||
v-model="dataForm.inArea"
|
||||
clearable
|
||||
placeholder="请输入拉引量" />
|
||||
(m²)
|
||||
clearable />
|
||||
{{ activeName === 'his' ? '(m²)' : '片' }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="下片面积" prop="outArea">
|
||||
<el-form-item
|
||||
:label="activeName === 'his' ? '下片面积' : '出片数'"
|
||||
prop="outArea">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
style="width: 85%"
|
||||
v-model="dataForm.outArea"
|
||||
clearable
|
||||
placeholder="请输入下片面积" />
|
||||
(m²)
|
||||
clearable />
|
||||
{{ activeName === 'his' ? '(m²)' : '片' }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@@ -129,10 +133,12 @@ export default {
|
||||
recTime: undefined,
|
||||
},
|
||||
dataRule: {},
|
||||
activeName: 'his',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(val, statisticType) {
|
||||
init(val, statisticType, activeName) {
|
||||
this.activeName = activeName;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields();
|
||||
@@ -148,17 +154,22 @@ export default {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
const udata = {
|
||||
let udata = {
|
||||
id: this.dataForm.id,
|
||||
statisticType: this.dataForm.statisticType,
|
||||
modifyThick: this.dataForm.thick,
|
||||
modifySpeed: this.dataForm.speed,
|
||||
modifyWidth: this.dataForm.width,
|
||||
modifyInArea: this.dataForm.inArea,
|
||||
modifyOutArea: this.dataForm.outArea,
|
||||
modifyRatio:
|
||||
this.dataForm.ratio >= 0 ? this.dataForm.ratio / 100 : '',
|
||||
};
|
||||
if (this.activeName === 'his') {
|
||||
udata = {
|
||||
...udata,
|
||||
modifyThick: this.dataForm.thick,
|
||||
modifySpeed: this.dataForm.speed,
|
||||
modifyWidth: this.dataForm.width,
|
||||
};
|
||||
}
|
||||
// 修改的提交
|
||||
this.urlOptions.updateURL(udata).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
|
||||
@@ -1,42 +1,71 @@
|
||||
<template>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
:name-arr="formConfig[1].selectOptions"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
<div>
|
||||
<div style="background: #f2f4f9; height: 40px; width: 100%">
|
||||
<ButtonNav :menus="['产线良品率', '工段良品率']" @change="currentMenu">
|
||||
<template v-slot:tab1>
|
||||
<div>产线良品率</div>
|
||||
</template>
|
||||
<template v-slot:tab2>
|
||||
<div>工段良品率</div>
|
||||
</template>
|
||||
</ButtonNav>
|
||||
</div>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<!-- 列表 -->
|
||||
<div v-if="activeName === 'his'">
|
||||
<base-table
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
<div v-if="activeName === 'now'">
|
||||
<base-table
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:max-height="tableH">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
<pagination
|
||||
:page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:total="listQuery.total"
|
||||
@pagination="getNavDataList" />
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
:name-arr="formConfig[1].selectOptions"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -44,9 +73,17 @@
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import basicPage from '@/mixins/basic-page';
|
||||
import { getLinePage } from '@/api/base/productionLine';
|
||||
import { getcostOriginRatioHisPage,exportcostOriginRatioHisExcel } from '@/api/cost/costOriginRatioHis';
|
||||
import {
|
||||
getcostOriginRatioHisPage,
|
||||
getcostOriginWSRatioHisPage,
|
||||
exportcostOriginWSRatioHisExcel,
|
||||
exportcostOriginRatioHisExcel,
|
||||
} from '@/api/cost/costOriginRatioHis';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||
import ButtonNav from '@/components/ButtonNav';
|
||||
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'time',
|
||||
@@ -93,6 +130,41 @@ const tableProps = [
|
||||
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
|
||||
},
|
||||
];
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'time',
|
||||
label: '日期',
|
||||
width:130,
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
},
|
||||
{
|
||||
prop: 'bindObjectName',
|
||||
label: '工段',
|
||||
width:145,
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '规格',
|
||||
},
|
||||
{
|
||||
prop: 'inArea',
|
||||
label: '进片数',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outArea',
|
||||
label: '出片数',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratio',
|
||||
label: '良品率',
|
||||
filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: 'costOriginRatioHis',
|
||||
mixins: [basicPage, tableHeightMixin],
|
||||
@@ -124,13 +196,15 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -151,23 +225,27 @@ export default {
|
||||
listQuery: {
|
||||
statisticType: 1,
|
||||
},
|
||||
activeName: 'his',
|
||||
tableProps,
|
||||
tableProps2,
|
||||
tableBtn: [{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
}
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
tableData2: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
ButtonNav,
|
||||
},
|
||||
created() {
|
||||
const params ={
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
pdType: 1
|
||||
pdType: 0
|
||||
}
|
||||
getLinePage(params).then((response) => {
|
||||
this.formConfig[1].selectOptions = response.data.list;
|
||||
@@ -183,9 +261,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
this.getDataList();
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrUpdateHandle();
|
||||
@@ -197,7 +279,7 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
this.handleExport();
|
||||
break;
|
||||
@@ -205,23 +287,74 @@ export default {
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
currentMenu(val) {
|
||||
this.activeName = val === '产线良品率' ? 'his' : 'now';
|
||||
if (this.activeName === 'his') {
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery.bindObjectId = null;
|
||||
this.listQuery.startTime = null;
|
||||
this.listQuery.endTime = null;
|
||||
this.listQuery.statisticType = 1;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery.bindObjectId = null;
|
||||
this.listQuery.startTime = null;
|
||||
this.listQuery.endTime = null;
|
||||
this.listQuery.statisticType = 1;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
// 获取数据2列表
|
||||
getDataList2() {
|
||||
getcostOriginWSRatioHisPage(this.listQuery).then((response) => {
|
||||
this.tableData2 = response.data.list;
|
||||
this.listQuery.total = response.data.total;
|
||||
});
|
||||
},
|
||||
//tableBtn点击
|
||||
handleClick(val) {
|
||||
if (val.type === 'edit') {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrEditTitle = '编辑';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
|
||||
this.$refs.addOrUpdate.init(
|
||||
val.data,
|
||||
this.listQuery.statisticType,
|
||||
this.activeName
|
||||
);
|
||||
});
|
||||
} else {
|
||||
this.otherMethods(val);
|
||||
}
|
||||
},
|
||||
getNavDataList(){
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
successSubmit() {
|
||||
this.handleCancel();
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
let exportURL, title;
|
||||
if (this.activeName === 'his') {
|
||||
exportURL = exportcostOriginRatioHisExcel;
|
||||
title = '原片成本-原片良品率';
|
||||
title = '原片-产线良品率';
|
||||
} else {
|
||||
exportURL = exportcostOriginWSRatioHisExcel;
|
||||
title = '原片-工段良品率';
|
||||
}
|
||||
// 处理查询参数
|
||||
let params = { ...this.listQuery };
|
||||
params.pageNo = undefined;
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChart(permission) {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -231,7 +231,9 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if(permission){
|
||||
option.series[2]=[]
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
|
||||
558
src/views/dashboard/allDashboard/index-model.vue
Normal file
558
src/views/dashboard/allDashboard/index-model.vue
Normal file
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 3" class="bz25-1"></div>
|
||||
<div style="flex: 5" class="bz25-2 bz-top">
|
||||
<div class="topNum">
|
||||
{{
|
||||
topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{
|
||||
topData.yestodayRatio
|
||||
? Number(topData.yestodayRatio).toFixed(1)
|
||||
: '-'
|
||||
}}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">
|
||||
{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
|
||||
</div>
|
||||
<div class="topText">本月总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-5 bz-top">
|
||||
<div class="topNum">
|
||||
{{
|
||||
topData.monthAreaCost
|
||||
? Number(topData.monthAreaCost).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
<div style="flex: 3" class="bz25-6"></div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本统计
|
||||
<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="yanqi" />
|
||||
烟气处理
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px">
|
||||
<div
|
||||
class="content middle2-left"
|
||||
style="margin-left: 50px; width: 210px">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.fc"></el-image>
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.no"></el-image>
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceS',
|
||||
label: '总成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outO',
|
||||
label: '原片产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioO',
|
||||
label: '原片良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '深加工产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '深加工良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'matPriceS',
|
||||
label: '原料成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'energyPriceS',
|
||||
label: '能源成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'otherPriceS',
|
||||
label: '其他成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'areaPriceS',
|
||||
label: '每平米成本/元',
|
||||
width: 140,
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gas',
|
||||
label: '气消耗量/m³',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
scaleNum: 0.8,
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
fc: require('@/views/dashboard/assets/fc.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=1`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('factoryState' in dataJson) {
|
||||
this.topData = dataJson.factoryState;
|
||||
if (!this.permission) {
|
||||
this.topData.monthAreaCost = '***';
|
||||
this.topData.monthSum = '***';
|
||||
this.topData.yestodaySum = '***';
|
||||
}
|
||||
}
|
||||
if ('factoryCostTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.factoryCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.priceS = null;
|
||||
item.matPriceS = null;
|
||||
item.energyPriceS = null;
|
||||
item.otherPriceS = null;
|
||||
item.areaPriceS = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryEnergyTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.factoryEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.factoryCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-1 {
|
||||
background: url(../assets/bz25-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-5 {
|
||||
background: url(../assets/bz25-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-6 {
|
||||
background: url(../assets/bz25-6.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
@@ -26,22 +26,36 @@
|
||||
<div class="main-body">
|
||||
<div style="flex: 3" class="bz25-1"></div>
|
||||
<div style="flex: 5" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{
|
||||
topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
{{
|
||||
topData.yestodayRatio
|
||||
? Number(topData.yestodayRatio).toFixed(1)
|
||||
: '-'
|
||||
}}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topNum">
|
||||
{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
|
||||
</div>
|
||||
<div class="topText">本月总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-5 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
{{
|
||||
topData.monthAreaCost
|
||||
? Number(topData.monthAreaCost).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
@@ -73,13 +87,15 @@
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px;">
|
||||
<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
|
||||
<div class="yanqi" style="width: 566px">
|
||||
<div
|
||||
class="content middle2-left"
|
||||
style="margin-left: 50px; width: 210px">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +105,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,7 +115,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,6 +156,7 @@ import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
@@ -246,11 +263,21 @@ export default {
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
@@ -341,18 +368,37 @@ export default {
|
||||
// 数据接收
|
||||
if ('factoryState' in dataJson) {
|
||||
this.topData = dataJson.factoryState;
|
||||
if (!this.permission) {
|
||||
this.topData.monthAreaCost = '***';
|
||||
this.topData.monthSum = '***';
|
||||
this.topData.yestodaySum = '***';
|
||||
}
|
||||
}
|
||||
if ('factoryCostTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.factoryCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.priceS = null;
|
||||
item.matPriceS = null;
|
||||
item.energyPriceS = null;
|
||||
item.otherPriceS = null;
|
||||
item.areaPriceS = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryEnergyTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.factoryEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('factoryCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.factoryCostTrendList;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.chartRef.initChart();
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
@@ -495,7 +541,7 @@ export default {
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
|
||||
265
src/views/dashboard/coldDashboard/components/dataBox.vue
Normal file
265
src/views/dashboard/coldDashboard/components/dataBox.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="dataBox">
|
||||
<div class="side1"></div>
|
||||
<div class="side2"></div>
|
||||
<div class='titleBox'>
|
||||
<svg-icon icon-class="energy" />
|
||||
{{title}}
|
||||
<span class='line1' style='left: 0px'></span>
|
||||
<span class='line2' style='left: 0px'></span>
|
||||
<span class='line2' style='right: 0px'></span>
|
||||
<span class='line1' style='right: 0px'></span>
|
||||
</div>
|
||||
<span class='lt' v-if='position == "lt"'></span>
|
||||
<span class='rt' v-if='position == "rt"'></span>
|
||||
<span class='lb' v-if='position == "lb"'></span>
|
||||
<span class='rb' v-if='position == "rb"'></span>
|
||||
<div class="centerBox">
|
||||
<div class="centerBoxItem1">
|
||||
<span class='num'>{{msgData?.cut || '-'}}片</span>
|
||||
<span class='name'>- 预计切割片数 -</span>
|
||||
</div>
|
||||
<div class="centerBoxItem1">
|
||||
<span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
|
||||
<span class='name'>- 综合面积良品率 -</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>掰边后片数:</span>
|
||||
<span class='num'>{{msgData?.bai || '-'}}片</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>掰边后良品率:</span>
|
||||
<span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>顶板后片数:</span>
|
||||
<span class='num'>{{msgData?.ding || '-'}}片</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>顶板后良品率:</span>
|
||||
<span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>下片片数:</span>
|
||||
<span class='num'>{{msgData?.xia || '-'}}片</span>
|
||||
</div>
|
||||
<div class="centerBoxItem2">
|
||||
<span class='name'>下片良品率:</span>
|
||||
<span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataBox',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
position:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
msgData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dataBox {
|
||||
width: 909px;
|
||||
height: 430px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 0;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 909px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(88, 194, 255, 1) 10%,
|
||||
rgba(0, 176, 243, 0) 90%,
|
||||
transparent);
|
||||
}
|
||||
.side1 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 400px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(88, 194, 255, 1) 10%,
|
||||
rgba(0, 176, 243, 0) 80%,
|
||||
transparent);
|
||||
}
|
||||
.side2 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 400px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(88, 194, 255, 1) 10%,
|
||||
rgba(0, 176, 243, 0) 80%,
|
||||
transparent);
|
||||
}
|
||||
|
||||
.titleBox {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding-left: 23px;
|
||||
background-color: rgba(0, 106, 205, 0.22);
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
.line1 {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background-color: #0078E4;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
.line2 {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #0078E4;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
.lt {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-left-color: #1F8FFF;
|
||||
border-top-color: #1F8FFF;
|
||||
}
|
||||
.rt {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-right-color: #1F8FFF;
|
||||
border-top-color: #1F8FFF;
|
||||
}
|
||||
.lb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-left-color: #1F8FFF;
|
||||
border-bottom-color: #1F8FFF;
|
||||
}
|
||||
.rb {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
border-right-color: #1F8FFF;
|
||||
border-bottom-color: #1F8FFF;
|
||||
}
|
||||
.centerBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
padding: 20px 24px 35px 24px;
|
||||
.centerBoxItem1 {
|
||||
width: 426px;
|
||||
height: 106px;
|
||||
background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
|
||||
text-align: center;
|
||||
.num {
|
||||
font-family: '站酷庆科黄油体';
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-top:15px;
|
||||
margin-bottom: 3px;
|
||||
color: #48D6FF;
|
||||
letter-spacing: 6px;
|
||||
text-shadow: 1px 4px 2px #000000;
|
||||
}
|
||||
.name {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
}
|
||||
.centerBoxItem2 {
|
||||
width: 426px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 16px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
.name {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 213px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
.num {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 213px;
|
||||
color: #15C1F2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataBox > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
184
src/views/dashboard/coldDashboard/index-model.vue
Normal file
184
src/views/dashboard/coldDashboard/index-model.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div
|
||||
id="coldContainerB"
|
||||
ref="coldContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="coldContainer"
|
||||
class="coldContainer"
|
||||
style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡冷端数据看板" />
|
||||
<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
|
||||
<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
|
||||
<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
|
||||
<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import DataBox from './components/dataBox';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
export default {
|
||||
name: 'ColdDashboard',
|
||||
components: {
|
||||
KHeader,
|
||||
DataBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 1,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
line1: {},
|
||||
line2: {},
|
||||
line3: {},
|
||||
line4: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
this.websocketclose();
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.coldContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let coldContainerBox = document.getElementById('coldContainer');
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(coldContainerBox.style.width);
|
||||
let bh = parseFloat(coldContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=4`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let msgData = e.data;
|
||||
try {
|
||||
msgData = JSON.parse(e.data);
|
||||
} catch (error) {
|
||||
console.log('websocket: [unable to msgData] : ', e.data);
|
||||
}
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
msgData.originRatioTables &&
|
||||
msgData.originRatioTables.forEach((item) => {
|
||||
item.lineName.includes('1') && (this.line1 = item);
|
||||
item.lineName.includes('2') && (this.line2 = item);
|
||||
item.lineName.includes('3') && (this.line3 = item);
|
||||
item.lineName.includes('4') && (this.line4 = item);
|
||||
});
|
||||
},
|
||||
websocketsend() {
|
||||
// 数据发送
|
||||
this.websock.send('');
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
this.websock.close();
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coldContainer {
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
.box1 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
left: 40px;
|
||||
}
|
||||
.box2 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
right: 40px;
|
||||
}
|
||||
.box3 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
left: 40px;
|
||||
}
|
||||
.box4 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/views/dashboard/coldDashboard/index.vue
Normal file
194
src/views/dashboard/coldDashboard/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div
|
||||
id="coldContainerB"
|
||||
ref="coldContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="coldContainer"
|
||||
class="coldContainer"
|
||||
style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡冷端数据看板" />
|
||||
<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
|
||||
<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
|
||||
<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
|
||||
<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import DataBox from './components/dataBox';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
export default {
|
||||
name: 'ColdDashboard',
|
||||
components: {
|
||||
KHeader,
|
||||
DataBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 1,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
line1: {},
|
||||
line2: {},
|
||||
line3: {},
|
||||
line4: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
this.websocketclose();
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.coldContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let coldContainerBox = document.getElementById('coldContainer');
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(coldContainerBox.style.width);
|
||||
let bh = parseFloat(coldContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
if (screenfull.isFullscreen) {
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
} else {
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw - 280) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
} else {
|
||||
wx = (rw - 85) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=4`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let msgData = e.data;
|
||||
try {
|
||||
msgData = JSON.parse(e.data);
|
||||
} catch (error) {
|
||||
console.log('websocket: [unable to msgData] : ', e.data);
|
||||
}
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
msgData.originRatioTables &&
|
||||
msgData.originRatioTables.forEach((item) => {
|
||||
item.lineName.includes('1') && (this.line1 = item);
|
||||
item.lineName.includes('2') && (this.line2 = item);
|
||||
item.lineName.includes('3') && (this.line3 = item);
|
||||
item.lineName.includes('4') && (this.line4 = item);
|
||||
});
|
||||
},
|
||||
websocketsend() {
|
||||
// 数据发送
|
||||
this.websock.send('');
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
this.websock.close();
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coldContainer {
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
.box1 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
left: 40px;
|
||||
}
|
||||
.box2 {
|
||||
position: absolute;
|
||||
top: 141px;
|
||||
right: 40px;
|
||||
}
|
||||
.box3 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
left: 40px;
|
||||
}
|
||||
.box4 {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChart(permission) {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -292,6 +292,9 @@ export default {
|
||||
],
|
||||
};
|
||||
|
||||
if(permission){
|
||||
option.series[1]=[]
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
|
||||
515
src/views/dashboard/deepDashboard/index-model.vue
Normal file
515
src/views/dashboard/deepDashboard/index-model.vue
Normal file
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡深加工成本看板" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 1" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
|
||||
<div class="topText">昨日深加工产量/万m²</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-7 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topText">本月深加工成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-8 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="line" />
|
||||
各产线产量及良品率
|
||||
<span style="float: right">产量单位:万平方米</span>
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table3'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps3"
|
||||
:table-data="tableData3"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本及产量统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import interval from './interval.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'yure',
|
||||
label: '余热发电量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'elecPrice',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceD',
|
||||
label: '成本/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '产量/万m²',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
const tableProps3 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '产线1',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '产线2',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '产线3',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '产线4',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '产线5',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
o2: require('@/views/dashboard/assets/O2.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
no2: require('@/views/dashboard/assets/NO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
tableProps3,
|
||||
tableData3: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=3`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('DeepState' in dataJson) {
|
||||
this.topData = dataJson.DeepState;
|
||||
if (!this.permission) {
|
||||
this.topData.yestodaySum = '***';
|
||||
this.topData.monthSum = '***';
|
||||
this.topData.monthAreaCost = '***';
|
||||
}
|
||||
}
|
||||
if ('DeepEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.DeepEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.elecPrice = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('DeepCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.DeepCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.priceD = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('DeepPdTables' in dataJson) {
|
||||
this.tableData3 = dataJson.DeepPdTables;
|
||||
}
|
||||
if ('DeepCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.DeepCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-d-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-d-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-d-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-7 {
|
||||
background: url(../assets/bz25-d-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-8 {
|
||||
background: url(../assets/bz25-d-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
@@ -110,6 +110,7 @@ import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import interval from './interval.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
@@ -224,12 +225,22 @@ export default {
|
||||
tableData2: [],
|
||||
tableProps3,
|
||||
tableData3: [],
|
||||
echartData: []
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
@@ -319,12 +330,27 @@ export default {
|
||||
// 数据接收
|
||||
if ('DeepState' in dataJson) {
|
||||
this.topData = dataJson.DeepState;
|
||||
if(!this.permission){
|
||||
this.topData.yestodaySum = '***'
|
||||
this.topData.monthSum = '***'
|
||||
this.topData.monthAreaCost = '***'
|
||||
}
|
||||
}
|
||||
if ('DeepEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.DeepEnergyTableList;
|
||||
if(!this.permission){
|
||||
this.tableData1.forEach(item=>{
|
||||
item.elecPrice = null
|
||||
})
|
||||
}
|
||||
}
|
||||
if ('DeepCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.DeepCostTableList;
|
||||
if(!this.permission){
|
||||
this.tableData2.forEach(item=>{
|
||||
item.priceD = null
|
||||
})
|
||||
}
|
||||
}
|
||||
if ('DeepPdTables' in dataJson) {
|
||||
this.tableData3 = dataJson.DeepPdTables;
|
||||
@@ -332,7 +358,7 @@ export default {
|
||||
if ('DeepCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.DeepCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart();
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
initChart(permission) {
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
@@ -293,6 +293,9 @@ export default {
|
||||
],
|
||||
}
|
||||
|
||||
if(permission){
|
||||
option.series[1]=[]
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
|
||||
532
src/views/dashboard/rawDashboard/index-model.vue
Normal file
532
src/views/dashboard/rawDashboard/index-model.vue
Normal file
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡原片成本看板" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 1" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-5 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
|
||||
<div class="topText">昨日原料成本/万元</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
|
||||
<div class="topText">本月原片产量/万m²</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-7 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
|
||||
<div class="topText">本月原料成本/万元</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1" class="bz25-8 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="yanqi" />
|
||||
烟气处理
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px">
|
||||
<div
|
||||
class="content middle2-left"
|
||||
style="margin-left: 50px; width: 210px">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.fc"></el-image>
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.no"></el-image>
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本及产量统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'elecPrice',
|
||||
label: '电总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gas',
|
||||
label: '气消耗量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gasPrice',
|
||||
label: '气总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '能源总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceO',
|
||||
label: '成本/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outO',
|
||||
label: '产量/万m²',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioO',
|
||||
label: '良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
fc: require('@/views/dashboard/assets/fc.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=2`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('OriginState' in dataJson) {
|
||||
this.topData = dataJson.OriginState;
|
||||
if (!this.permission) {
|
||||
this.topData.monthAreaCost = '***';
|
||||
this.topData.monthMat = '***';
|
||||
this.topData.yestodaySum = '***';
|
||||
this.topData.yestodayMat = '***';
|
||||
}
|
||||
}
|
||||
if ('OriginEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.OriginEnergyTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData1.forEach((item) => {
|
||||
item.elecPrice = null;
|
||||
item.gasPrice = null;
|
||||
item.price = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('OriginCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.OriginCostTableList;
|
||||
if (!this.permission) {
|
||||
this.tableData2.forEach((item) => {
|
||||
item.priceO = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if ('OriginCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.OriginCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-5 {
|
||||
background: url(../assets/bz25-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-7 {
|
||||
background: url(../assets/bz25-7.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-8 {
|
||||
background: url(../assets/bz25-8.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
@@ -83,7 +83,7 @@
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,7 +93,7 @@
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,7 +103,7 @@
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,6 +144,7 @@ import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
@@ -229,11 +230,21 @@ export default {
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
permission: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
this.permission = false;
|
||||
getUserProfile().then((response) => {
|
||||
const user = response.data;
|
||||
if (user.roles[0].name !== 'dashborad') {
|
||||
this.permission = true;
|
||||
} else {
|
||||
this.permission = false;
|
||||
}
|
||||
this.initWebSocket();
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
@@ -324,17 +335,35 @@ export default {
|
||||
// 数据接收
|
||||
if ('OriginState' in dataJson) {
|
||||
this.topData = dataJson.OriginState;
|
||||
if(!this.permission){
|
||||
this.topData.monthAreaCost = '***'
|
||||
this.topData.monthMat = '***'
|
||||
this.topData.yestodaySum = '***'
|
||||
this.topData.yestodayMat = '***'
|
||||
}
|
||||
}
|
||||
if ('OriginEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.OriginEnergyTableList;
|
||||
if(!this.permission){
|
||||
this.tableData1.forEach(item=>{
|
||||
item.elecPrice = null
|
||||
item.gasPrice = null
|
||||
item.price = null
|
||||
})
|
||||
}
|
||||
}
|
||||
if ('OriginCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.OriginCostTableList;
|
||||
if(!this.permission){
|
||||
this.tableData2.forEach(item=>{
|
||||
item.priceO = null
|
||||
})
|
||||
}
|
||||
}
|
||||
if ('OriginCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.OriginCostTrendList;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.chartRef.initChart();
|
||||
this.$refs.chartRef.initChart(!this.permission);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="field">
|
||||
<!-- [移动端]标题 -->
|
||||
<h2 class="mobile-title">
|
||||
<h3 class="title">中建材智能自动化研究院有限公司</h3>
|
||||
<h3 class="title">中建材自贡新能源有限公司</h3>
|
||||
</h2>
|
||||
<h2 class="pc-title" style="">
|
||||
<h3
|
||||
@@ -89,7 +89,7 @@
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
" />
|
||||
<span>中建材智能自动化研究院有限公司</span>
|
||||
<span>中建材自贡新能源有限公司</span>
|
||||
</h3>
|
||||
<h3
|
||||
class="sub-title"
|
||||
@@ -108,13 +108,13 @@
|
||||
</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont" style="margin-top: 60px;">
|
||||
<div class="form-cont" style="margin-top: 60px">
|
||||
<!-- <el-tabs
|
||||
class="form"
|
||||
v-model="loginForm.loginType"
|
||||
style="float: none">
|
||||
<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
|
||||
<!-- </el-tabs> -->
|
||||
<div style="">
|
||||
<el-form
|
||||
@@ -207,12 +207,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
|
||||
<el-form-item
|
||||
id="button-form-item"
|
||||
style="width: 100%; margin-top: 32px">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%; height: 66px; font-size: 18px;"
|
||||
style="width: 100%; height: 66px; font-size: 18px"
|
||||
@click.native.prevent="getCode">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
@@ -285,13 +287,13 @@ export default {
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: 'uname',
|
||||
username: '',//admin
|
||||
password: '',//admin123 kszny123456
|
||||
username: '', //admin
|
||||
password: '', //admin123 kszny123456
|
||||
captchaVerification: '',
|
||||
mobile: '',
|
||||
mobileCode: '',
|
||||
rememberMe: false,
|
||||
tenantName: '技术中心',//技术中心
|
||||
tenantName: '技术中心', //技术中心
|
||||
},
|
||||
scene: 21,
|
||||
|
||||
@@ -345,7 +347,21 @@ export default {
|
||||
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.redirect = to.query.redirect
|
||||
? decodeURIComponent(to.query.redirect)
|
||||
: undefined;
|
||||
this.getURL();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 验证码开关
|
||||
this.captchaEnable = false;
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect
|
||||
? decodeURIComponent(this.$route.query.redirect)
|
||||
: undefined;
|
||||
// 租户开关
|
||||
this.tenantEnable = getTenantEnable();
|
||||
if (this.tenantEnable) {
|
||||
@@ -354,18 +370,28 @@ export default {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId);
|
||||
this.getURL();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 验证码开关
|
||||
this.captchaEnable = false;
|
||||
// 重定向地址
|
||||
this.redirect = this.$route.query.redirect
|
||||
? decodeURIComponent(this.$route.query.redirect)
|
||||
: undefined;
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getURL() {
|
||||
const params = {};
|
||||
const urlObj = new URL('https://' + this.redirect);
|
||||
|
||||
urlObj.searchParams.forEach((value, key) => {
|
||||
params[key] = value;
|
||||
});
|
||||
if (this.redirect && Object.keys(params).length !== 0) {
|
||||
this.loginForm.username = params.username;
|
||||
this.loginForm.password = params.password;
|
||||
this.$nextTick(() => {
|
||||
this.getCode();
|
||||
});
|
||||
}
|
||||
},
|
||||
getCode() {
|
||||
// 情况一,未开启:则直接登录
|
||||
if (!this.captchaEnable) {
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
@echo off
|
||||
setlocal enabledelayedexpansion
|
||||
set cmdstr=rsync
|
||||
set zipfile=cwrsync.zip
|
||||
set downurl=https://itefix.net/download/free/cwrsync_6.3.0_x64_free.zip
|
||||
set currpath=%~dp0
|
||||
set "rsynchome=%ProgramFiles%\%zipfile:~0,-4%"
|
||||
set passfile=%temp%\.password
|
||||
set syncdir=dist/
|
||||
:: <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ҫ<EFBFBD><D2AA><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
set accountwithost=kszny@100.64.0.45::line
|
||||
set "password=kszny@123"
|
||||
set "runcommand=%cmdstr% --port=873 -rlptvz --progress --password-file=%passfile% --exclude=google.exe --exclude=Lodap.zip %syncdir% %accountwithost%"
|
||||
|
||||
where %cmdstr% >nul 2>nul
|
||||
::<3A>д<EFBFBD><D0B4><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˵<EFBFBD><CBB5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ڸ<EFBFBD><DAB8><EFBFBD><EFBFBD><EFBFBD>
|
||||
if %errorlevel% neq 0 (
|
||||
::<3A><>δ<EFBFBD><CEB4><EFBFBD>ذ<EFBFBD>װ<EFBFBD><D7B0><EFBFBD><EFBFBD>δ<EFBFBD><CEB4><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѹ<EFBFBD><D1B9><EFBFBD><EFBFBD>װĿ¼
|
||||
if not exist "%rsynchome%" (
|
||||
:: <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ԱȨ<D4B1><C8A8>
|
||||
echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\runAsAdmin.vbs"
|
||||
echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\runAsAdmin.vbs"
|
||||
"%temp%\runAsAdmin.vbs"
|
||||
:: <20><>Ҫ<EFBFBD><D2AA><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ԱȨ<D4B1><EFBFBD><DEB2>ܴ<EFBFBD><DCB4><EFBFBD><EFBFBD><EFBFBD>Ŀ¼
|
||||
mkdir "%rsynchome%"
|
||||
del "%temp%\runAsAdmin.vbs"
|
||||
exit /B
|
||||
)
|
||||
|
||||
:: ʹ<><CAB9>powershell<6C><6C>curl<72><6C><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
powershell curl -o %temp%\%zipfile% %downurl%
|
||||
:: <20><>ѹ
|
||||
tar -xf "%temp%\%zipfile%" -C "%rsynchome%"
|
||||
echo "%cmdstr%<EFBFBD>Ѿ<EFBFBD><EFBFBD><EFBFBD>װ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>%rsynchome%Ŀ¼<EFBFBD><EFBFBD>"
|
||||
|
||||
:: <20><><EFBFBD><EFBFBD>·<EFBFBD><C2B7><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> PATH <20><>
|
||||
set "found=false"
|
||||
for %%I in ("%PATH:;=";"%") do (
|
||||
if /I "%%~I"=="%rsynchome%\bin" (
|
||||
set "found=true"
|
||||
)
|
||||
)
|
||||
|
||||
:: δ<><CEB4><EFBFBD>õ<EFBFBD>path<74><68><EFBFBD><EFBFBD><EFBFBD>У<EFBFBD><D0A3><EFBFBD><EFBFBD>ӵ<EFBFBD>path<74><68><EFBFBD><EFBFBD>
|
||||
if "!found!"=="false" (
|
||||
:: <20><><EFBFBD><EFBFBD>ע<EFBFBD><D7A2><EFBFBD><EFBFBD><EFBFBD>е<EFBFBD> PATH <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ͨ<EFBFBD><CDA8>setx<74><78>ʽ<EFBFBD><CABD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD>ȳ<EFBFBD><C8B3><EFBFBD>1024<32><34><EFBFBD>ַ<EFBFBD><D6B7>ͻᱻ<CDBB>ض<EFBFBD>
|
||||
reg add "HKCU\Environment" /v PATH /t REG_EXPAND_SZ /d "%PATH%;%rsynchome%\bin" /f
|
||||
)
|
||||
|
||||
)
|
||||
|
||||
::<3A><>ǰĿ¼<C4BF><C2BC>û<EFBFBD><C3BB>distĿ¼
|
||||
if not exist "%currpath%%syncdir%" (
|
||||
echo <20><>ǰĿ¼<C4BF><C2BC>û<EFBFBD><C3BB><EFBFBD><EFBFBD>Ҫͬ<D2AA><CDAC><EFBFBD><EFBFBD>%syncdir%Ŀ¼<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ҫͬ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>%syncdir%Ŀ¼<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ǰĿ¼<EFBFBD>£<EFBFBD>
|
||||
) else (
|
||||
echo !password!>%passfile%
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD>Ժ<EFBFBD>...
|
||||
!runcommand! && (
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD><EFBFBD><EFBFBD>!
|
||||
) || (
|
||||
echo !runcommand!
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC>ʧ<EFBFBD>ܣ<EFBFBD><DCA3><EFBFBD>ȷ<EFBFBD><C8B7><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>VPN<50><4E>
|
||||
)
|
||||
del %passfile%
|
||||
)
|
||||
|
||||
endlocal
|
||||
pause
|
||||
@echo off
|
||||
setlocal enabledelayedexpansion
|
||||
set cmdstr=rsync
|
||||
set zipfile=cwrsync.zip
|
||||
set downurl=https://itefix.net/download/free/cwrsync_6.3.0_x64_free.zip
|
||||
set currpath=%~dp0
|
||||
set "rsynchome=%ProgramFiles%\%zipfile:~0,-4%"
|
||||
set passfile=%temp%\.password
|
||||
set syncdir=dist/
|
||||
:: <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ҫ<EFBFBD><D2AA><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
set accountwithost=kszny@100.64.0.45::line
|
||||
set "password=kszny@123"
|
||||
set "runcommand=%cmdstr% --port=873 -rlptvz --progress --password-file=%passfile% --exclude=google.exe --exclude=Lodap.zip %syncdir% %accountwithost%"
|
||||
|
||||
where %cmdstr% >nul 2>nul
|
||||
::<3A>д<EFBFBD><D0B4><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˵<EFBFBD><CBB5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ڸ<EFBFBD><DAB8><EFBFBD><EFBFBD><EFBFBD>
|
||||
if %errorlevel% neq 0 (
|
||||
::<3A><>δ<EFBFBD><CEB4><EFBFBD>ذ<EFBFBD>װ<EFBFBD><D7B0><EFBFBD><EFBFBD>δ<EFBFBD><CEB4><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѹ<EFBFBD><D1B9><EFBFBD><EFBFBD>װĿ¼
|
||||
if not exist "%rsynchome%" (
|
||||
:: <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ԱȨ<D4B1><C8A8>
|
||||
echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\runAsAdmin.vbs"
|
||||
echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\runAsAdmin.vbs"
|
||||
"%temp%\runAsAdmin.vbs"
|
||||
:: <20><>Ҫ<EFBFBD><D2AA><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ԱȨ<D4B1><EFBFBD><DEB2>ܴ<EFBFBD><DCB4><EFBFBD><EFBFBD><EFBFBD>Ŀ¼
|
||||
mkdir "%rsynchome%"
|
||||
del "%temp%\runAsAdmin.vbs"
|
||||
exit /B
|
||||
)
|
||||
|
||||
:: ʹ<><CAB9>powershell<6C><6C>curl<72><6C><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
powershell curl -o %temp%\%zipfile% %downurl%
|
||||
:: <20><>ѹ
|
||||
tar -xf "%temp%\%zipfile%" -C "%rsynchome%"
|
||||
echo "%cmdstr%<EFBFBD>Ѿ<EFBFBD><EFBFBD><EFBFBD>װ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>%rsynchome%Ŀ¼<EFBFBD><EFBFBD>"
|
||||
|
||||
:: <20><><EFBFBD><EFBFBD>·<EFBFBD><C2B7><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> PATH <20><>
|
||||
set "found=false"
|
||||
for %%I in ("%PATH:;=";"%") do (
|
||||
if /I "%%~I"=="%rsynchome%\bin" (
|
||||
set "found=true"
|
||||
)
|
||||
)
|
||||
|
||||
:: δ<><CEB4><EFBFBD>õ<EFBFBD>path<74><68><EFBFBD><EFBFBD><EFBFBD>У<EFBFBD><D0A3><EFBFBD><EFBFBD>ӵ<EFBFBD>path<74><68><EFBFBD><EFBFBD>
|
||||
if "!found!"=="false" (
|
||||
:: <20><><EFBFBD><EFBFBD>ע<EFBFBD><D7A2><EFBFBD><EFBFBD><EFBFBD>е<EFBFBD> PATH <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ͨ<EFBFBD><CDA8>setx<74><78>ʽ<EFBFBD><CABD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD>ȳ<EFBFBD><C8B3><EFBFBD>1024<32><34><EFBFBD>ַ<EFBFBD><D6B7>ͻᱻ<CDBB>ض<EFBFBD>
|
||||
reg add "HKCU\Environment" /v PATH /t REG_EXPAND_SZ /d "%PATH%;%rsynchome%\bin" /f
|
||||
)
|
||||
|
||||
)
|
||||
|
||||
::<3A><>ǰĿ¼<C4BF><C2BC>û<EFBFBD><C3BB>distĿ¼
|
||||
if not exist "%currpath%%syncdir%" (
|
||||
echo <20><>ǰĿ¼<C4BF><C2BC>û<EFBFBD><C3BB><EFBFBD><EFBFBD>Ҫͬ<D2AA><CDAC><EFBFBD><EFBFBD>%syncdir%Ŀ¼<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ҫͬ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>%syncdir%Ŀ¼<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ǰĿ¼<EFBFBD>£<EFBFBD>
|
||||
) else (
|
||||
echo !password!>%passfile%
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD>Ժ<EFBFBD>...
|
||||
!runcommand! && (
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC><EFBFBD><EFBFBD><EFBFBD><EFBFBD>!
|
||||
) || (
|
||||
echo !runcommand!
|
||||
echo <20><><EFBFBD><EFBFBD>ͬ<EFBFBD><CDAC>ʧ<EFBFBD>ܣ<EFBFBD><DCA3><EFBFBD>ȷ<EFBFBD><C8B7><EFBFBD>Ƿ<EFBFBD><C7B7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>VPN<50><4E>
|
||||
)
|
||||
del %passfile%
|
||||
)
|
||||
|
||||
endlocal
|
||||
pause
|
||||
|
||||
@@ -8,7 +8,7 @@ function resolve(dir) {
|
||||
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司' // 网页标题
|
||||
const name = process.env.VUE_APP_TITLE || '中建材自贡新能源有限公司' // 网页标题
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
||||
|
||||
Reference in New Issue
Block a user