Skip to content

卡
卡车调度系统
Commit ebacc494 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent c35ccdb9
Hide whitespace changes
Inline Side-by-side
Showing with 8 additions and 1013 deletions
src/views/MLargeScreen/index.vue
View file @ ebacc494
<template>
<div class="da-ping">
<div class="dp-title">
</div>
<div class="dp-title"></div>
<div class="body">
<div class="left">
<div class="in-space">
<div class="panle_div">
<div class="panel-liner">
<div class="panel-title">设备状况</div>
<div class="panel-content panel-a">
<div class="pa-l">
<div id="chart1" class="charts-box"></div>
</div>
<div class="pa-r">
<div id="chart2" class="charts-box"></div>
</div>
</div>
</div>
</div>
<div class="panle_div">
<div class="panel-liner">
<div class="panel-title">项目列表</div>
<div class="panel-content panel-b">
<div class="scrolling">
<dl>
<dd v-for="(item, index) in projectList"
:class="itemActive === index && 'active'"
@click ="setListActive(index)"
:key="index"
>
<div>{{item.name}}</div>
<div>{{item.createTime}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="panle_div">
<div class="panel-liner">
<div class="panel-title">设备信息</div>
<div class="panel-content panel-c column-4">
<div class="scrolling">
<dl>
<dt>
<div>设备ID</div>
<div>名称</div>
<div>状态</div>
<div>备注</div>
</dt>
<dd v-for="(item,index) in deviceInfo" :key="index">
<div>{{item.id}}</div>
<div>{{item.name}}</div>
<div>{{item.status == 1 ? '在线' : '离线'}}</div>
<div>{{item.premark}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-layout">
<div class="right-ltop">
<div class="center">
<div class="panle_div">
<div class="panel-liner">
<div class="panel-title">地图定位</div>
<div class="panel-content">
<div class="in-space">
<div id="mapCtn" class="amap-ctn"></div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="in-space">
<!-- <div class="panle_div">
<div class="panel-liner">
<div class="panel-title">报警信息</div>
<div class="panel-content">
<div id="chart3" class="charts-box"></div>
</div>
</div>
</div> -->
<div class="panle_div">
<div class="panel-liner">
<div class="panel-title">报警列表</div>
<div class="panel-content co-table">
<div class="scrolling">
<div class="table-box">
<dl>
<dt>
<div>项目ID</div>
<div>设备ID</div>
<div>报警状态</div>
<div>报警时间</div>
</dt>
<dd v-for="(item,index) in warningList" :key="index">
<div>{{item.projectId}}</div>
<div>{{item.equipmentId}}</div>
<div>{{item.status === 1 ? '已处理' : '未处理'}}</div>
<div>{{item.createTime}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-lbottom">
<div class="panle_div_2 panle_div">
<div class="panel-liner">
<div class="panel-title">实时数据</div>
<div class="panel-content co-table">
<div class="scrolling">
<div class="table-box">
<dl>
<dt>
<div>所属用户ID</div>
<div>所属用户名称</div>
<div>风速</div>
<div>温度</div>
<div>湿度</div>
<div>二氧化碳</div>
<div>光照</div>
<div>酸碱度</div>
<div>水温</div>
<div>电导率</div>
<div>液位</div>
<div>上传时间</div>
</dt>
<dd v-for="(item,index) in realDataList" :key="index">
<div>{{item.userId}}</div>
<div>{{item.userName}}</div>
<div>{{item.windspeed}}</div>
<div>{{item.temperature}}</div>
<div>{{item.humidity}}</div>
<div>{{item.co2}}</div>
<div>{{item.mlux}}</div>
<div>{{item.ph}}</div>
<div>{{item.waterTemperature}}</div>
<div>{{item.electricalConductance}}</div>
<div>{{item.waterDepth}}</div>
<div>{{item.createTime}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -172,867 +15,19 @@ export default {
components: { },
data() {
return {
swiperOptions: {
slidesPerView: 3,
spaceBetween: 0,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
},
projectList:[],
projectItem:{},
realDataList:[],
itemActive:null,
deviceInfo:[],
warningList:[],
}
},
mounted() {
this.initMap();
var chart1 = document.getElementById("chart1");
this.myEchart1 = this.createPanelEchartA(chart1);
var chart2 = document.getElementById("chart2");
this.myEchart2 = this.createPanelEchartA(chart2);
// var chart3 = document.getElementById("chart3");
// this.myEchart3 = this.createPanelEcharts(chart3);
window.onresize = () => {
this.myEchart1 && this.myEchart1.myChart.resize();
this.myEchart2 && this.myEchart2.myChart.resize();
//this.myEchart3 && this.myEchart3.myChart.resize();
};
// 列表焦点播放
setTimeout(() => {
// 实时数据
var rolling = document.getElementById("rolling");
var that = this, playTimer;
(that.itemPlay = function() {
clearInterval(playTimer);
playTimer = setTimeout(function(){
that.itemActive ++;
that.itemActive = that.itemActive % (that.projectList.length);
that.setListActive(that.itemActive);
}, 9000);
})();
/* rolling.onmousedown = function(){
cancelAnimationFrame(animId);
};
rolling.onmouseup = function(e){
if(e.target.id === 'rolling'){
scrollTop = e.target.scrollTop;
};
animloop()
}; */
}, 1000);
this.$nextTick(() => {
this.markers = {};
// 获取项目
this.reqProjectInfo();
// 请求报警图表信息
// this.reqAlarms();
// 获取设备总数
this.reqDeviceCount();
// 设备在线离线状态刷新
/* setInterval(() => {
this.reqDeviceCount();
}, 6000) */
});
},
methods: {
setListActive(index){
this.itemActive = index;
// reset Timer
this.itemPlay();
// 查询设备信息
this.reqGetDeviceInfo(index);
// setTimeout(() => {
// // 获取设备总数
// this.reqDeviceCount()
// }, 3000);
},
reqGetDeviceInfo(index){
// 清除上一个 marker 颜色
var id = this.projectItem.id;
var marker = this.markers[id];
marker && marker.setIcon();
this.projectItem = this.projectList[index];
id = this.projectItem.id;
marker = this.markers[id];
marker && marker.setIcon(this.cAMap.marker.red1);
// 动态设置中心点
//this.cAMap.setCenter([this.projectItem.lng, this.projectItem.lat]);
// 请求设备信息
this.reqDevicesById(this.projectItem);
},
// 请求项目
reqProjectInfo(){
var param = {sort:'createTime,desc'};
HttpReq.project.getProject(param).then((res) => {
//console.log(res);
// 请求设备信息(全部)
this.reqDevicesById({});
if(res.code == 200){
var body = res.data || {};
this.projectList = body.content || [];
// 添加地图标记点
for(var item of body.content){
this.markers[item.id] = this.cAMap.addMarkers([{lng:parseFloat(item.lng).toFixed(6), lat:parseFloat(item.lat).toFixed(6)}])[0];
};
};
})
},
// 请求设备
reqDevicesById(item){
var that = this;
var sort = 'addTime,desc';
var param = {};
param.sort = sort;
param.projectId = item.id;
HttpReq.plantFactory.getDeviceManageList(param).then((res) => {
//console.log(res);
this.deviceInfo = res.content;
// 请求实时数据
this.reqRealtimeByCodes(item.id);
// 请求报警数据
this.reqAlarmByCodes(item.id);
})
},
// 设备状况(在线离线)
reqDeviceCount(){
let onlineNum = 0;
let offlineNum = 0;
let allNum = 0;
HttpReq.plantFactory.getEquipmentOnlineTotal().then((res)=>{
if(!res[0].id){
onlineNum = 0;
}else{
onlineNum = res[0].id;
}
HttpReq.plantFactory.getEquipmentOfflineTotal().then((res) => {
if(!res[0].id){
offlineNum = 0;
}else{
offlineNum = res[0].id;
}
allNum = onlineNum + offlineNum;
// 在线图表
var percentage1 = ~~(onlineNum/allNum * 100);
this.myEchart1.setData({
title:[{text:'在线' + onlineNum,}, {text:percentage1+'%',}],
series:[{
data:[percentage1],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#b8f708'
}, {
offset: 1,
color: '#29fac3'
}]),
}
}
}]
});
// 离线图表
var percentage2 = ~~(offlineNum/allNum * 100);
this.myEchart2.setData({
title:[{text:'离线' + offlineNum,}, {text:percentage2+'%',}],
series:[{
data:[percentage2],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#b8f708'
}, {
offset: 1,
color: '#29fac3'
}]),
}
}
}]
})
})
})
},
// 实时数据
reqRealtimeByCodes(projectId){
var param = {};
param.sort = 'createTime,desc';
param.projectId = projectId;
HttpReq.plantFactory.getLargeScreenNowDataList(param).then((res) => {
//console.log(res);
this.realDataList = res.content;
})
},
// 报警列表
reqAlarmByCodes(projectId){
var param = {};
param.sort = 'createTime,desc';
param.projectId = projectId;
HttpReq.plantFactory.getLargeScreenAlarmList(param).then((res) => {
//console.log(res);
this.warningList = res.data.content;
})
},
// 报警图表数据
reqAlarms(){
HttpReq.alarm.getItemOnMonthStatistics().then((res) => {
if(res.head.code === '0000'){
var body = res.body || {};
var list = body.list || [];
var dict = {};
// 加工1
for(var item of list){
dict[~~item.month] = item;
};
var aelementalarm = [];
var atemperaturealarm = [];
var ahumidityalarm = [];
var alenghtalarm = [];
for(var i=1; i<13; i++){
var item = dict[i];
if(item){
aelementalarm.push(item.elementalarm);
atemperaturealarm.push(item.temperaturealarm);
ahumidityalarm.push(item.humidityalarm);
alenghtalarm.push(item.lenghtcount);
}else{
aelementalarm.push(0);
atemperaturealarm.push(0);
ahumidityalarm.push(0);
alenghtalarm.push(0);
};
};
this.myEchart3.setData({
series: [
{
name: '电压报警',
type: 'bar',
data: aelementalarm,
},
{
name: '温度报警',
type: 'bar',
data: atemperaturealarm,
},
{
name: '裂缝报警',
type: 'bar',
data: alenghtalarm,
//itemStyle: {normal: {areaStyle: {type:'default', color:'red'}, color:'#1849fe'}, color:'red'},
}
]
});
};
})
},
initMap(){
var cAMap = this.cAMap = new CAMap({container:'mapCtn'});
var map = cAMap.map;
/* var maskerIn = new AMap.Marker({
position: [122.065951,37.487842],
map: map
})
var maskerOut = new AMap.Marker({//区域外的不会显示
position: [122.065951,37.487842],
map: map
}) */
return ;
var opts = {
subdistrict: 0,
extensions: 'all',
level: "district", // street:街道, district:区县, city:市, province(省), country(国)
};
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
district.search('威海市', function (status, result) {
var bounds = result.districtList[0].boundaries;
var mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]])
};
//添加高度面
//var object3Dlayer = new AMap.Object3DLayer({zIndex: 1});
//map.add(object3Dlayer)
var height = -7000;
var color = '#00000cc';//rgba
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color
});
wall.transparent = true
//object3Dlayer.add(wall)
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
var polygon = new AMap.Polygon({
map: map,
bubble: true,
strokeWeight: 5,
strokeDasharray: [10, 20],
strokeColor: 'rgba(7, 247, 247, 1)',
fillColor: 'rgba(7, 247, 247, 1)',
fillOpacity: 0.2,
path: bounds[i],
})
}
});
},
createPanelEcharts(el){
var myChart = echarts.init(el),
lineColor = 'green';
var option = {
title: {
text: '',
subtext: '报警数(个)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['电压报警', '温度报警', '裂缝报警'],
textStyle: {
color: "#fff"
},
},
textStyle: {
color: "#fff"
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
}
],
yAxis: [
{
type: 'value',
}
],
grid:{
top:40,
right:5,
bottom:20,
left:35,
},
series: [
{
name: '电压报警',
type: 'bar',
//data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
itemStyle: {normal: {areaStyle: {type: 'default', color:'#00e5ff'}, color:'#00e5ff'}, color:'green'},
},
{
name: '温度报警',
type: 'bar',
//data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//itemStyle: {normal: {areaStyle: {type: 'default', color:'#00e5ff'}, color:'#00e5ff'}, color:'green'},
},
{
name: '裂缝报警',
type: 'bar',
///data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
itemStyle: {normal: {areaStyle: {type:'default', color:'red'}, color:'#1849fe'}, color:'red'},
}
]
};
myChart.setOption(option);
var setData = function(option){
myChart.hideLoading();
myChart.setOption(option)
};
return {setData:setData, myChart:myChart}
},
createPanelEchartA(el){
var myChart = echarts.init(el), num = 0;
var option = {
backgroundColor: 'transparent',
title: [
{
text: '在线7',
x: 'center',
top: '55%',
textStyle: {
color: '#02cffa',
fontSize: 18,
fontWeight: '100',
}
}, {
text: '70%',
x: 'center',
top: '32%',
textStyle: {
fontSize: '40',
color: '#fdf914',
fontFamily: 'Lato',
foontWeight: '600',
},
}
],
polar: {
radius: ['65%', '76%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .3)',
},
data: [70],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#fdf914'
}, {
offset: 1,
color: '#38a700'
}]),
}
}
},
{
type: 'gauge',
name: '',
radius: '87%',
startAngle: '0',
endAngle: '-359.99',
splitNumber: '200',
center: ['50%', '50%'],
pointer: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 95,
name: ''
}],
axisLine: {
lineStyle: {
width: 20,
opacity: 0
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 8,
lineStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#111'
}, {
offset: 0.5,
color: 'rgba(66, 66, 66, 1)',
}, {
offset: 1,
color: '#111'
}],
globalCoord: false
},
width: 1,
type: 'solid',
},
},
axisLabel: {
show: false
}
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['90%', '92%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(66, 66, 66, .4)',
shadowBlur: 10,
shadowColor: 'rgba(253, 249, 20, .3)',
}
},
data: [{
value: 100,
}]
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['93.5%', '95%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(66, 66, 66, .3)',
shadowBlur: 10,
shadowColor: 'rgba(253, 249, 20, .3)',
}
},
data: [{
value: 100,
}]
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['95.5%', '96.8%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(66, 66, 66, .2)',
shadowBlur: 10,
shadowColor: 'rgba(253, 249, 20, .3)',
}
},
data: [{
value: 100,
}]
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['97.5%', '98.5%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(66, 66, 66, .1)',
shadowBlur: 10,
shadowColor: 'rgba(253, 249, 20, .3)',
}
},
data: [{
value: 100,
}]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.82,
startAngle: (0+num) * Math.PI / 180,
endAngle: (1+num) * Math.PI / 180
},
style: {
stroke: "#fdf914",
fill: "transparent",
lineWidth: 7
},
silent: true
};
},
data: [0]
},
]
};
function numb(){
num = num+5
myChart.setOption(option, true)
}
/* setInterval(function() {
numb()
}, 100); */
numb()
var setData = function(data, grid){
myChart.hideLoading();
if(data){
myChart.setOption(data)
}else{
myChart.setOption({
title: {
show: true,
extStyle: {
color: "grey",
fontSize: 20
},
text: "暂无数据",
left: "center",
top: "center"
}
})
}
};
return {setData:setData, myChart:myChart}
},
echartTooltipFormat(params, a, b){
var param = params[0];
}
},
}
</script>
<style lang="scss" scope>
.da-ping {
color: #00d8fd;
min-width:1024px;
position:relative;
height: 100vh;
flex-direction: column;
background-image: url('~@/assets/images/layout/backgound_a.png');
user-select:none;
ul, dl, dd{margin:0;padding:0;}
.dp-title{
position:relative;
margin:0 1.041vw;
height: 7.314vh;
background:no-repeat top center url('~@/assets/images/layout/top_daping.png');
background-size:100% 100%;
}
.body{
height:89.907vh;
display:flex;
margin:1.574vh 1.041vw 1.203vh;
>div{}
}
.left,
.right {
width: 28.958vw;
flex-direction: column;
justify-content: space-between;
display:flex;
.in-space{
height:100%;flex:1;margin-top:-2.685vh;display:flex;flex-direction:column;
}
.panle_div:last-child{margin-bottom:0;}
}
.right{
.charts-box{}
}
.right-layout{
flex:1;display:flex;flex-direction:column;margin-left:.520vw;
.right-ltop{
flex:1;display:flex;
}
.right-lbottom{margin-top:1.388vh;}
.panle_div_2 {
display:flex;flex:none;margin-bottom:0;
height:29.752vh;
background:no-repeat center center url('~@/assets/images/layout/area_2.png');
background-size:100% 100%;
}
}
.center {
display:flex;
flex-direction:column;
justify-content:space-between;
flex:1;
margin-right:.520vw;
.panle_div {
background-image:url('~@/assets/images/layout/area_1.png');
margin-bottom:0;
}
.amap-ctn{width:100%;height:100%;}
.panel-content{
margin-left:5px;margin-right:5px;
.in-space{position:absolute;top:0;left:0;height:100%;width:100%;}
}
}
.panle_div{
flex:1;margin-bottom:1.388vh;
background:no-repeat center center url('~@/assets/images/layout/area_0.png');
background-size:100% 100%;
.panel-liner{
height:100%;width:100%;display:flex;flex-direction:column;
}
.panel-title {
position: relative;
padding:1.1vh 0 0 1.14vw;
height:4.155vh;
font-size:16px;
&::before {content:'';display:inline-block;width:1.71vw;height:1.29vh;margin-right:0.91vw;
background:no-repeat center center url('~@/assets/images/layout/title_sign.png');
background-size:100% 100%;
}
}
.panel-content{
position:relative;flex:1;margin-bottom:1.5vh;
font-size:13px;
.scrolling{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;color:#c4d8fb;}
}
.charts-box{position:absolute;top:0;left:0;height:100%;width:100%;}
.panel-a{
display:flex;padding:0 10px;
>div{flex:1;position:relative;}
}
.panel-b{
dl{margin:0 10px;}
dd{
padding:8px 10px;display:grid;grid-template-columns:65% 35%;
>div{margin-right:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
div:last-child{margin-right:0;}
}
.active{border:1px solid #05eae3;border-radius:5px;background-color:rgba(15, 86, 136, .3);}
}
.panel-c{
dl{margin:0 20px;}
dt, dd{
>div{margin-right:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
div:last-child{margin-right:0;}
}
dt{padding:10px 0;font-size:14px;color:#01bafb;font-weight:bold;}
dd{padding:5px 0;}
}
.co-table{
.table-box{margin:0 10px;}
dl{display:table;width:100%;}
dt, dd{display:table-row;
>div{display:table-cell;padding:7px 3px;}
}
dt{padding:10px 0;font-size:14px;color:#01bafb;font-weight:bold;}
dd{padding:5px 0;color:#d5ceff;background-color:#091a38}
dd:nth-child(odd){background-color:#0d1b48}
}
.column-4{
dt, dd{display:grid;grid-template-columns:25% 25% 25% 25%;}
}
}
}
<style scope>
</style>
\ No newline at end of file
src/views/system/user/register.vue
View file @ ebacc494
......@@ -2,7 +2,7 @@
<div class="register cm-layout" :style="'background-image:url('+ Background +');'">
<div class="logo-place">
<div class="logo-title">华菱植物工厂系统</div>
<div class="logo-title">卡车调度系统</div>
<div class="reg-place">
<div class="inbox-range">
<div class="ctn-fix">
......
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