Skip to content

H
hg-front
Commit d0cda602 by zhangzhen
Options

添加设备管理驾驶舱

parent 2a2a40fc
Showing with 795 additions and 3 deletions
api/device-manager.js
......@@ -127,4 +127,8 @@ export const updateSubmitStatus = (data) => {
return http.post(url, d)
}
export const getDataStatistics = (params) => {
let url = `/service/S_SB_TJ_01`
let d = setParamsData(params)
return http.post(url, d)
}
pages.json
......@@ -468,6 +468,17 @@
}
},
{
"path" : "pages/device-cockpit/index",
"style" :
{
"navigationBarTitleText" : "管理驾驶舱",
"navigationBarBackgroundColor": "#0072fc",
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/device-manager/list",
"style" :
{
......
pages/daily-inspection/index.vue
......@@ -56,7 +56,7 @@
<view class="header-title">
<image src="../../static/icon5.png" mode="widthFix"></image>
<view class="flex-between">
<text class="text-black text-bold">{{item.projName}}</text>
<text class="text-black text-bold ellipsis">{{item.projName}}</text>
<view class="text-blue">
<!-- <text :class="item.status==1?'text-red':'text-gray'">{{statusEnum[item.status]}}</text> -->
<text>详情</text>
......
pages/device-cockpit/index.vue 0 → 100644
<template>
<view>
<cu-custom bgColor="bg-blue" :isBack="true">
<block slot="backText">
<view class="list-icon" @tap="onBack">
<text class="cuIcon-back text-white text-bold text-xl"></text>
</view>
</block>
<block slot="content">
<text class="text-white">管理驾驶舱</text>
</block>
</cu-custom>
<view v-if="statusBarHeight>0" class="content-black" :style="{height:statusBarHeight+'px'}"></view>
<view v-if="value === 0" class="flex-col">
<view class="flex-between header-title">
<picker mode="selector" :range="factoryList" v-model="factoryIndex" range-key="name"
@change="onFactoryChange">
<view class="factory-name flex-row-center">
<text
:class="factoryList.length&& factoryList[factoryIndex].name.length>=10?'factory-title':'text-nowrap'">{{factoryList.length? factoryList[factoryIndex].name:'厂别'}}</text>
<text class="cuIcon-unfold text-sm"></text>
</view>
</picker>
<view class="flex-between margin-left-sm" @tap="onOpenCalendar">
<image class="image" src="../../static/big-data/calendar.png" mode="widthFix"></image>
<text class="text-blue">{{date}}</text>
</view>
</view>
<view class="flex-col data-content">
<view v-for="(item,k) in dataChatList" :key="k" class="flex-col data-chart">
<view class="header-title">
<view class="flex-between">
<view class="flex-row-center">
<image class="icon" src="../../static/big-data/line_icon.png" mode="widthFix"></image>
<text class="text-title text-lg text-bold">{{item.deviceName}}</text>
</view>
<view class="flex-row-center">
<image v-if="['1','2','3','4'].includes(item.status)" class="icon" src="../../static/d_s_1.png" mode="widthFix"></image>
<image v-else class="icon" src="../../static/d_s_2.png" mode="widthFix"></image>
<text>{{deviceStatus[item.status]}}</text>
</view>
</view>
</view>
<view class="circle-par">
<view class="flex-content" style="width: 100%; height:560rpx">
<view v-if="item.echartShow" style="width:720rpx; height:550rpx">
<l-echart :ref="'chartRef'+k" @finished="init(k)"></l-echart>
</view>
</view>
<view class="flex-content" style="width: 100%; height:560rpx">
<view v-if="item.echartShow" style="width:720rpx; height:550rpx">
<l-echart :ref="'chartRef2'+k" @finished="init2(k)"></l-echart>
</view>
</view>
</view>
</view>
<view v-if="dataChatList.length <= 0" class="empty-box">
<u-empty text="暂无数据" textColor='#C1C1C1' width="120">
</u-empty>
</view>
</view>
</view>
<view>
<uni-calendar ref="calendar" :startDate="startDate" :endDate="endDate" :date="date" :insert="false"
@confirm="onConfirmDate" />
</view>
</view>
</template>
<script>
import nav1 from "@/static/big-data/nav_1.png"
import nav2 from "@/static/big-data/nav_1_active.png"
import nav3 from "@/static/big-data/nav_2.png"
import nav4 from "@/static/big-data/nav_2_active.png"
import {
toJsonData
} from "@/utils/tools.js";
import moment from "@/common/moment.js";
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
import {
getFactoryList,
getSearchDate,
getHarvestData1,
getHarvestData2,
getHarvestData3,
getHarvestData4,
getHarvestData5
} from "@/api/bigData.js"
import {
getDataStatistics
} from "@/api/device-manager.js"
export default {
data() {
return {
scrollTop: 0,
statusBarHeight: uni.getStorageSync("statusHeight") || 0,
nav1,
nav2,
nav3,
nav4,
value: 0,
date: moment().subtract(1, 'd').format("YYYY-MM-DD"),
startDate: moment().subtract(1, 'Y').format("YYYY-MM-DD"),
endDate: moment().format("YYYY-MM-DD"),
status: 'nomore ',
loadingText: '努力加载中',
loadmoreText: '上划加载',
nomoreText: '到底啦',
projectDataList: [],
statusEnum: {
0: "计划中",
1: "生产中",
2: "已完成"
},
factoryIndex: 0,
factoryList: [],
queryData: {},
dataList: [{
YGL: 24,
SJCL: 126,
RJCL: 24900
},
{
LJYGL: 231,
LJSJCL: 1543,
LJRJCL: 34123
},
{
NLJYG: 234,
NLJSJCL: 4554,
NLJRJCL: 32345
}
],
dataChatList2: [],
dataChatList: [],
groupData: '',
groupDataList: [],
groupInfoList: [],
titleEnum: {
0: '产量',
1: "项目"
},
productData: '',
processData: [],
pageData: {
showCount: "true",
limit: 5,
offset: 0
},
timer: null,
deviceStatus:{
0:"异常",
1:"默认",
2:"运行",
3:"暂停",
4:"复位",
5:"一级报警",
6:"二级报警"
}
};
},
onLoad() {
this.date = moment().subtract(1, 'd').format("YYYY-MM-DD");
this.endDate = moment().format("YYYY-MM-DD");
this.onGetFactoryList();
},
onReachBottom() {
if (this.status == 'loadmore') {
this.queryData.offset += 1;
}
},
methods: {
onBack() {
uni.redirectTo({
url: "/"
})
},
onGetFactoryList() {
getFactoryList({
date: moment().format("YYYY-MM-DD")
}).then(res => {
if (res.data.length) {
this.factoryList = res.data.map(item => ({
name: `${item.companyName||''}-${item.factoryName}`,
value: item.factoryCode,
companyName: item.companyName,
companyCode: item.companyCode
}));
this.onLoading();
}
})
},
onFactoryChange(e) {
this.factoryIndex = e.target.value;
this.onLoading();
},
onLoading() {
this.echartShow = false;
getDataStatistics({
...this.queryData,
factoryCode: this.factoryList[this.factoryIndex].value,
companyCode: this.factoryList[this.factoryIndex].companyCode,
date: moment(this.date).format("YYYYMMDD")
}).then(res => {
if (res.data.__sys__.status === 0) {
this.dataChatList = res.data.result.map(item => {
return {
...item,
echartShow: false,
echartShow2: false
}
})
this.$nextTick(() => {
setTimeout(() => {
this.dataChatList.forEach(item => {
item.echartShow = true;
item.echartShow2 = true;
this.$forceUpdate();
})
}, 500)
})
}
})
},
onOpenCalendar() {
this.$refs.calendar.open();
},
onConfirmDate(e) {
this.date = e.fulldate;
this.onLoading();
},
async init(i) {
if (!this.dataChatList.length) return;
let xData = []
let yData = []
this.dataChatList[i].runTime.forEach(item => {
xData.push(Object.keys(item)[0]);
yData.push(Object.values(item)[0])
})
console.log(yData, xData)
let option = {
color: ['#157DFF', '#5FD77E', '#FF8C00', '#e05aff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
orient: 'horizontal',
x: 'center',
y: "2%",
},
grid: {
top: '34%',
left: '3%',
right: '4%',
bottom: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(151, 151, 151, 1)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000',
},
},
axisTick: {
show: true
},
data: xData,
}],
yAxis: [{
name: '小时',
type: 'value',
nameTextStyle: {
color: "#000"
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(151, 151, 151, 1)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000',
},
},
axisTick: {
show: false,
color: 'rgba(151, 151, 151, 1)'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(226, 232, 236, 1)',
type: 'solid',
}
},
}],
series: [{
name: '近7日作业时长',
type: "line",
label: {
show: true,
position: 'top'
},
data: yData
}]
};
let chartRef = 'chartRef' + i;
const chart = await this.$refs[chartRef][0].init(echarts);
chart.setOption(option)
},
async init2(i) {
if (!this.dataChatList.length) return;
let xData = []
let yData = []
this.dataChatList[i].errerTime.forEach(item => {
xData.push(Object.keys(item)[0]);
yData.push(Object.values(item)[0])
})
console.log(yData, xData)
let option = {
color: ['#157DFF', '#5FD77E', '#FF8C00', '#e05aff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
orient: 'horizontal',
x: 'center',
y: "2%",
},
grid: {
top: '34%',
left: '3%',
right: '4%',
bottom: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(151, 151, 151, 1)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000',
},
},
axisTick: {
show: true
},
data: xData,
}],
yAxis: [{
name: '次',
type: 'value',
nameTextStyle: {
color: "#000"
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#000',
},
},
axisTick: {
show: false,
color: 'rgba(151, 151, 151, 1)'
}
}],
series: [{
name: '近7日故障次数',
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#83bff6'
}
]
)
}
},
label: {
show: true,
position: 'top'
},
data: yData
}]
};
let chartRef = 'chartRef2' + i;
const chart = await this.$refs[chartRef][0].init(echarts);
chart.setOption(option)
}
}
}
</script>
<style>
page {
background-color: #ffffff;
}
</style>
<style lang="less">
.text-blue {
color: #1890FF;
font-weight: bold;
}
.header-title {
display: flex;
flex-direction: row;
width: 90%;
align-items: center;
margin: 24upx auto;
.flex-between {
display: flex;
border-radius: 10upx;
// padding: 12upx 16upx;
// background-color: rgba(246, 246, 248, 1);
width: 100%;
.image {
width: 24upx;
margin-right: 8upx;
max-height: 32upx;
}
}
.factory-name {
max-width: 400upx;
.text-nowrap{
white-space: nowrap;
}
.factory-title {
width: 400upx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.scroll-view {
position: relative;
display: flex;
flex: 1;
width: 100vw;
height: 100vh;
.black-header {
width: 100%;
height: 340upx;
}
}
.data-content {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 96%;
.part-table {
width: 100%;
box-shadow: 0px 4px 11px 0px rgba(3, 12, 29, 0.28);
border-radius: 6px;
opacity: 0.99;
background: #FFFFFF;
margin-bottom: 32upx;
}
.data-chart {
width: 100%;
margin-bottom: 32upx;
.header-title {
width: 100%;
padding: 24upx 30upx 20upx;
margin: 0;
background-image: linear-gradient(to right, #D7EBFFFF, #F7FBFFFF);
border-radius: 10upx 10upx 0 0;
.icon {
width: 40upx;
}
}
.circle-par {
box-shadow: 0px 4px 11px 0px rgba(3, 12, 29, 0.28);
border-radius: 6px;
opacity: 0.99;
background: #FFFFFF;
.flex-content {
margin: 20upx 0;
}
}
}
.header {
display: flex;
justify-content: center;
align-items: center;
padding: 24upx 0 16upx;
}
.content {
border-radius: 0 0 12upx 12upx;
background-color: #ffffff;
color: #101010;
font-size: 30upx;
border: 1px solid #cecece;
border-top: none;
.part {
display: flex;
.text-title {
display: flex;
justify-content: center;
align-items: center;
height: 56upx;
}
}
.part-1 {
width: 20%;
}
.part-2 {
width: 24%;
}
}
.item {
margin-bottom: 24upx;
.header-box {
width: 100%;
padding: 24upx 20upx 40upx;
margin: 0;
background-image: linear-gradient(to right, #D7EBFFFF, #F7FBFFFF);
border-radius: 20upx 20upx 0 0;
.icon {
display: block;
width: 64upx;
max-height: 100upx;
}
}
.content-box {
position: relative;
margin-top: -20upx;
width: 100%;
background: #FFFFFF;
box-shadow: 0px 4px 11px 0px rgba(3, 12, 29, 0.2);
border-radius: 20upx;
opacity: 0.99;
min-height: 120upx;
.par-item-box {
padding: 0 15upx;
.flex-1 {
min-height: 160upx;
background: #E8EFFB;
border-radius: 2px;
margin: 20upx 15upx;
}
}
}
}
.item:last-child {
margin-bottom: 120upx;
}
}
.u-page__item__slot-icon {
width: 24px;
height: 24px;
}
.icon {
width: 36upx;
max-height: 50upx;
margin-right: 6upx;
}
.flex-center {
display: flex;
align-items: center;
}
.flex-row-center {
display: flex;
flex-direction: row;
align-items: center;
}
.part-3 {
flex-direction: column;
padding-bottom: 120upx;
.content-item {
display: flex;
flex-direction: column;
width: 90%;
margin: 24upx auto 8upx;
padding-bottom: 24upx;
.header-title {
position: relative;
width: 100%;
margin: 0;
image {
width: 100%;
max-height: 100upx;
}
.flex-between {
position: absolute;
top: 0;
left: 12%;
width: 88%;
height: 70%;
padding: 0;
justify-content: space-between;
background-color: transparent;
}
}
.content-box {
position: relative;
z-index: 2;
box-shadow: 0 0 12upx rgba(0, 0, 0, 0.34);
border-radius: 12upx;
margin-top: -20upx;
background-color: #ffffff;
padding: 24upx;
.part-left {
display: flex;
flex: 1;
.flex-1 {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
}
.line-progress {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
}
}
}
.content-item:last-child {
border-bottom: none;
}
}
.content {
.flex-row:last-child {
.part-left {
border-bottom: none;
}
.part-right {
border-bottom: none;
}
}
.part-left {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
border-right: 1px solid #cecece;
border-bottom: 1px solid #cecece;
padding: 8upx 0;
}
.part-right {
display: flex;
justify-content: center;
align-items: center;
width: 60%;
border-bottom: 1px solid #cecece;
padding: 8upx;
}
}
.line {
width: 4upx;
height: 80upx;
background-image: linear-gradient(to bottom, #ffffff, #C9CDD1, #ffffff);
}
.border-bottom {
border-bottom: 1px solid #E0E2E4;
}
</style>
\ No newline at end of file
pages/rectification/list.vue
......@@ -32,7 +32,7 @@
<view class="header-title" @tap="onNavToOrderInfo(item)">
<image src="../../static/icon5.png" mode="widthFix"></image>
<view class="flex-between">
<text class="text-black text-bold">{{item.projName}}</text>
<text class="text-black text-bold ellipsis">{{item.projName}}</text>
<view class="margin-right text-blue">
<text class="">详情</text>
<text class="cuIcon-right"></text>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment