some modify
This commit is contained in:
jiaming
parent
a7793859c9
commit
e9d5323c8b
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "jdyw_datav",
|
"name": "dataview",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
@ -9,7 +9,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.18.0",
|
"axios": "^0.18.0",
|
||||||
"vue": "^2.5.17"
|
"highlight.js": "^9.13.1",
|
||||||
|
"vue": "^2.5.17",
|
||||||
|
"vue-router": "^3.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^3.1.1",
|
"@vue/cli-plugin-babel": "^3.1.1",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title>JDYW_DATAV</title>
|
<title>DATAV-DEMO</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
82
src/App.vue
82
src/App.vue
|
|
@ -1,81 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app" ref="data-root">
|
||||||
<div class="datav-container" ref="data-root">
|
<router-view />
|
||||||
<current-data-v />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import currentDataV from './views/electronicFile/index'
|
|
||||||
import currentDataV from './views/manageDesk/index'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app'
|
||||||
components: {
|
|
||||||
currentDataV
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
scale: 0,
|
|
||||||
app: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init () {
|
|
||||||
const { initConfig, setAppScale, bindReSizeEventHandler } = this
|
|
||||||
|
|
||||||
initConfig()
|
|
||||||
|
|
||||||
setAppScale()
|
|
||||||
|
|
||||||
bindReSizeEventHandler()
|
|
||||||
},
|
|
||||||
initConfig () {
|
|
||||||
const { width, height } = screen
|
|
||||||
|
|
||||||
this.allWidth = width
|
|
||||||
|
|
||||||
const app = this.app = this.$refs['data-root']
|
|
||||||
|
|
||||||
app.style.width = `${width}px`
|
|
||||||
app.style.height = `${height}px`
|
|
||||||
},
|
|
||||||
setAppScale () {
|
|
||||||
const { allWidth, app } = this
|
|
||||||
|
|
||||||
const currentWidth = document.body.clientWidth
|
|
||||||
|
|
||||||
app.style.transform = `scale(${currentWidth / allWidth})`
|
|
||||||
},
|
|
||||||
bindReSizeEventHandler () {
|
|
||||||
const { debounce, setAppScale } = this
|
|
||||||
|
|
||||||
if (!debounce) return
|
|
||||||
|
|
||||||
window.addEventListener('resize', debounce(100, setAppScale))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { init } = this
|
|
||||||
|
|
||||||
init()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#app {
|
#app {
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
font-family:
|
||||||
|
'code',
|
||||||
|
'-apple-system',
|
||||||
|
'BlinkMacSystemFont',
|
||||||
|
'Helvetica Neue',
|
||||||
|
'PingFang SC',
|
||||||
|
'Microsoft YaHei',
|
||||||
|
'Source Han Sans SC',
|
||||||
|
'Noto Sans CJK SC',
|
||||||
|
'WenQuanYi Micro Hei',
|
||||||
|
'sans-serif';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
user-select: none;
|
|
||||||
background-size: 100%;
|
|
||||||
background-image: url('./assets/img/bg.png');
|
|
||||||
|
|
||||||
.datav-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform-origin: left top;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import borderBox3 from './borderBox3/index'
|
||||||
import borderBox4 from './borderBox4/index'
|
import borderBox4 from './borderBox4/index'
|
||||||
import borderBox5 from './borderBox5/index'
|
import borderBox5 from './borderBox5/index'
|
||||||
import borderBox6 from './borderBox6/index'
|
import borderBox6 from './borderBox6/index'
|
||||||
|
import borderBox7 from './borderBox7/index'
|
||||||
|
|
||||||
import decoration1 from './decoration1/index'
|
import decoration1 from './decoration1/index'
|
||||||
import decoration2 from './decoration2/index'
|
import decoration2 from './decoration2/index'
|
||||||
|
|
@ -22,6 +23,8 @@ import scrollBoard from './scrollBoard/index.vue'
|
||||||
|
|
||||||
import loading from './loading/index.vue'
|
import loading from './loading/index.vue'
|
||||||
|
|
||||||
|
import highlightCode from './highlightCode'
|
||||||
|
|
||||||
export default function (Vue) {
|
export default function (Vue) {
|
||||||
Vue.component('borderBox1', borderBox1)
|
Vue.component('borderBox1', borderBox1)
|
||||||
Vue.component('borderBox2', borderBox2)
|
Vue.component('borderBox2', borderBox2)
|
||||||
|
|
@ -29,6 +32,7 @@ export default function (Vue) {
|
||||||
Vue.component('borderBox4', borderBox4)
|
Vue.component('borderBox4', borderBox4)
|
||||||
Vue.component('borderBox5', borderBox5)
|
Vue.component('borderBox5', borderBox5)
|
||||||
Vue.component('borderBox6', borderBox6)
|
Vue.component('borderBox6', borderBox6)
|
||||||
|
Vue.component('borderBox7', borderBox7)
|
||||||
Vue.component('decoration1', decoration1)
|
Vue.component('decoration1', decoration1)
|
||||||
Vue.component('decoration2', decoration2)
|
Vue.component('decoration2', decoration2)
|
||||||
Vue.component('decoration3', decoration3)
|
Vue.component('decoration3', decoration3)
|
||||||
|
|
@ -41,4 +45,5 @@ export default function (Vue) {
|
||||||
Vue.component('numberShow', numberShow)
|
Vue.component('numberShow', numberShow)
|
||||||
Vue.component('scrollBoard', scrollBoard)
|
Vue.component('scrollBoard', scrollBoard)
|
||||||
Vue.component('loading', loading)
|
Vue.component('loading', loading)
|
||||||
|
Vue.component('highlightCode', highlightCode)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,20 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import router from './router/index'
|
||||||
|
|
||||||
import './assets/style/index.less'
|
import './assets/style/index.less'
|
||||||
|
|
||||||
import plugins from './plugins/index'
|
import plugins from './plugins/index'
|
||||||
|
|
||||||
import globalComponents from './components/index'
|
import components from './components/index'
|
||||||
|
|
||||||
Vue.use(plugins)
|
Vue.use(plugins)
|
||||||
|
|
||||||
Vue.use(globalComponents)
|
Vue.use(components)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
router,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|
|
||||||
35
src/temp.vue
35
src/temp.vue
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app" ref="data-root">
|
|
||||||
<div class="datav-container">
|
|
||||||
<demo />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import demo from './views/demo/index'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'app',
|
|
||||||
components: {
|
|
||||||
demo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
#app {
|
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: scroll;
|
|
||||||
background-size: 100%;
|
|
||||||
background-image: url('./assets/img/bg.png');
|
|
||||||
background-repeat: repeat;
|
|
||||||
|
|
||||||
.datav-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div class="datav-page">
|
||||||
|
<border-box-1>
|
||||||
|
<div class="welcome">Welcome Data View Page</div>
|
||||||
|
</border-box-1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DatavPage'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.datav-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.border-box-1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
margin-top: -100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<div id="datav-entrance">
|
||||||
|
<div class="datav-container" ref="data-root">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DatavEntrance',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
scale: 0,
|
||||||
|
datavRoot: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
const { initConfig, setAppScale, bindReSizeEventHandler } = this
|
||||||
|
|
||||||
|
initConfig()
|
||||||
|
|
||||||
|
setAppScale()
|
||||||
|
|
||||||
|
bindReSizeEventHandler()
|
||||||
|
},
|
||||||
|
initConfig () {
|
||||||
|
const { width, height } = screen
|
||||||
|
|
||||||
|
this.allWidth = width
|
||||||
|
|
||||||
|
const datavRoot = this.datavRoot = this.$refs['data-root']
|
||||||
|
|
||||||
|
datavRoot.style.width = `${width}px`
|
||||||
|
datavRoot.style.height = `${height}px`
|
||||||
|
},
|
||||||
|
setAppScale () {
|
||||||
|
const { allWidth, datavRoot } = this
|
||||||
|
|
||||||
|
const currentWidth = document.body.clientWidth
|
||||||
|
|
||||||
|
datavRoot.style.transform = `scale(${currentWidth / allWidth})`
|
||||||
|
},
|
||||||
|
bindReSizeEventHandler () {
|
||||||
|
const { debounce, setAppScale } = this
|
||||||
|
|
||||||
|
if (!debounce) return
|
||||||
|
|
||||||
|
window.addEventListener('resize', debounce(100, setAppScale))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const { init } = this
|
||||||
|
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#datav-entrance {
|
||||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-size: 100%;
|
||||||
|
background-image: url('../../assets/img/bg.png');
|
||||||
|
|
||||||
|
.datav-container {
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="border-box-demo">
|
<div id="border-box">
|
||||||
<border-box-1 class="border-box-item">
|
<border-box-1 class="border-box-item">
|
||||||
border-box-1
|
border-box-1
|
||||||
</border-box-1>
|
</border-box-1>
|
||||||
|
|
@ -39,12 +39,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'BorderBoxDemo'
|
name: 'BorderBox'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#border-box-demo {
|
#border-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="chart-demo">
|
<div id="chart">
|
||||||
<border-box-4 class="chart-item">
|
<border-box-4 class="chart-item">
|
||||||
<capsule-chart :data="capsuleChartData" class="chart" />
|
<capsule-chart :data="capsuleChartData" class="chart" />
|
||||||
|
|
||||||
|
|
@ -278,7 +278,7 @@ color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'ChartDemo',
|
name: 'Chart',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
capsuleChartData: {
|
capsuleChartData: {
|
||||||
|
|
@ -599,7 +599,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#chart-demo {
|
#chart {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="decoration-demo">
|
<div id="decoration">
|
||||||
<border-box-6 class="decoration-container">
|
<border-box-6 class="decoration-container">
|
||||||
<decoration-1 class="decoration d1 center" />
|
<decoration-1 class="decoration d1 center" />
|
||||||
decoration-1
|
decoration-1
|
||||||
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#decoration-demo {
|
#decoration {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div id="datav-document">
|
||||||
|
<div class="document">
|
||||||
|
将src下的components及plugins复制至你的项目内
|
||||||
|
并在main.js中引入他们即可使用
|
||||||
|
|
||||||
|
<highlight-code>
|
||||||
|
import datavComponents from './components/index.js'
|
||||||
|
import datavPlugins from './plugin/index.js'
|
||||||
|
|
||||||
|
Vue.use(datavComponents)
|
||||||
|
Vue.use(datavPlugins)
|
||||||
|
</highlight-code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DatavDocument'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#datav-document {
|
||||||
|
font-size: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.document {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,33 +1,49 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="demo">
|
<div class="demo">
|
||||||
<div class="menu-bar">
|
<div class="menu-bar">
|
||||||
<div @click="status = 'borderBox'">Border-Box</div>
|
<div :class="`menu-item ${activeIndex === index && 'active'}`"
|
||||||
<div @click="status = 'decoration'">Decoration</div>
|
v-for="(item, index) in menuData"
|
||||||
<div @click="status = 'chart'">Charts</div>
|
:key="item.title"
|
||||||
<div @click="status = 'other'">Other</div>
|
@click="$router.push({ name: item.routerName }) & (activeIndex = index)">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<border-box-demo v-if="status === 'borderBox'" />
|
<div class="router-container">
|
||||||
<decoration-demo v-if="status === 'decoration'" />
|
<router-view />
|
||||||
<chart-demo v-if="status === 'chart'" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import borderBoxDemo from './borderBoxDemo'
|
|
||||||
import decorationDemo from './decorationDemo'
|
|
||||||
import chartDemo from './chartDemo'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Demo',
|
name: 'Demo',
|
||||||
components: {
|
|
||||||
borderBoxDemo,
|
|
||||||
decorationDemo,
|
|
||||||
chartDemo
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
status: 'borderBox'
|
activeIndex: 0,
|
||||||
|
|
||||||
|
menuData: [
|
||||||
|
{
|
||||||
|
title: 'Document',
|
||||||
|
routerName: 'document'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Border-Box',
|
||||||
|
routerName: 'borderBox'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Decoration',
|
||||||
|
routerName: 'decoration'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Chart',
|
||||||
|
routerName: 'chart'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Table',
|
||||||
|
routerName: 'table'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -37,30 +53,49 @@ export default {
|
||||||
.demo {
|
.demo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-image: url('../../assets/img/bg.png');
|
||||||
|
background-size: 100%;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
.menu-bar {
|
.menu-bar {
|
||||||
height: 50px;
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
.active {
|
||||||
width: 150px;
|
border-bottom: 3px solid #0084ff;
|
||||||
height: 100%;
|
}
|
||||||
text-align: center;
|
|
||||||
margin: 0px 20px;
|
|
||||||
line-height: 50px;
|
|
||||||
font-weight: bold;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 2px solid #00baff;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:active {
|
.menu-item {
|
||||||
color: #00baff;
|
width: 120px;
|
||||||
border-color: #fff;
|
text-align: center;
|
||||||
}
|
margin: 0px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 3px solid #0084ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: #0084ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
padding-top: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div id="table">
|
||||||
|
this is table
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Table'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#table {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,806 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="electronic-file">
|
|
||||||
<div class="header">
|
|
||||||
<div class="left">{{ technicalSupport }}</div>
|
|
||||||
<div class="middle">{{ chart10Name }}</div>
|
|
||||||
<border-box-2 class="right">
|
|
||||||
综合管理台
|
|
||||||
</border-box-2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<border-box-1 class="content">
|
|
||||||
<border-box-3 class="left">
|
|
||||||
<div class="left-title">{{ chart1Name }}</div>
|
|
||||||
|
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart1Data ? multipleSum(...chart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
|
||||||
<capsule-chart class="left-chart" :data="chart1Data" />
|
|
||||||
|
|
||||||
<decoration-2 class="left-d2" />
|
|
||||||
|
|
||||||
<div class="station-name">{{ chart2Name }}</div>
|
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart2Data ? multipleSum(...chart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
|
||||||
<ring-chart class="left-chart" :data="chart2Data" />
|
|
||||||
|
|
||||||
<div class="station-name">{{ chart3Name }}</div>
|
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart3Data ? multipleSum(...chart3Data.data.map(({ value }) => value)) : 0}}</div></div>
|
|
||||||
<capsule-chart class="left-chart" :data="chart3Data" />
|
|
||||||
</border-box-3>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<div class="right-top">
|
|
||||||
<border-box-3 class="right-top-left">
|
|
||||||
<div class="rtl-header">
|
|
||||||
<decoration-1 class="dl" />
|
|
||||||
<div class="rtl-title">机电设备总数</div>
|
|
||||||
<decoration-1 class="dr" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rtl-device-num">
|
|
||||||
<div class="device-num-container">
|
|
||||||
设备总数<number-show :number="chart10Data ? multipleSum(...chart10Data.data.map(({ value }) => value)) : 0" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rtl-chart-container">
|
|
||||||
<div class="device-num-container">
|
|
||||||
<div class="num-item">
|
|
||||||
<div>{{ chart10Data.data[0].value }}</div>
|
|
||||||
<div>{{ chart10Data.data[0].title }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="num-item">
|
|
||||||
<div>{{ chart10Data.data[1].value }}</div>
|
|
||||||
<div>{{ chart10Data.data[1].title }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ring-chart :data="chart10Data" />
|
|
||||||
|
|
||||||
<div class="device-num-container">
|
|
||||||
<div class="num-item">
|
|
||||||
<div>{{ chart10Data.data[2].value }}</div>
|
|
||||||
<div>{{ chart10Data.data[2].title }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="num-item">
|
|
||||||
<div>{{ chart10Data.data[3].value }}</div>
|
|
||||||
<div>{{ chart10Data.data[3].title }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</border-box-3>
|
|
||||||
|
|
||||||
<div class="right-top-right">
|
|
||||||
<border-box-3 class="right-top-right-one">
|
|
||||||
<div class="rtr-title">{{ chart9Name }}</div>
|
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
|
||||||
<div class="device-num">
|
|
||||||
<div>{{ chart9Data ? multipleSum(...chart9Data.data.map(({ value }) => value)) : 0 }}</div>
|
|
||||||
<div>设备运行总数</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<capsule-chart class="rtr-chart" :data="chart9Data" />
|
|
||||||
</div>
|
|
||||||
</border-box-3>
|
|
||||||
|
|
||||||
<border-box-4 class="right-top-right-two" :reverse="true">
|
|
||||||
<div class="rtr-title">{{ chart8Name }}</div>
|
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
|
||||||
<div class="device-num">
|
|
||||||
<div>{{ chart8Data ? multipleSum(...chart8Data.data.map(({ value }) => value)) : 0}}</div>
|
|
||||||
<div>设备运行总数</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ring-chart class="rtr-chart" :data="chart8Data" />
|
|
||||||
</div>
|
|
||||||
</border-box-4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<border-box-4 class="right-bottom">
|
|
||||||
<div class="rb-item">
|
|
||||||
<div class="station-name">{{ chart4Name }}</div>
|
|
||||||
<ring-chart :data="chart4Data" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
|
||||||
|
|
||||||
<div class="rb-item">
|
|
||||||
<div class="station-name">{{ chart5Name }}</div>
|
|
||||||
<ring-chart :data="chart5Data" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
|
||||||
|
|
||||||
<div class="rb-item">
|
|
||||||
<div class="station-name">{{ chart6Name }}</div>
|
|
||||||
<ring-chart :data="chart6Data" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
|
||||||
|
|
||||||
<div class="rb-item">
|
|
||||||
<div class="station-name">{{ chart7Name }}</div>
|
|
||||||
<ring-chart :data="chart7Data" />
|
|
||||||
</div>
|
|
||||||
</border-box-4>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</border-box-1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ElectronicFile',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
|
||||||
chart10Name: '机电设备电子档案',
|
|
||||||
|
|
||||||
// 左边第一个图表数据
|
|
||||||
chart1Name: '收费站',
|
|
||||||
chart1Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 85,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 44,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 125,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 110,
|
|
||||||
title: '供配电系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 66,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左边第二个图表数据
|
|
||||||
chart2Name: '收费站',
|
|
||||||
chart2Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 37,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 12,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 105,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 62,
|
|
||||||
title: '供配电系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 29,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: false
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左边第三个图表数据
|
|
||||||
chart3Name: '收费站',
|
|
||||||
chart3Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 119,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 88,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 55,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 101,
|
|
||||||
title: '供配电系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 15,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// 底部第一个图表数据
|
|
||||||
chart4Name: '收费站',
|
|
||||||
chart4Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 45,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 75,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 96,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 16,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 底部第一个图表数据
|
|
||||||
chart5Name: '收费站',
|
|
||||||
chart5Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 129,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 15,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 22,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 64,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 底部第一个图表数据
|
|
||||||
chart6Name: '收费站',
|
|
||||||
chart6Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 88,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 57,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 23,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 110,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 底部第一个图表数据
|
|
||||||
chart7Name: '收费站',
|
|
||||||
chart7Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 15,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 110,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 23,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 66,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右边第二个图表数据
|
|
||||||
chart8Name: '收费站',
|
|
||||||
chart8Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 57,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 66,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 32,
|
|
||||||
title: '供配电'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 12,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: false
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右边第一个图表数据
|
|
||||||
chart9Name: '收费站',
|
|
||||||
chart9Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 80,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 12,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 126,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 36,
|
|
||||||
title: '供配电系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 8,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右边顶部图表数据
|
|
||||||
chart10Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 1315,
|
|
||||||
title: '收费站'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 415,
|
|
||||||
title: '监控中心'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 90,
|
|
||||||
title: '道路外场'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 317,
|
|
||||||
title: '其他'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
|
|
||||||
path: '/rest/datav/device/interface/list',
|
|
||||||
paths: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async init () {
|
|
||||||
const { getAllPaths, getChartsData } = this
|
|
||||||
|
|
||||||
await getAllPaths()
|
|
||||||
|
|
||||||
await getChartsData()
|
|
||||||
},
|
|
||||||
getAllPaths () {
|
|
||||||
const { path, $http: { get } } = this
|
|
||||||
|
|
||||||
return get(path).then(({ code, data }) => {
|
|
||||||
if (code === 'success') {
|
|
||||||
this.paths = data.interfaces
|
|
||||||
} else {
|
|
||||||
console.error('数据返回异常!')
|
|
||||||
}
|
|
||||||
}).catch(e => {
|
|
||||||
console.error('DataV接口数据异常!')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getChartsData () {
|
|
||||||
const { paths, getChartData, getChartsData } = this
|
|
||||||
|
|
||||||
return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
|
|
||||||
},
|
|
||||||
async getChartData ({ number, url }) {
|
|
||||||
const { $http: { get }, color } = this
|
|
||||||
|
|
||||||
return get(url).then(({ code, data }) => {
|
|
||||||
if (code === 'success') {
|
|
||||||
this[`chart${number}Name`] = data.name
|
|
||||||
this[`chart${number}Data`] = {
|
|
||||||
data: data.data,
|
|
||||||
color,
|
|
||||||
active: !(number === 2 || number === 8)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error(`${number}接口异常`)
|
|
||||||
}
|
|
||||||
}).catch(e => console.error(`${number}接口异常`))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
const { init } = this
|
|
||||||
|
|
||||||
init()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
#electronic-file {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
height: 80px;
|
|
||||||
|
|
||||||
.left, .middle, .right {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
left: 35px;
|
|
||||||
bottom: 0px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: rgba(1, 134, 187, 0.91);
|
|
||||||
}
|
|
||||||
|
|
||||||
.middle {
|
|
||||||
font-size: 33px;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 0px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
width: 140px;
|
|
||||||
font-size: 18px;
|
|
||||||
right: 130px;
|
|
||||||
bottom: -20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
height: calc(~"100% - 80px");
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 22%;
|
|
||||||
|
|
||||||
.left-title {
|
|
||||||
height: 35px;
|
|
||||||
font-size: 32px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 35px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-device-num {
|
|
||||||
height: 35px;
|
|
||||||
|
|
||||||
div {
|
|
||||||
height: 35px;
|
|
||||||
float: left;
|
|
||||||
line-height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(1) {
|
|
||||||
font-size: 16px;
|
|
||||||
text-indent: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(2) {
|
|
||||||
font-size: 34px;
|
|
||||||
color: rgb(9, 109, 217);
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.station-name {
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
text-indent: 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(~"(100% - 252px) / 3");
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-d2 {
|
|
||||||
width: 90%;
|
|
||||||
height: 2px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top-left {
|
|
||||||
width: 65%;
|
|
||||||
|
|
||||||
.rtl-header {
|
|
||||||
position: relative;
|
|
||||||
height: 50px;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.decoration-1 {
|
|
||||||
position: absolute;
|
|
||||||
top: -20px;
|
|
||||||
width: 250px;
|
|
||||||
|
|
||||||
&.dl {
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dr {
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtl-device-num {
|
|
||||||
display: flex;
|
|
||||||
height: 70px;
|
|
||||||
justify-content: space-around;
|
|
||||||
line-height: 70px;
|
|
||||||
margin-top: 50px;
|
|
||||||
|
|
||||||
.device-num-container {
|
|
||||||
font-size: 32px;
|
|
||||||
|
|
||||||
.number-show {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtl-chart-container {
|
|
||||||
height: calc(~"100% - 170px");
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.device-num-container {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 120px 0px;
|
|
||||||
|
|
||||||
.num-item {
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
font-family: "Microsoft Yahei", Arial, sans-serif;
|
|
||||||
|
|
||||||
:nth-child(1) {
|
|
||||||
font-size: 34px;
|
|
||||||
text-indent: 35px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(2) {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ring-chart {
|
|
||||||
width: 330px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top-right {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 10px;
|
|
||||||
|
|
||||||
.rtr-title {
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtr-chart-container {
|
|
||||||
flex: 1;
|
|
||||||
height: calc(~"100% - 25px");
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.device-num {
|
|
||||||
width: 30%;
|
|
||||||
|
|
||||||
div {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(1) {
|
|
||||||
color: rgb(9, 109, 217);
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 34px;
|
|
||||||
height: 100px;
|
|
||||||
line-height: 100px;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(2) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtr-chart {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top-right-one, .right-top-right-two {
|
|
||||||
height: calc(~"50% - 5px");
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top-right-one {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-top-right-two {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-bottom {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.rb-item {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.station-name {
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ring-chart {
|
|
||||||
height: calc(~"100% - 50px");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rb-d2 {
|
|
||||||
width: 2px;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="manage-desk">
|
<div id="manage-desk">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="left">{{ technicalSupport }}</div>
|
<div class="left">技术支持:<a :href="technicalSupport" target="_BLANK">{{ technicalSupport }}</a></div>
|
||||||
<div class="middle">{{ topMiddleTitle }}</div>
|
<div class="middle">{{ topMiddleTitle }}</div>
|
||||||
<border-box-2 class="right">
|
<border-box-2 class="right">
|
||||||
设备档案馆
|
设备档案馆
|
||||||
|
|
@ -115,8 +115,8 @@ export default {
|
||||||
name: 'ManageDesk',
|
name: 'ManageDesk',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
technicalSupport: 'https://github.com/jiaming743/DataV',
|
||||||
topMiddleTitle: '机电运维管理台',
|
topMiddleTitle: 'Demo-机电运维管理台',
|
||||||
|
|
||||||
// 上部左边卡片数据
|
// 上部左边卡片数据
|
||||||
chart1Data: {
|
chart1Data: {
|
||||||
|
|
@ -141,7 +141,7 @@ export default {
|
||||||
],
|
],
|
||||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
|
||||||
pointColor: '#00db95',
|
pointColor: '#00db95',
|
||||||
type: 'polyline'
|
type: 'smoothline'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: ['#00baff'],
|
color: ['#00baff'],
|
||||||
|
|
@ -167,63 +167,39 @@ export default {
|
||||||
chart3Data: {
|
chart3Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
data: [
|
data: [2, 3, 6, 5, 4, 5, 2],
|
||||||
5, '', '', '',
|
type: 'column',
|
||||||
2, '', '', '',
|
columnColor:['rgba(0, 186, 255, 0.5)', 'rgba(0, 186, 255, 0.1)']
|
||||||
4, '', '', '',
|
|
||||||
2, '', '', '',
|
|
||||||
2, '', '', '',
|
|
||||||
2
|
|
||||||
],
|
|
||||||
dashed: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [
|
data: [1, 2, 4, 4, 5, 4, 1],
|
||||||
'', 4, '', '',
|
type: 'smoothline',
|
||||||
'', 3, '', '',
|
dashed: true,
|
||||||
'', 4, '', '',
|
fillColor:['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
|
||||||
'', 2, '', '',
|
|
||||||
'', 2, '', '',
|
|
||||||
'', 2
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [
|
data: [0.5, 1, 3, 3, 4, 3, 0.5],
|
||||||
'', '', 3, '',
|
fillColor:['rgba(254, 217, 78, 0.5)', 'rgba(254, 217, 78, 0.1)']
|
||||||
'', '', 2, '',
|
|
||||||
'', '', 2, '',
|
|
||||||
'', '', 2, '',
|
|
||||||
'', '', 2, '',
|
|
||||||
'', '', 2
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [
|
data: [2, 3, 6, 5, 6, 5, 2]
|
||||||
'', '', '', 3,
|
|
||||||
'', '', '', 2,
|
|
||||||
'', '', '', 2,
|
|
||||||
'', '', '', 2,
|
|
||||||
'', '', '', 3,
|
|
||||||
'', '', '', 2
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
x: {
|
x: {
|
||||||
data: [
|
data: [
|
||||||
'', '', '', '', '', '', '10/07',
|
'', '10/07',
|
||||||
'', '', '', '', '', '', '10/14',
|
'', '10/14',
|
||||||
'', '', '', '', '', '', '10/21',
|
'', '10/21', ''
|
||||||
'', '', ''
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
max: 6,
|
max: 8,
|
||||||
min: 0,
|
min: 0,
|
||||||
num: 6,
|
|
||||||
unit: '单位'
|
unit: '单位'
|
||||||
},
|
},
|
||||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||||
color: ['#00baff', '#3de7c9', '#44f23a', '#342432']
|
color: ['#00baff', '#3de7c9', '#f5d94e', '#ff5ca9'],
|
||||||
|
boundaryGap: true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部左边第一个图表数据
|
// 底部左边第一个图表数据
|
||||||
|
|
@ -415,58 +391,8 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
showItemNum: 4
|
showItemNum: 4
|
||||||
},
|
}
|
||||||
|
|
||||||
path: '/rest/datav/manage/interface/list',
|
|
||||||
paths: []
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async init () {
|
|
||||||
const { getAllPaths, getChartsData } = this
|
|
||||||
|
|
||||||
await getAllPaths()
|
|
||||||
|
|
||||||
await getChartsData()
|
|
||||||
},
|
|
||||||
getAllPaths () {
|
|
||||||
const { path, $http: { get } } = this
|
|
||||||
|
|
||||||
return get(path).then(({ code, data }) => {
|
|
||||||
if (code === 'success') {
|
|
||||||
this.paths = data.interfaces
|
|
||||||
|
|
||||||
this.topMiddleTitle = data.title
|
|
||||||
} else {
|
|
||||||
console.error('数据返回异常!')
|
|
||||||
}
|
|
||||||
}).catch(e => {
|
|
||||||
console.error('DataV接口数据异常!')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getChartsData () {
|
|
||||||
const { paths, getChartData, getChartsData } = this
|
|
||||||
|
|
||||||
return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
|
|
||||||
},
|
|
||||||
async getChartData ({ number, url }) {
|
|
||||||
const { $http: { get } } = this
|
|
||||||
|
|
||||||
if (!url) return
|
|
||||||
|
|
||||||
return get(url).then(({ code, data }) => {
|
|
||||||
if (code === 'success') {
|
|
||||||
this[`chart${number}Data`] = data
|
|
||||||
} else {
|
|
||||||
console.error(`${number}接口异常`)
|
|
||||||
}
|
|
||||||
}).catch(e => console.error(`${number}接口异常`))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
const { init } = this
|
|
||||||
|
|
||||||
init()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -475,6 +401,7 @@ export default {
|
||||||
#manage-desk {
|
#manage-desk {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -489,6 +416,15 @@ export default {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: rgba(1, 134, 187, 0.91);
|
color: rgba(1, 134, 187, 0.91);
|
||||||
|
|
||||||
|
a {
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:visited {
|
||||||
|
color: rgba(1, 134, 187, 0.91);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle {
|
.middle {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 6661,
|
port: 6661,
|
||||||
proxy: {
|
// proxy: {
|
||||||
'/rest': {
|
// '/rest': {
|
||||||
// target: 'http://yd.jdyw.prod.hndfsj.net',
|
// // target: 'http://yd.jdyw.prod.hndfsj.net',
|
||||||
target: 'http://192.168.10.122:38088', //mashuai
|
// target: 'http://192.168.10.122:38088', //mashuai
|
||||||
// target: 'http://192.168.10.125:38080', //qianshuo
|
// // target: 'http://192.168.10.125:38080', //qianshuo
|
||||||
pathRewrite: {
|
// pathRewrite: {
|
||||||
'^/rest': '/rest'
|
// '^/rest': '/rest'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
},
|
||||||
|
baseUrl: './'
|
||||||
}
|
}
|
||||||
|
|
@ -3300,6 +3300,10 @@ hex-color-regex@^1.1.0:
|
||||||
version "1.1.0"
|
version "1.1.0"
|
||||||
resolved "http://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
|
resolved "http://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
|
||||||
|
|
||||||
|
highlight.js@^9.13.1:
|
||||||
|
version "9.13.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
|
||||||
|
|
||||||
hmac-drbg@^1.0.0:
|
hmac-drbg@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
resolved "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||||
|
|
@ -6621,6 +6625,10 @@ vue-loader@^15.4.2:
|
||||||
vue-hot-reload-api "^2.3.0"
|
vue-hot-reload-api "^2.3.0"
|
||||||
vue-style-loader "^4.1.0"
|
vue-style-loader "^4.1.0"
|
||||||
|
|
||||||
|
vue-router@^3.0.2:
|
||||||
|
version "3.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
|
||||||
|
|
||||||
vue-style-loader@^4.1.0:
|
vue-style-loader@^4.1.0:
|
||||||
version "4.1.2"
|
version "4.1.2"
|
||||||
resolved "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
resolved "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue