Skip to content

X
xtj-yaui
Commit df42ba3b by T
Options

第一次提交，数据不对调整后的最新版本

parents
正在显示 包含 2320 行增加 和 0 行删除
.browserslistrc 0 → 100644
> 1%
last 2 versions
.editorconfig 0 → 100644
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
.eslintrc.js 0 → 100644
module.exports = {
root: true,
env: {
node: false
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
<h1 align="center">Construction-Data</h1>
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run dev
```
### Compiles and minifies for production
```
yarn run build
```
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/app'
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "adev",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@jiaminghi/data-view": "^2.4.4",
"axios": "^0.20.0",
"echarts": "^4.9.0",
"element-ui": "^2.15.6",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
}
postcss.config.js 0 → 100644
module.exports = {
plugins: {
autoprefixer: {}
}
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>宁波巡特警应急装备库装备智能管控系统</title>
<!-- 全局配置 -->
<script>
window._CONFIG = {};
window._CONFIG['domianURL'] = 'http://192.168.3.188:5007';
window._CONFIG['local'] = 'http://41.204.124.218:8000';
</script>
</head>
<body>
<noscript>
<strong>We're sorry but adev doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app">
<datav />
</div>
</template>
<script>
import datav from './components/datav/index.vue'
export default {
name: 'app',
components: {
datav
},
data () {
return {}
}
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 100%;
height: 100%;
}
</style>
src/api/manage.js 0 → 100644
import Vue from 'vue'
import { axios } from '@/utils/request'
//post
export function postAction(url,parameter) {
return axios({
url: url,
method:'post' ,
data: parameter
})
}
//post method= {post | put}
export function httpAction(url,parameter,method) {
return axios({
url: url,
method:method ,
data: parameter
})
}
//put
export function putAction(url,parameter) {
return axios({
url: url,
method:'put',
data: parameter
})
}
//get
export function getAction(url,parameter) {
return axios({
url: url,
method: 'get',
params: parameter
})
}
//get
export function AllEqCategory(url,parameter) {
return axios({
url: url,
method: 'get',
params: parameter
})
}
//get
export function getRateLine(url,parameter) {
return axios({
url: url,
method: 'get',
params: parameter
})
}
//deleteAction
export function deleteAction(url,parameter) {
return axios({
url: url,
method: 'delete',
params: parameter
})
}
export function getUserList(parameter) {
return axios({
url: api.user,
method: 'get',
params: parameter
})
}
export function getRoleList(parameter) {
return axios({
url: api.role,
method: 'get',
params: parameter
})
}
export function getServiceList(parameter) {
return axios({
url: api.service,
method: 'get',
params: parameter
})
}
export function getPermissions(parameter) {
return axios({
url: api.permissionNoPager,
method: 'get',
params: parameter
})
}
// id == 0 add post
// id != 0 update put
export function saveService(parameter) {
return axios({
url: api.service,
method: parameter.id == 0 ? 'post' : 'put',
data: parameter
})
}
/**
* 下载文件 用于excel导出
* @param url
* @param parameter
* @returns {*}
*/
export function downFile(url,parameter){
return axios({
url: url,
params: parameter,
method:'get' ,
responseType: 'blob'
})
}
/**
* 下载文件
* @param url 文件路径
* @param fileName 文件名
* @param parameter
* @returns {*}
*/
export function downloadFile(url, fileName, parameter) {
return downFile(url, parameter).then((data) => {
if (!data || data.size === 0) {
Vue.prototype['$message'].warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName)
} else {
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象
}
})
}
/**
* 文件上传 用于富文本上传图片
* @param url
* @param parameter
* @returns {*}
*/
export function uploadAction(url,parameter){
return axios({
url: url,
data: parameter,
method:'post' ,
headers: {
'Content-Type': 'multipart/form-data', // 文件上传
},
})
}
/**
* 获取文件服务访问路径
* @param avatar
* @param subStr
* @returns {*}
*/
export function getFileAccessHttpUrl(avatar,subStr) {
if(!subStr) subStr = 'http'
try {
if(avatar && avatar.startsWith(subStr)){
return avatar;
}else{
if(avatar &&　avatar.length>0 && avatar.indexOf('[')==-1){
return window._CONFIG['staticDomainURL'] + "/" + avatar;
}
}
}catch(err){
return;
}
}
src/assets/common.less 0 → 100644
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
\ No newline at end of file
src/components/datav/cards.vue 0 → 100644
<template>
<div id="cards">
<div
class="card-item"
v-for="(card, i) in cards"
:key="card.title"
>
<div class="card-header">
<div class="card-header-left">{{ card.title }}</div>
<div class="card-header-right">{{ '0' + (i + 1) }}</div>
</div>
<dv-charts class="ring-charts" :option="card.ring" />
<!-- <div class="card-footer">
<div class="card-footer-item">
<div class="footer-title">累计金额</div>
<div class="footer-detail">
<dv-digital-flop :config="card.total" style="width:70%;height:35px;" />元
</div>
</div>
<div class="card-footer-item">
<div class="footer-title">巡查病害</div>
<div class="footer-detail">
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />处
</div>
</div>
</div> -->
</div>
</div>
</template>
<script>
export default {
name: 'Cards',
data () {
return {
cards: []
}
},
methods: {
createData () {
const { randomExtend } = this
this.cards = new Array(1).fill(0).map((foo, i) => ({
title: '测试路段' + (i + i),
total: {
number: [randomExtend(9000, 10000)],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
},
num: {
number: [randomExtend(30, 60)],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '资金占比', value: randomExtend(40, 60) }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '资金占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
}
],
color: ['#03d3ec']
}
}))
},
randomExtend (minNum, maxNum) {
if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10)
} else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
}
}
},
mounted () {
const { createData } = this
createData()
//setInterval(this.createData, 30000)
}
}
</script>
<style lang="less">
#cards {
display: flex;
justify-content: space-between;
height: 45%;
.card-item {
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
width: 19%;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
height: 20%;
align-items: center;
justify-content: space-between;
.card-header-left {
font-size: 18px;
font-weight: bold;
padding-left: 20px;
}
.card-header-right {
padding-right: 20px;
font-size: 40px;
color: #03d3ec;
}
}
.ring-charts {
height: 55%;
}
.card-footer {
height: 25%;
display: flex;
align-items: center;
justify-content: space-around;
}
.card-footer-item {
padding: 5px 10px 0px 10px;
box-sizing: border-box;
width: 40%;
background-color: rgba(6, 30, 93, 0.7);
border-radius: 3px;
.footer-title {
font-size: 15px;
margin-bottom: 5px;
}
.footer-detail {
font-size: 20px;
color: #1294fb;
display: flex;
font-size: 18px;
align-items: center;
.dv-digital-flop {
margin-right: 5px;
}
}
}
}
</style>
src/components/datav/digitalFlop copy.vue 0 → 100644
<template>
<div id="digital-flop">
<div
class="digital-flop-item"
v-for="item in digitalFlopData"
:key="item.title"
>
<div class="digital-flop-title">{{ item.title }}</div>
<div class="digital-flop">
<dv-digital-flop
:config="item.number"
style="width:100px;height:50px;"
/>
<div class="unit">{{ item.unit }}</div>
</div>
</div>
<dv-decoration-10 />
</div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
name: 'DigitalFlop',
data () {
return {
digitalFlopData: [],
url: '/api/ChartStatistics',
h_ByBfCount: 0,
h_BorrowCount: 0,
h_EqCount: 0,
h_EqPrivateCount: 0,
h_kucunCount: 0,
h_EqPublicCount: 0,
h_ReturnCount: 0,
h_UserCount: 0,
h_WaitToConfirmed: 0,
h_WaitToExamined: 0
}
},
methods: {
createData () {
getAction(this.url, {}).then(res => {
this.h_ByBfCount = res.h_ByCount + res.h_BfedCount
this.h_BorrowCount = res.h_BorrowCount
this.h_EqCount = res.h_EqCount
this.h_EqPrivateCount = res.h_EqPrivateCount
this.h_EqPublicCount = res.h_EqPublicCount
this.h_kucunCount = res.h_kucunCount
this.h_ReturnCount = res.h_ReturnCount
this.h_UserCount = res.h_UserCount
this.h_WaitToConfirmed = res.h_WaitToConfirmed
this.h_WaitToExamined = res.h_WaitToExamined
this.digitalFlopData = [
{
title: '装备总数',
number: {
number: [this.h_EqCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#4d99fc',
fontWeight: 'bold'
}
}
},
{
title: '在库数量',
number: {
number: [this.h_kucunCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#32c5e9',
fontWeight: 'bold'
}
}
},
{
title: '单警装备',
number: {
number: [this.h_EqPrivateCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#40faee',
fontWeight: 'bold'
}
}
},
{
title: '未归还',
number: {
number: [this.h_ReturnCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#f46827',
fontWeight: 'bold'
}
}
},
{
title: '保养/报废',
number: {
number: [this.h_ByBfCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#e062ae',
fontWeight: 'bold'
}
}
},
{
title: '领用待审批',
number: {
number: [this.h_WaitToConfirmed],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#fb7293',
fontWeight: 'bold'
}
}
},
{
title: '反恐处突',
number: {
number: [220],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#e690d1',
fontWeight: 'bold'
}
}
},
{
title: '应急维稳',
number: {
number: [546],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#32c5e9',
fontWeight: 'bold'
}
}
},
{
title: '武装巡逻',
number: {
number: [25],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#96bfff',
fontWeight: 'bold'
}
}
},
{
title: '设卡盘查',
number: {
number: [65],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#9fe6b8',
fontWeight: 'bold'
}
}
},
{
title: '警卫安保',
number: {
number: [15],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#ffdb5c',
fontWeight: 'bold'
}
}
},
{
title: '抢险救援',
number: {
number: [41],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#ff9f7f',
fontWeight: 'bold'
}
}
}
]
})
},
randomExtend (minNum, maxNum) {
if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10)
} else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
}
}
},
mounted () {
const { createData } = this
createData()
// setInterval(createData, 30000)
}
}
</script>
<style lang="less">
#digital-flop {
position: relative;
height: 15%;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(6, 30, 93, 0.5);
.dv-decoration-10 {
position: absolute;
width: 95%;
left: 2.5%;
height: 5px;
bottom: 0px;
}
.digital-flop-item {
width: 11%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-left: 3px solid rgb(6, 30, 93);
border-right: 3px solid rgb(6, 30, 93);
}
.digital-flop-title {
font-size: 20px;
margin-bottom: 20px;
}
.digital-flop {
display: flex;
}
.unit {
margin-left: 10px;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding-bottom: 13px;
}
}
</style>
src/components/datav/digitalFlop.vue 0 → 100644
<template>
<div id="digital-flop">
<div
class="digital-flop-item"
v-for="item in digitalFlopData"
:key="item.title"
>
<div class="digital-flop-title">{{ item.title }}</div>
<div class="digital-flop">
<dv-digital-flop
:config="item.number"
style="width:100px;height:50px;"
/>
<div class="unit">{{ item.unit }}</div>
</div>
</div>
<div
class="digital-flop-item"
v-for="item in digitalFlopData2"
:key="item.title"
>
<div class="digital-flop-title">{{ item.title }}</div>
<div class="digital-flop">
<dv-digital-flop
:config="item.number"
style="width:100px;height:50px;"
/>
<div class="unit">{{ item.unit }}</div>
</div>
</div>
<dv-decoration-10 />
</div>
</template>
<script>
import { getAction, AllEqCategory} from '@/api/manage'
export default {
name: 'DigitalFlop',
data () {
return {
digitalFlopData: [],
digitalFlopData2 :[],
url: '/api/ChartStatistics',
h_ByBfCount: 0,
h_BorrowCount: 0,
h_EqCount: 0,
h_EqPrivateCount: 0,
h_kucunCount: 0,
h_EqPublicCount: 0,
h_ReturnCount: 0,
h_UserCount: 0,
h_WaitToConfirmed: 0,
h_WaitToExamined: 0,
url2:'/api/ChartStatistics/GetAllEqCategory',
allEqCategory:[],
h_ssEq:0,
h_tjEq:0,
h_ssEq:0,
h_tjEq:0,
h_zxEq:0,
h_zjEq:0,
h_bzEq:0,
h_zcEq:0,
h_kzqwEq:0,
h_pbEq:0,
h_pcEq:0,
h_pjEq:0,
h_sjEq:0,
}
},
methods: {
createData () {
getAction(this.url, {}).then(res => {
this.h_ByBfCount = res.h_ByCount + res.h_BfedCount
this.h_BorrowCount = res.h_BorrowCount
this.h_EqCount = res.h_EqCount
this.h_EqPrivateCount = res.h_EqPrivateCount
this.h_EqPublicCount = res.h_EqPublicCount
this.h_kucunCount = res.h_kucunCount
this.h_ReturnCount = res.h_ReturnCount
this.h_UserCount = res.h_UserCount
this.h_WaitToConfirmed = res.h_WaitToConfirmed
this.h_WaitToExamined = res.h_WaitToExamined
this.digitalFlopData =[ {
title: '装备总数',
number: {
number: [this.h_EqCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#4d99fc',
fontWeight: 'bold'
}
}
},
{
title: '在库数量',
number: {
number: [this.h_kucunCount],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#32c5e9',
fontWeight: 'bold'
}
}
}]
})
AllEqCategory(this.url2,{}).then(res =>{
let a =res
// 使用 Array.filter() 方法筛选出需要的数据
const filteredArray = a.filter(item => [ "水上装备","突击装备","战训装备","狙击装备","保障装备","侦查装备","空中勤务","排爆装备","破拆装备","装备配件","索降装备"
].includes(item.EqCategoryName));
// 使用 Array.map() 方法重新组合成新数组
let b = filteredArray.map(item => {
return {
EqCategoryName: item.EqCategoryName,
EqCount: item.EqCount
};
});
//console.log(b)
this.h_ssEq = b[10].EqCount
this.h_tjEq = b[9].EqCount
this.h_zxEq = b[8].EqCount
this.h_zjEq = b[7].EqCount
this.h_bzEq = b[6].EqCount
this.h_zcEq = b[5].EqCount
this.h_kzqwEq = b[4].EqCount
this.h_pbEq = b[3].EqCount
this.h_pcEq = b[2].EqCount
this.h_pjEq = b[1].EqCount
this.h_sjEq = b[0].EqCount
this.digitalFlopData2 =[
{
title: '水上装备',
number: {
number: [this.h_ssEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#40faee',
fontWeight: 'bold'
}
}
},
{
title: '突击装备',
number: {
number: [this.h_tjEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#f46827',
fontWeight: 'bold'
}
}
},
{
title: '战训装备',
number: {
number: [this.h_zxEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#e062ae',
fontWeight: 'bold'
}
}
},
{
title: '狙击装备',
number: {
number: [this.h_zjEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#fb7293',
fontWeight: 'bold'
}
}
},
{
title: '保障装备',
number: {
number: [this.h_bzEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#e690d1',
fontWeight: 'bold'
}
}
},
{
title: '侦查装备',
number: {
number: [this.h_zcEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#32c5e9',
fontWeight: 'bold'
}
}
},
{
title: '空中勤务',
number: {
number: [this.h_kzqwEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#96bfff',
fontWeight: 'bold'
}
}
},
{
title: '排爆装备',
number: {
number: [this.h_pbEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#9fe6b8',
fontWeight: 'bold'
}
}
},
{
title: '破拆装备',
number: {
number: [this.h_pcEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#ffdb5c',
fontWeight: 'bold'
}
}
},
{
title: '装备配件',
number: {
number: [this.h_pjEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#ff9f7f',
fontWeight: 'bold'
}
}
},
{
title: '索降装备',
number: {
number: [this.h_sjEq],
content: '{nt}',
textAlign: 'center',
style: {
fill: '#79bbff',
fontWeight: 'bold'
}
}
}
]
// console.log(this.h_ssEq)
})
},
randomExtend (minNum, maxNum) {
if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10)
} else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
}
}
},
mounted () {
const { createData } = this
createData()
// setInterval(createData, 30000)
}
}
</script>
<style lang="less">
#digital-flop {
position: relative;
height: 15%;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg, rgba(6, 30, 93, 0.5), rgba(20, 50, 150, 0.5));
.dv-decoration-10 {
position: absolute;
width: 95%;
left: 2.5%;
height: 5px;
bottom: 0px;
//background: linear-gradient(to right, #4d99fc, #79bbff, #4d99fc);
background:rgb(63, 150, 165);
animation: slideAnimation 5s ease-out infinite;
}
@keyframes slideAnimation {
0% {
width: 0%;
left: 50%;
}
100% {
width: 100%;
left: 0%;
}
// 100% {
// width: 0%;
// left: 50%;
// }
}
.digital-flop-item {
width: 11%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-left: 3px solid rgb(6, 30, 93);
border-right: 3px solid rgb(6, 30, 93);
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
&:hover {
transform: scale(1.05);
}
}
.digital-flop-title {
font-size: 20px;
margin-bottom: 20px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.digital-flop {
display: flex;
align-items: center;
}
.unit {
margin-left: 10px;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding-bottom: 13px;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
}
</style>
src/components/datav/index.vue 0 → 100644
<template>
<div id="data-view">
<dv-full-screen-container>
<top-header />
<div class="main-content">
<digital-flop />
<div class="block-left-right-content">
<div class="block-top-bottom-content">
<div class="block-top-content">
<water-level-chart />
<rose-chart />
<module-chart />
</div>
<div class="block-bottom-content">
<scroll-board />
<ranking-board />
</div>
</div>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import moduleChart from './moduleChart'
export default {
name: 'DataView',
components: {
topHeader,
digitalFlop,
rankingBoard,
roseChart,
waterLevelChart,
scrollBoard,
moduleChart
},
data () {
return {}
},
methods: {}
}
</script>
<style lang="less">
#data-view {
width: 100%;
height: 100%;
background-color: #030409;
color: #fff;
#dv-full-screen-container {
background-image: url('./img/bg.png');
background-size: 100% 100%;
box-shadow: 0 0 3px blue;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
.block-left-right-content {
flex: 1;
display: flex;
margin-top: 20px;
}
.block-top-bottom-content {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-left: 20px;
}
.block-top-content {
height: 30%;
display: flex;
flex-grow: 0;
box-sizing: border-box;
padding-bottom: 20px;
}
.block-bottom-content {
height: 65%;
display: flex;
flex-grow: 0;
box-sizing: border-box;
padding-bottom: 20px;
}
}
</style>
src/components/datav/moduleChart copy.vue 0 → 100644
<template>
<div id="module-chart">
<div class="module-chart-title">六大类装备占比</div>
<div id="module"/>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'ModuleChart',
data () {
return {
chart: null,
data: [],
url: '/api/ChartStatistics/GetPie'
}
},
mounted () {
const { createData } = this
createData()
// setInterval(createData, 7000)
},
methods: {
createData () {
this.chart = echarts.init(document.getElementById('module'))
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: '50%',
roseSort: false,
data: [
{ name: '反恐处突', value: 220 },
{ name: '应急维稳', value: 546 },
{ name: '武装巡逻', value: 25 },
{ name: '设卡盘查', value: 65 },
{ name: '警卫安保', value: 15 },
{ name: '抢险救援', value: 41 }
],
insideLabel: {
show: false
},
outsideLabel: {
formatter: '{name} {percent}%',
labelLineEndLength: 20,
style: {
fill: '#fff'
},
labelLineStyle: {
stroke: '#fff'
}
},
roseType: true
}
],
color: ['#e690d1', '#32c5e9', '#96bfff', '#9fe6b8', '#ffdb5c', '#ff9f7f']
}
this.chart.setOption(option)
}
}
}
</script>
<style lang="less">
#module-chart {
width: 50%;
height: 100%;
margin-right: 20px;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box;
.module-chart-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
margin-left: 40%;
}
.dv-charts-container {
height: calc(~"100% - 50px");
}
#module {
height: calc(~"100% - 50px");
}
}
</style>
src/components/datav/moduleChart.vue 0 → 100644
<template>
<div id="module-chart">
<div class="module-chart-title">装备近期使用频率(近一周)</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',
data() {
return {
chart: null,
borrowList: [],
rtnList: [],
chartData: [],
url: '/api/ChartStatistics/GetRateLine'
}
},
mounted() {
this.renderChart()
},
methods: {
renderChart() {
getRateLine(this.url, {}).then(res => {
this.borrowList = res.BorrowList.map(item => ({
date: item.date,
borCount: item.borCount
}))
this.rtnList = res.RtnList.map(item => ({
date: item.date,
rtnCount: item.rtnCount
}))
const chart = echarts.init(document.getElementById('chart'))
const option = {
// title: {
// // text: '双曲线',
// // left: 'center',
// textStyle: {
// color: '#1890ff'
// }
// },
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: this.borrowList.map(item => item.date),
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.1)',
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
rotate: 15,
show: true,
textStyle: {
color: '#fff',
fontSize: '12'
}
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
color:'#66b1ff',
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '12'
}
}
},
series: [
{
name: '出库数',
type: 'line',
color:'#f1c54b',
data: this.borrowList.map(item => item.borCount),
smooth: true,
lineStyle: {
normal: {
width: 2,
color: '#f1c54b'
}
},
areaStyle: {
normal: {
color: '#f1c54b'
}
}
},
{
name: '入库数',
type: 'line',
color:'#88cd90',
data: this.rtnList.map(item => item.rtnCount),
smooth: true,
lineStyle: {
normal: {
width: 2,
color: '#88cd90'
}
},
areaStyle: {
normal: {
color: '#88cd90'
}
}
}
]
};
chart.setOption(option);
// 使页面自动轮播显示每一个坐标点
let currentIndex = -1;
setInterval(() => {
const dataLen = option.xAxis.data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
this.chart = chart;
})
}
},
beforeDestroy() {
const chart = echarts.getInstanceByDom(document.getElementById('chart'))
chart.dispose()
}
}
</script>
<style lang="less">
#module-chart {
width: 50%;
height: 100%;
margin-right: 20px;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box;
.module-chart-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
margin-left: 30%;
}
.dv-charts-container {
height: calc(~"100% - 50px");
}
#module {
height: calc(~"100% - 50px");
}
}
</style>
\ No newline at end of file
src/components/datav/rankingBoard.vue 0 → 100644
<template>
<div id="ranking-board">
<div class="ranking-board-title">预案(点击行开启/关闭)</div>
<dv-scroll-board :config="config" @click="open"/>
<el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="visible" :title="title" :show-close="false" :close-on-press-escape="false" :fullscreen="true">
<el-row>
<el-col :span="8">
<el-table :data="tableData">
<el-table-column type="index" label="序号" width="50" align="center"/>
<el-table-column prop="MaterielName" label="装备名称" align="center"/>
<el-table-column prop="EqCount" label="数量" align="center"/>
</el-table>
</el-col>
<el-col :span="16">
<iframe :src="src" frameborder="no" style="width: 100%;height:650px;"/>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="info" plain @click="close">停止预案</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
export default {
name: 'RankingBoard',
data () {
return {
config: {},
planData: [],
tableData: [],
src: 'http://41.204.124.218:18080/ckzp.html',
url: '/api/Plan/GetAllPlan',
data: [],
page: 0,
total: 0,
visible: false,
title: '',
clickRow: '',
timer: ''
}
},
mounted () {
const { createData } = this
createData()
this.timer = setInterval(createData, 6000)
setTimeout(() => {
window.location.reload()
}, 1000*3600*6)
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
},
methods: {
headClass () {
return 'background:#1981f6;color: #FFF;'
},
rowClass ({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return 'old-row'
} else {
return 'even-row'
}
},
createData () {
this.data = []
getAction(window._CONFIG['domianURL'] + this.url).then(res => {
this.planData = res.Rows
res.Rows.forEach(element => {
var arr = []
arr.push(element.PlanName)
arr.push(element.PlanInfo)
arr.push(element.Remark)
arr.push(element.PlanState === 0 ? '关闭' : '开启')
this.data.push(arr)
})
this.config = {
header: ['预案名称', '预案概要', '备注', '状态'],
data: this.data,
index: true,
columnWidth: [50],
align: ['center'],
rowNum: 9,
headerBGC: '#1981f6',
headerHeight: 45,
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
}
})
},
sizeChange (e) {
this.page = 0
this.size = e
this.createData()
},
pageChange (e) {
this.page = e - 1
this.createData()
},
open(row) {
this.title = this.planData[row.rowIndex].PlanInfo
this.clickRow = this.planData[row.rowIndex]
getAction(window._CONFIG['domianURL'] + "/api/Plan/" + this.planData[row.rowIndex].ID).then(res => {
this.tableData = res.PlanDetail
})
if (this.clickRow.PlanState === 1) {
this.close()
return
}
this.$confirm('此操作将开启该预案, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
postAction(window._CONFIG['domianURL'] + '/api/Plan/OpenPlan?ID=' + this.planData[row.rowIndex].ID).then(res => {
if(res.Success) {
this.visible = true
this.createData()
} else {
this.$message.error(res.Remark)
}
})
})
},
close() {
postAction(window._CONFIG['domianURL'] + '/api/Plan/ClosePlan?ID=' + this.clickRow.ID).then(res => {
if(res.Success) {
this.visible = false
this.createData()
} else {
this.$message.error(res.Remark)
}
})
}
}
}
</script>
<style>
.el-table, .el-table__expanded-cell {
background-color: transparent !important;
border: none !important;
}
.el-table--border tr,td {
border: none!important;
}
.el-table::before {
height:0;
}
tr {pointer-events: none;}
.el-table .old-row {
background: rgba(0, 44, 81, 0.8) !important;
color: #fff;
}
.el-table .even-row {
background: rgba(10, 29, 50, 0.8) !important;
color: #fff;
}
</style>
<style lang="less">
#ranking-board {
width: 52%;
margin: 0px 20px;
box-sizing: border-box;
height: 100%;
overflow: hidden;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
flex-direction: column;
.ranking-board-title {
font-weight: bold;
height: 50px;
display: flex;
align-items: center;
font-size: 20px;
justify-content: center;
}
.dv-scroll-ranking-board {
flex: 1;
}
}
.el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*height:600px;*/
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
</style>
src/components/datav/roseChart copy.vue 0 → 100644
<template>
<div id="rose-chart">
<div class="rose-chart-title">装备库存图</div>
<div id="stock"/>
</div>
</template>
<script>
import echarts from 'echarts'
import { getAction } from '@/api/manage'
export default {
name: 'RoseChart',
data () {
return {
chart: null,
data: [],
url: '/api/ChartStatistics/GetPie'
}
},
mounted () {
const { createData } = this
createData()
// setInterval(createData, 5000)
},
methods: {
createData () {
getAction(this.url, {}).then(res => {
this.chart = echarts.init(document.getElementById('stock'))
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
data: res,
radius: ['45%', '65%'],
insideLabel: {
show: false
},
center: ['50%', '55%'],
outsideLabel: {
labelLineEndLength: 10,
formatter: '{percent}%\n{name}\n{value}',
style: {
fontSize: 14,
fill: '#fff'
}
}
}
],
color: ['#32c5e9', '#96bfff', '#9fe6b8','#e690d1', '#ffdb5c', '#ff9f7f']
}
this.chart.setOption(option)
})
}
}
}
</script>
<style lang="less">
#rose-chart {
width: 50%;
height: 100%;
margin: 0px 20px;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box;
.rose-chart-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
}
.dv-charts-container {
height: calc(~"100% - 50px");
}
#stock {
height: calc(~"100% - 50px");
}
}
</style>
src/components/datav/roseChart.vue 0 → 100644
<template>
<div id="rose-chart">
<div class="rose-chart-title">装备库存图</div>
<div id="stock"/>
</div>
</template>
<script>
import echarts from 'echarts'
import { getAction } from '@/api/manage'
export default {
name: 'RoseChart',
data () {
return {
chart: null,
data: [],
url: '/api/ChartStatistics/GetAllEquCountByLibrary'
}
},
mounted () {
const { createData } = this
createData()
// setInterval(createData, 5000)
},
methods: {
createData () {
getAction(this.url, {}).then(res => {
this.data = res.map(item => ({
name: item.LibaryName,
value: item.EqCount
}))
this.chart = echarts.init(document.getElementById('stock'))
//console.log(res);
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
data: this.data,
radius: ['45%', '65%'],
insideLabel: {
show: true
},
center: ['50%', '55%'],
outsideLabel: {
labelLineEndLength: 10,
formatter: '{percent}%\n{name}\n{value}',
style: {
fontSize: 14,
fill: '#fff'
}
},
label: {
show: true,
formatter(param) {
// correct the percentage
return param.name + ' ：' + param.value ;
}
},
}
],
color: ['#ffdb5c', '#ff9f7f', '#32c5e9', '#96bfff', '#9fe6b8', '#e690d1']
}
this.chart.setOption(option)
})
}
}
}
</script>
<style lang="less">
#rose-chart {
width: 50%;
height: 100%;
margin: 0px 20px;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box;
.rose-chart-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
margin-left: 40%;
}
.dv-charts-container {
height: calc(~"100% - 50px");
}
#stock {
height: calc(~"100% - 50px");
}
}
</style>
\ No newline at end of file
src/components/datav/scrollBoard.vue 0 → 100644
<template>
<div id="scroll-board">
<div class="scroll-title">装备出入库列表</div>
<dv-scroll-board :config="config" />
</div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
name: 'ScrollBoard',
data () {
return {
url: '/api/Borrow/GetInventoryLog',
data: [],
config: {}
}
},
created () {
this.init()
},
methods: {
init () {
var params = {
Page: 1,
Rows: 10,
Sort: 'ID',
Order: 'DESC',
Type: '',
EquName: '',
OrderBy: 'CreateTime'
}
getAction(this.url, params).then(res => {
res.Rows.forEach(element => {
var arr = []
arr.push(element.EquName)
arr.push(element.EqSizeName)
arr.push(element.UserName)
arr.push(element.CreateTime)
arr.push(element.Type === 0 ? '入库' : '出库')
this.data.push(arr)
})
this.config = {
header: ['装备名称', '号型名称', '人员名称', '操作时间', '类型'],
data: this.data,
index: false,
align: ['center'],
rowNum: 9,
headerBGC: '#1981f6',
headerHeight: 45,
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
}
})
}
}
}
</script>
<style lang="less">
#scroll-board {
width: 45%;
box-sizing: border-box;
height: 100%;
overflow: hidden;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
flex-direction: column;
.scroll-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
src/components/datav/topHeader.vue 0 → 100644
<template>
<div id="top-header">
<dv-decoration-8 class="header-left-decoration" />
<dv-decoration-5 class="header-center-decoration" />
<dv-decoration-8 class="header-right-decoration" :reverse="true" />
<div class="center-title">宁波巡特警装备管控系统</div>
</div>
</template>
<script>
export default {
name: 'TopHeader'
}
</script>
<style lang="less">
#top-header {
position: relative;
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
flex-shrink: 0;
.header-center-decoration {
width: 40%;
height: 60px;
margin-top: 42px;
}
.header-left-decoration, .header-right-decoration {
width: 25%;
height: 60px;
}
.center-title {
position: absolute;
font-size: 40px;
font-weight: bold;
left: 50%;
top: 15px;
transform: translateX(-50%);
}
}
</style>
src/components/datav/waterLevelChart.vue 0 → 100644
<template>
<div id="water-level-chart">
<div class="water-level-chart-title">装备使用频率(使用量)</div>
<div id="useCount"/>
</div>
</template>
<script>
import echarts from 'echarts'
import { getAction } from '@/api/manage'
export default {
name: 'WaterLevelChart',
mounted () {
const { createData } = this
createData()
//setInterval(createData, 6000)
},
data () {
return {
url: '/api/ChartStatistics/GetEqRate',
option: {},
chart: null
}
},
methods: {
createData () {
getAction(this.url, {}).then(res => {
var categoryData = []
var valData = []
for (var i in res.Rows) {
categoryData.push(res.Rows[i].MaterialName)
valData.push(res.Rows[i].UseCount)
}
this.chart = echarts.init(document.getElementById('useCount'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '2%',
top: '20px',
right: '0%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: categoryData,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'solid'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
rotate: 35,
show: true,
textStyle: {
color: '#fff',
fontSize: '12'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '10'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
width: 1,
type: 'solid'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
}],
series: [{
type: 'bar',
data: valData,
barWidth: '35%',
itemStyle: {
normal: {
color: '#409eff',
opacity: 1,
barBorderRadius: 5
}
},
label: {
show: true,
position: 'top',
fontWeight: 'bold'
},
}]
}
this.chart.setOption(option)
})
}
}
}
</script>
<style lang="less">
#water-level-chart {
width: 50%;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box;
flex-direction: column;
.water-level-chart-title {
font-weight: bold;
height: 50px;
display: flex;
align-items: center;
font-size: 20px;
justify-content: center;
}
#useCount {
height: calc(~"100% - 50px");
}
}
</style>
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
import './assets/common.less'
import dataV from '@jiaminghi/data-view'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(dataV)
new Vue({
render: h => h(App)
}).$mount('#app')
src/utils/axios.js 0 → 100644
const VueAxios = {
vm: {},
// eslint-disable-next-line no-unused-vars
install(Vue, router = {}, instance) {
if (this.installed) {
return;
}
this.installed = true;
if (!instance) {
// eslint-disable-next-line no-console
console.error('You have to install axios');
return;
}
Vue.axios = instance;
Object.defineProperties(Vue.prototype, {
axios: {
get: function get() {
return instance;
}
},
$http: {
get: function get() {
return instance;
}
}
});
}
};
export {
VueAxios,
// eslint-disable-next-line no-undef
//instance as axios
}
\ No newline at end of file
src/utils/request.js 0 → 100644
import axios from 'axios'
import { VueAxios } from './axios'
let apiBaseUrl = window._CONFIG['domianURL'] || '/'
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: apiBaseUrl,
timeout: 6000 // 请求超时时间
})
request.interceptors.response.use((response) => {
return response.data
})
const installer = {
vm: {},
install (Vue) {
Vue.use(VueAxios, request)
}
}
export default request
export {
installer as VueAxios,
request as axios
}
vue.config.js 0 → 100644
module.exports = {
devServer: {
port: 9555,
},
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
\ No newline at end of file
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论