feat:新疆天山钢铁新能源装载机监控项目 登陆
This commit is contained in:
parent
8f8df39b2d
commit
91c06c8201
@ -103,11 +103,11 @@ export default {
|
||||
this.title = '新疆天山钢铁新能源监控'
|
||||
document.title = '新疆天山钢铁新能源监控'
|
||||
break;
|
||||
// case '9320':
|
||||
// // 工程车作业及人员行为AI系统
|
||||
// this.title = '工程车作业及人员行为AI系统'
|
||||
// document.title = '工程车作业及人员行为AI系统'
|
||||
// break;
|
||||
case '9360':
|
||||
// 工程车作业及人员行为AI系统
|
||||
this.title = '工程车作业及人员行为AI系统'
|
||||
document.title = '工程车作业及人员行为AI系统'
|
||||
break;
|
||||
default:
|
||||
|
||||
this.title = ' '
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
<construction-home v-else-if="port === '9290'" />
|
||||
<battery v-else-if="port === '9320'" />
|
||||
<hlsnHome v-else-if="port === '9310'" />
|
||||
<energy v-else-if="port === '9340'" />
|
||||
<engineer v-else-if="port === '9360'" />
|
||||
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
||||
<home-page v-else></home-page>
|
||||
</div>
|
||||
@ -31,6 +33,7 @@ import waterHome from './waterHome/index.vue'
|
||||
import battery from './battery/index.vue'
|
||||
import hlsnHome from './hlsnManage/home/index.vue'
|
||||
import engineer from './engineeringVehicle/home/index.vue'
|
||||
import energy from './newEnergy/home/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
HomePage,
|
||||
@ -46,7 +49,8 @@ export default {
|
||||
waterHome,
|
||||
battery,
|
||||
hlsnHome,
|
||||
engineer
|
||||
engineer,
|
||||
energy
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -216,14 +216,14 @@ export default {
|
||||
break;
|
||||
case '9340':
|
||||
document.title = '新疆天山钢铁新能源监控'
|
||||
loginDom.style.backgroundImage = 'url(/images/xinjiang-bg.png)'
|
||||
loginDom.style.backgroundImage = 'url(/images/xinjiang.png)'
|
||||
this.redirect = '/index'
|
||||
break;
|
||||
case '9360':
|
||||
document.title = '工程车作业管控及人员行为AI智能识别系统'
|
||||
loginDom.style.backgroundImage = 'url(/images/zuoye.png)'
|
||||
this.redirect = '/index'
|
||||
break;
|
||||
// case '9350':
|
||||
// document.title = '工程车作业管控及人员行为AI智能识别系统'
|
||||
// loginDom.style.backgroundImage = 'url(/images/zuoye.png)'
|
||||
// this.redirect = '/index'
|
||||
// break;
|
||||
default:
|
||||
document.title = ''
|
||||
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
}"
|
||||
v-for="(item, index) in topList"
|
||||
:key="index"
|
||||
@click="goPage(item.path)"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
@ -56,7 +57,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备报警 -->
|
||||
<div class="footer"></div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="box-title">设备报警类型统计</div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="box-title">设备运行数据</div>
|
||||
<div class="right-item">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="number" label="设备编号" align='center'/>
|
||||
<el-table-column prop="name" label="设备名称" align='center'/>
|
||||
<el-table-column prop="longitude" label="经度" align='center'/>
|
||||
<el-table-column prop="latitude" label="纬度" align='center'/>
|
||||
<el-table-column prop="time" label="采集时间" align='center'/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -67,17 +85,25 @@ import {
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
export default {
|
||||
data() {
|
||||
const add0 = (val) => {
|
||||
const num = parseInt(val)
|
||||
return num > 9 ? val : ('0' + num)
|
||||
}
|
||||
const formatter = (offset = 0, date = new Date(),) => {
|
||||
const d = new Date(date.getTime() - offset)
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
|
||||
}
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
name: "新能源转载机接口对接",
|
||||
color: "#73bfdd",
|
||||
path: "",
|
||||
path: "energy/loaderEnergy",
|
||||
},
|
||||
{
|
||||
name: "新能源装载机监控",
|
||||
color: "#90cb75",
|
||||
path: "",
|
||||
path: "loaderMonitor/monitorInfo",
|
||||
},
|
||||
{
|
||||
name: "工程设备统一监控",
|
||||
@ -122,11 +148,70 @@ export default {
|
||||
color: "#ffd662",
|
||||
},
|
||||
],
|
||||
tableData:[
|
||||
{
|
||||
number:'CJ973452',
|
||||
name:'装载机-Z1',
|
||||
longitude:'73.40353',
|
||||
latitude:'96.18345',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973453',
|
||||
name:'装载机-Z2',
|
||||
longitude:'73.40234',
|
||||
latitude:'96.18545',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973454',
|
||||
name:'装载机-S1',
|
||||
longitude:'73.40234',
|
||||
latitude:'96.18346',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973455',
|
||||
name:'装载机-S2',
|
||||
longitude:'73.40665',
|
||||
latitude:'96.18238',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973456',
|
||||
name:'装载机-X1',
|
||||
longitude:'73.40856',
|
||||
latitude:'96.18934',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973457',
|
||||
name:'装载机-X2',
|
||||
longitude:'73.40546',
|
||||
latitude:'96.18863',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973458',
|
||||
name:'装载机-Z1',
|
||||
longitude:'73.40765',
|
||||
latitude:'96.18246',
|
||||
time:formatter()
|
||||
},
|
||||
{
|
||||
number:'CJ973459',
|
||||
name:'装载机-Z2',
|
||||
longitude:'73.40846',
|
||||
latitude:'96.18246',
|
||||
time:formatter()
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
|
||||
},
|
||||
methods: {
|
||||
initChart1() {
|
||||
@ -134,7 +219,6 @@ export default {
|
||||
for (let i = 0; i <= 24; i++) {
|
||||
xAxisData.push(i);
|
||||
}
|
||||
console.log(xAxisData, 98);
|
||||
initChartStatic(
|
||||
"chart1",
|
||||
generateBaseOptions({
|
||||
@ -197,15 +281,97 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: "3%",
|
||||
top: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart2() {
|
||||
initChartStatic(
|
||||
"chart2",
|
||||
generatePieOptions({
|
||||
legend: {
|
||||
// 图例配置
|
||||
top: "top",
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
orient: "horizontal",
|
||||
textStyle: {
|
||||
color: "#252525",
|
||||
},
|
||||
},
|
||||
color: [
|
||||
"#5470c5",
|
||||
"#90cb75",
|
||||
"#f9c758",
|
||||
"#ed6666",
|
||||
"#73bfdd",
|
||||
"#3ba172",
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "数据详情",
|
||||
type: "pie",
|
||||
radius: ["36%", "60%"],
|
||||
center: 'center',
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "电量不足",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
name: "发动机高速转动",
|
||||
value: 32,
|
||||
},
|
||||
{
|
||||
name: "割动时偏斜",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
name: "油箱漏油",
|
||||
value: 47,
|
||||
},
|
||||
{
|
||||
name: "抖动",
|
||||
value: 39,
|
||||
},
|
||||
{
|
||||
name: "驱动有异常",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{b|{b}},{ped|{d}%} ",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid:{
|
||||
left:'3%',
|
||||
top:'5%',
|
||||
bottom:'10%'
|
||||
top:"20%",
|
||||
bottom:"20%",
|
||||
left:"10%",
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart2() {},
|
||||
goPage(val){
|
||||
console.log(val,98);
|
||||
this.$router.push(val)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -216,7 +382,6 @@ export default {
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #f1f1f1;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
@ -271,6 +436,28 @@ export default {
|
||||
height: calc(300px - 2rem);
|
||||
}
|
||||
}
|
||||
//设备报警类型
|
||||
.footer {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left,
|
||||
.right {
|
||||
width: 48%;
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
#chart2 {
|
||||
width: 100%;
|
||||
height: calc(350px - 2rem);
|
||||
}
|
||||
.right-item{
|
||||
width: 100%;
|
||||
height: calc(350px - 2rem);
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 6 {
|
||||
.top-icon-#{$i} {
|
||||
background-image: url(./assets/top#{$i}.png);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user