Skip to content

X
xtj-yaui
Commit 87cb6955 by T
Options

现场最新版

parent df42ba3b
正在显示 包含 174 行增加 和 108 行删除
.eslintrc.js
...@@ -5,7 +5,7 @@ module.exports = { ...@@ -5,7 +5,7 @@ module.exports = {
}, },
'extends': [ 'extends': [
'plugin:vue/essential', 'plugin:vue/essential',
'@vue/standard' // '@vue/standard'
], ],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
......
src/components/datav/digitalFlop.vue
...@@ -136,27 +136,26 @@ export default { ...@@ -136,27 +136,26 @@ export default {
this.h_pjEq = b[1].EqCount this.h_pjEq = b[1].EqCount
this.h_sjEq = b[0].EqCount this.h_sjEq = b[0].EqCount
this.digitalFlopData2 =[ this.digitalFlopData2 =[
{ {
title: '水上装备', title: '排爆装备',
number: { number: {
number: [this.h_ssEq], number: [this.h_pbEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#40faee', fill: '#9fe6b8',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '突击装备', title: '水上装备',
number: { number: {
number: [this.h_tjEq], number: [this.h_ssEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#f46827', fill: '#40faee',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
...@@ -174,61 +173,61 @@ export default { ...@@ -174,61 +173,61 @@ export default {
} }
}, },
{ {
title: '狙击装备', title: '保障装备',
number: { number: {
number: [this.h_zjEq], number: [this.h_bzEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#fb7293', fill: '#e690d1',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '保障装备', title: '索降装备',
number: { number: {
number: [this.h_bzEq], number: [this.h_sjEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#e690d1', fill: '#79bbff',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '侦查装备', title: '狙击装备',
number: { number: {
number: [this.h_zcEq], number: [this.h_zjEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#32c5e9', fill: '#fb7293',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '空中勤务', title: '突击装备',
number: { number: {
number: [this.h_kzqwEq], number: [this.h_tjEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#96bfff', fill: '#f46827',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '排爆装备', title: '装备配件',
number: { number: {
number: [this.h_pbEq], number: [this.h_pjEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#9fe6b8', fill: '#ff9f7f',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
...@@ -246,25 +245,25 @@ export default { ...@@ -246,25 +245,25 @@ export default {
} }
}, },
{ {
title: '装备配件', title: '侦查装备',
number: { number: {
number: [this.h_pjEq], number: [this.h_zcEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#ff9f7f', fill: '#32c5e9',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
}, },
{ {
title: '索降装备', title: '空中勤务',
number: { number: {
number: [this.h_sjEq], number: [this.h_kzqwEq],
content: '{nt}', content: '{nt}',
textAlign: 'center', textAlign: 'center',
style: { style: {
fill: '#79bbff', fill: '#96bfff',
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
......
src/components/datav/index.vue
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<div class="main-content"> <div class="main-content">
<digital-flop /> <digital-flop />
<div class="block-left-right-content"> <div class="block-left-right-content">
<div class="block-top-bottom-content"> <div class="block-top-bottom-content">
<div class="block-top-content"> <div class="block-top-content">
......
src/components/datav/moduleChart.vue
<template> <template>
<div id="module-chart"> <div id="module-chart">
<div class="module-chart-title">装备近期使用频率(近一周)</div> <div class="module-chart-title">装备近期使用频率(近一周)</div>
<div id="chart" style="width:100%;height:250px; margin-top: -50px;"></div> <div id="chart" style="width: 100%; height: 250px; margin-top: -50px"></div>
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from "echarts";
import { getRateLine } from '@/api/manage' import { getRateLine } from "@/api/manage";
export default { export default {
name: 'ModuleChart', name: "ModuleChart",
data() { data() {
return { return {
chart: null, chart: null,
borrowList: [], borrowList: [],
rtnList: [], rtnList: [],
chartData: [], chartData: [],
url: '/api/ChartStatistics/GetRateLine' url: "/api/ChartStatistics/GetRateLine",
} };
}, },
mounted() { mounted() {
this.renderChart() this.renderChart();
}, },
methods: { methods: {
renderChart() { renderChart() {
getRateLine(this.url, {}).then(res => { getRateLine(this.url, {}).then((res) => {
this.borrowList = res.BorrowList.map(item => ({ this.borrowList = res.BorrowList.map((item) => ({
date: item.date, date: item.date,
borCount: item.borCount borCount: item.borCount,
})) }));
this.rtnList = res.RtnList.map(item => ({ this.rtnList = res.RtnList.map((item) => ({
date: item.date, date: item.date,
rtnCount: item.rtnCount rtnCount: item.rtnCount,
})) }));
const chart = echarts.init(document.getElementById('chart')) const chart = echarts.init(document.getElementById("chart"));
const option = { const option = {
// title: { // title: {
// // text: '双曲线', // // text: '双曲线',
...@@ -42,122 +42,123 @@ import { getRateLine } from '@/api/manage' ...@@ -42,122 +42,123 @@ import { getRateLine } from '@/api/manage'
// } // }
// }, // },
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: this.borrowList.map(item => item.date), data: this.borrowList.map((item) => item.date),
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: 'rgba(255,255,255,.1)', color: "rgba(6,18,55,1)",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 15, rotate: 15,
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: '12' fontSize: "12",
} },
} },
}, },
yAxis: { yAxis: {
type: 'value', minInterval: 1, //y轴数字设置最小间隔为1
type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color:'#66b1ff', color: "#a1a6b952",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: '12' fontSize: "12",
} },
} },
}, },
series: [ series: [
{ {
name: '出库数', name: "出库数",
type: 'line', type: "line",
color:'#f1c54b', color: "#409eff",
data: this.borrowList.map(item => item.borCount), data: this.borrowList.map((item) => item.borCount),
smooth: true, smooth: true,
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
color: '#f1c54b' color: "#409eff",
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: '#f1c54b' color: "rgba(25, 129, 246, 0.5)",
} },
} },
}, },
{ {
name: '入库数', name: "入库数",
type: 'line', type: "line",
color:'#88cd90', color: "rgb(88, 191, 92)",
data: this.rtnList.map(item => item.rtnCount), data: this.rtnList.map((item) => item.rtnCount),
smooth: true, smooth: true,
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
color: '#88cd90' color: "rgb(88, 191, 92)",
} },
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: '#88cd90' color: "rgba(88, 191, 92, 0.5)",
} },
} },
} },
] ],
}; };
chart.setOption(option); chart.setOption(option);
// 使页面自动轮播显示每一个坐标点 // 使页面自动轮播显示每一个坐标点
let currentIndex = -1; let currentIndex = -1;
setInterval(() => { setInterval(() => {
const dataLen = option.xAxis.data.length; const dataLen = option.xAxis.data.length;
// 取消之前高亮的图形 // 取消之前高亮的图形
chart.dispatchAction({ chart.dispatchAction({
type: 'downplay', type: "downplay",
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex dataIndex: currentIndex,
}); });
currentIndex = (currentIndex + 1) % dataLen; currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形 // 高亮当前图形
chart.dispatchAction({ chart.dispatchAction({
type: 'highlight', type: "highlight",
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex dataIndex: currentIndex,
}); });
// 显示 tooltip // 显示 tooltip
chart.dispatchAction({ chart.dispatchAction({
type: 'showTip', type: "showTip",
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex dataIndex: currentIndex,
}); });
}, 1000); }, 1000);
this.chart = chart; this.chart = chart;
}) });
} },
}, },
beforeDestroy() { beforeDestroy() {
const chart = echarts.getInstanceByDom(document.getElementById('chart')) const chart = echarts.getInstanceByDom(document.getElementById("chart"));
chart.dispose() chart.dispose();
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
#module-chart { #module-chart {
...@@ -165,9 +166,9 @@ import { getRateLine } from '@/api/manage' ...@@ -165,9 +166,9 @@ import { getRateLine } from '@/api/manage'
height: 100%; height: 100%;
margin-right: 20px; margin-right: 20px;
background-color: rgba(6, 30, 93, 0.5); background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5); border-top: 2px solid rgba(1, 153, 209, 0.5);
box-sizing: border-box; box-sizing: border-box;
.module-chart-title { .module-chart-title {
height: 50px; height: 50px;
font-weight: bold; font-weight: bold;
text-indent: 20px; text-indent: 20px;
...@@ -176,11 +177,11 @@ import { getRateLine } from '@/api/manage' ...@@ -176,11 +177,11 @@ import { getRateLine } from '@/api/manage'
align-items: center; align-items: center;
margin-left: 30%; margin-left: 30%;
} }
.dv-charts-container { .dv-charts-container {
height: calc(~"100% - 50px"); height: calc(~"100% - 50px");
} }
#module { #module {
height: calc(~"100% - 50px"); height: calc(~"100% - 50px");
} }
} }
</style> </style>
\ No newline at end of file
src/components/datav/topHeader.vue
...@@ -2,6 +2,14 @@ ...@@ -2,6 +2,14 @@
<div id="top-header"> <div id="top-header">
<dv-decoration-8 class="header-left-decoration" /> <dv-decoration-8 class="header-left-decoration" />
<dv-decoration-5 class="header-center-decoration" /> <dv-decoration-5 class="header-center-decoration" />
<div class="showTime">
<!-- <span class="time" style="cursor:pointer;z-index: 999" @click="changeLevel" v-if="findCode.length > 4">{{ level }}</span> -->
<span class="time">{{ nowTime }}</span>
<span class="date">
<span>{{ week }}</span>
<span>{{ date }}</span>
</span>
</div>
<dv-decoration-8 class="header-right-decoration" :reverse="true" /> <dv-decoration-8 class="header-right-decoration" :reverse="true" />
<div class="center-title">宁波巡特警装备管控系统</div> <div class="center-title">宁波巡特警装备管控系统</div>
</div> </div>
...@@ -9,7 +17,43 @@ ...@@ -9,7 +17,43 @@
<script> <script>
export default { export default {
name: 'TopHeader' name: 'TopHeader',
data(){
return{
nowTime: '',
week:'',
date:'',
}
},
mounted(){
this.nowTimes();
},
methods:{
timeFormate(timeStamp) { //显示当前时间
let newDate = new Date(timeStamp);
let year = newDate.getFullYear();
let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
let week = newDate.getDay();
let weeks = ['日', '一', '二', '三', '四', '五', '六'];
let getWeek = '星期' + weeks[week];
this.week = getWeek;
this.date = year + '.' + month + '.' + date;
this.nowTime = hh + ':' + mm + ':' + ss;
},
nowTimes() {
this.timeFormate(new Date());
setInterval(this.nowTimes, 1000);
this.clear();
},
clear() {
clearInterval(this.nowTimes)
this.nowTimes = null;
},
}
} }
</script> </script>
...@@ -41,5 +85,29 @@ export default { ...@@ -41,5 +85,29 @@ export default {
top: 15px; top: 15px;
transform: translateX(-50%); transform: translateX(-50%);
} }
.showTime {
position: absolute;
right: 15rem;
top: 2.3rem;
color: rgba(126, 240, 255, .7);
display: flex;
.time {
font-size: 1.5rem;
margin-right: 0.8rem;
}
.date {
span {
display: block;
&:nth-child(1) {
font-size: 1.0rem;
text-align: right;
}
&:nth-child(2) {
font-size: 1.0rem;
}
}
}
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论