Skip to content

X
xtj-yaui
Commit 87cb6955 by T
Options

现场最新版

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