no message
commit
cac8709214
|
|
@ -0,0 +1,5 @@
|
|||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
node_modules/
|
||||
dist/
|
||||
.idea/
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<h1 align="center">Electronic-File</h1>
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn run dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn run build
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "electronic-file",
|
||||
"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.1",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^2.6.5",
|
||||
"echarts": "^5.4.2",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
"@vue/cli-plugin-eslint": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"@vue/standard"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!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>DATAV-DEMO</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but manage-desk 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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</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>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import http from '@/utils/request'
|
||||
|
||||
export const getList = () => {
|
||||
return http.get('/api/hdtms/appService/loginAppServlet')
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
|
|
@ -0,0 +1,6 @@
|
|||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,438 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const dataMap = {}
|
||||
|
||||
function dataFormatter (obj) {
|
||||
const pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆']
|
||||
let temp
|
||||
for (let year = 2002; year <= 2011; year++) {
|
||||
let max = 0
|
||||
let sum = 0
|
||||
temp = obj[year]
|
||||
for (let i = 0, l = temp.length; i < l; i++) {
|
||||
max = Math.max(max, temp[i])
|
||||
sum += temp[i]
|
||||
obj[year][i] = {
|
||||
name: pList[i],
|
||||
value: temp[i]
|
||||
}
|
||||
}
|
||||
obj[year + 'max'] = Math.floor(max / 100) * 100
|
||||
obj[year + 'sum'] = sum
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
dataMap.dataGDP = dataFormatter({
|
||||
2011: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65, 17560.18, 11702.82, 45361.85, 26931.03, 19632.26, 19669.56, 53210.28, 11720.87, 2522.66, 10011.37, 21026.68, 5701.84, 8893.12, 605.83, 12512.3, 5020.37, 1670.44, 2102.21, 6610.05],
|
||||
2010: [14113.58, 9224.46, 20394.26, 9200.86, 11672, 18457.27, 8667.58, 10368.6, 17165.98, 41425.48, 27722.31, 12359.33, 14737.12, 9451.26, 39169.92, 23092.36, 15967.61, 16037.96, 46013.06, 9569.85, 2064.5, 7925.58, 17185.48, 4602.16, 7224.18, 507.46, 10123.48, 4120.75, 1350.43, 1689.65, 5437.47],
|
||||
2009: [12153.03, 7521.85, 17235.48, 7358.31, 9740.25, 15212.49, 7278.75, 8587, 15046.45, 34457.3, 22990.35, 10062.82, 12236.53, 7655.18, 33896.65, 19480.46, 12961.1, 13059.69, 39482.56, 7759.16, 1654.21, 6530.01, 14151.28, 3912.68, 6169.75, 441.36, 8169.8, 3387.56, 1081.27, 1353.31, 4277.05],
|
||||
2008: [11115, 6719.01, 16011.97, 7315.4, 8496.2, 13668.58, 6426.1, 8314.37, 14069.87, 30981.98, 21462.69, 8851.66, 10823.01, 6971.05, 30933.28, 18018.53, 11328.92, 11555, 36796.71, 7021, 1503.06, 5793.66, 12601.23, 3561.56, 5692.12, 394.85, 7314.58, 3166.82, 1018.62, 1203.92, 4183.21],
|
||||
2007: [9846.81, 5252.76, 13607.32, 6024.45, 6423.18, 11164.3, 5284.69, 7104, 12494.01, 26018.48, 18753.73, 7360.92, 9248.53, 5800.25, 25776.91, 15012.46, 9333.4, 9439.6, 31777.01, 5823.41, 1254.17, 4676.13, 10562.39, 2884.11, 4772.52, 341.43, 5757.29, 2703.98, 797.35, 919.11, 3523.16],
|
||||
2006: [8117.78, 4462.74, 11467.6, 4878.61, 4944.25, 9304.52, 4275.12, 6211.8, 10572.24, 21742.05, 15718.47, 6112.5, 7583.85, 4820.53, 21900.19, 12362.79, 7617.47, 7688.67, 26587.76, 4746.16, 1065.67, 3907.23, 8690.24, 2338.98, 3988.14, 290.76, 4743.61, 2277.35, 648.5, 725.9, 3045.26],
|
||||
2005: [6969.52, 3905.64, 10012.11, 4230.53, 3905.03, 8047.26, 3620.27, 5513.7, 9247.66, 18598.69, 13417.68, 5350.17, 6554.69, 4056.76, 18366.87, 10587.42, 6590.19, 6596.1, 22557.37, 3984.1, 918.75, 3467.72, 7385.1, 2005.42, 3462.73, 248.8, 3933.72, 1933.98, 543.32, 612.61, 2604.19],
|
||||
2004: [6033.21, 3110.97, 8477.63, 3571.37, 3041.07, 6672, 3122.01, 4750.6, 8072.83, 15003.6, 11648.7, 4759.3, 5763.35, 3456.7, 15021.84, 8553.79, 5633.24, 5641.94, 18864.62, 3433.5, 819.66, 3034.58, 6379.63, 1677.8, 3081.91, 220.34, 3175.58, 1688.49, 466.1, 537.11, 2209.09],
|
||||
2003: [5007.21, 2578.03, 6921.29, 2855.23, 2388.38, 6002.54, 2662.08, 4057.4, 6694.23, 12442.87, 9705.02, 3923.11, 4983.67, 2807.41, 12078.15, 6867.7, 4757.45, 4659.99, 15844.64, 2821.11, 713.96, 2555.72, 5333.09, 1426.34, 2556.02, 185.09, 2587.72, 1399.83, 390.2, 445.36, 1886.35],
|
||||
2002: [4315, 2150.76, 6018.28, 2324.8, 1940.94, 5458.22, 2348.54, 3637.2, 5741.03, 10606.85, 8003.67, 3519.72, 4467.55, 2450.48, 10275.5, 6035.48, 4212.82, 4151.54, 13502.42, 2523.73, 642.73, 2232.86, 4725.01, 1243.43, 2312.82, 162.04, 2253.39, 1232.03, 340.65, 377.16, 1612.6]
|
||||
})
|
||||
|
||||
dataMap.dataPI = dataFormatter({
|
||||
2011: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24, 1391.07, 3973.85, 3512.24, 2569.3, 2768.03, 2665.2, 2047.23, 659.23, 844.52, 2983.51, 726.22, 1411.01, 74.47, 1220.9, 678.75, 155.08, 184.14, 1139.03],
|
||||
2010: [124.36, 145.58, 2562.81, 554.48, 1095.28, 1631.08, 1050.15, 1302.9, 114.15, 2540.1, 1360.56, 1729.02, 1363.67, 1206.98, 3588.28, 3258.09, 2147, 2325.5, 2286.98, 1675.06, 539.83, 685.38, 2482.89, 625.03, 1108.38, 68.72, 988.45, 599.28, 134.92, 159.29, 1078.63],
|
||||
2009: [118.29, 128.85, 2207.34, 477.59, 929.6, 1414.9, 980.57, 1154.33, 113.82, 2261.86, 1163.08, 1495.45, 1182.74, 1098.66, 3226.64, 2769.05, 1795.9, 1969.69, 2010.27, 1458.49, 462.19, 606.8, 2240.61, 550.27, 1067.6, 63.88, 789.64, 497.05, 107.4, 127.25, 759.74],
|
||||
2008: [112.83, 122.58, 2034.59, 313.58, 907.95, 1302.02, 916.72, 1088.94, 111.8, 2100.11, 1095.96, 1418.09, 1158.17, 1060.38, 3002.65, 2658.78, 1780, 1892.4, 1973.05, 1453.75, 436.04, 575.4, 2216.15, 539.19, 1020.56, 60.62, 753.72, 462.27, 105.57, 118.94, 691.07],
|
||||
2007: [101.26, 110.19, 1804.72, 311.97, 762.1, 1133.42, 783.8, 915.38, 101.84, 1816.31, 986.02, 1200.18, 1002.11, 905.77, 2509.14, 2217.66, 1378, 1626.48, 1695.57, 1241.35, 361.07, 482.39, 2032, 446.38, 837.35, 54.89, 592.63, 387.55, 83.41, 97.89, 628.72],
|
||||
2006: [88.8, 103.35, 1461.81, 276.77, 634.94, 939.43, 672.76, 750.14, 93.81, 1545.05, 925.1, 1011.03, 865.98, 786.14, 2138.9, 1916.74, 1140.41, 1272.2, 1532.17, 1032.47, 323.48, 386.38, 1595.48, 382.06, 724.4, 50.9, 484.81, 334, 67.55, 79.54, 527.8],
|
||||
2005: [88.68, 112.38, 1400, 262.42, 589.56, 882.41, 625.61, 684.6, 90.26, 1461.51, 892.83, 966.5, 827.36, 727.37, 1963.51, 1892.01, 1082.13, 1100.65, 1428.27, 912.5, 300.75, 463.4, 1481.14, 368.94, 661.69, 48.04, 435.77, 308.06, 65.34, 72.07, 509.99],
|
||||
2004: [87.36, 105.28, 1370.43, 276.3, 522.8, 798.43, 568.69, 605.79, 83.45, 1367.58, 814.1, 950.5, 786.84, 664.5, 1778.45, 1649.29, 1020.09, 1022.45, 1248.59, 817.88, 278.76, 428.05, 1379.93, 334.5, 607.75, 44.3, 387.88, 286.78, 60.7, 65.33, 461.26],
|
||||
2003: [84.11, 89.91, 1064.05, 215.19, 420.1, 615.8, 488.23, 504.8, 81.02, 1162.45, 717.85, 749.4, 692.94, 560, 1480.67, 1198.7, 798.35, 886.47, 1072.91, 658.78, 244.29, 339.06, 1128.61, 298.69, 494.6, 40.7, 302.66, 237.91, 48.47, 55.63, 412.9],
|
||||
2002: [82.44, 84.21, 956.84, 197.8, 374.69, 590.2, 446.17, 474.2, 79.68, 1110.44, 685.2, 783.66, 664.78, 535.98, 1390, 1288.36, 707, 847.25, 1015.08, 601.99, 222.89, 317.87, 1047.95, 281.1, 463.44, 39.75, 282.21, 215.51, 47.31, 52.95, 305]
|
||||
})
|
||||
|
||||
dataMap.dataSI = dataFormatter({
|
||||
2011: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38, 9069.2, 6390.55, 24017.11, 15427.08, 9815.94, 9361.99, 26447.38, 5675.32, 714.5, 5543.04, 11029.13, 2194.33, 3780.32, 208.79, 6935.59, 2377.83, 975.18, 1056.15, 3225.9],
|
||||
2010: [3388.38, 4840.23, 10707.68, 5234, 6367.69, 9976.82, 4506.31, 5025.15, 7218.32, 21753.93, 14297.93, 6436.62, 7522.83, 5122.88, 21238.49, 13226.38, 7767.24, 7343.19, 23014.53, 4511.68, 571, 4359.12, 8672.18, 1800.06, 3223.49, 163.92, 5446.1, 1984.97, 744.63, 827.91, 2592.15],
|
||||
2009: [2855.55, 3987.84, 8959.83, 3993.8, 5114, 7906.34, 3541.92, 4060.72, 6001.78, 18566.37, 11908.49, 4905.22, 6005.3, 3919.45, 18901.83, 11010.5, 6038.08, 5687.19, 19419.7, 3381.54, 443.43, 3448.77, 6711.87, 1476.62, 2582.53, 136.63, 4236.42, 1527.24, 575.33, 662.32, 1929.59],
|
||||
2008: [2626.41, 3709.78, 8701.34, 4242.36, 4376.19, 7158.84, 3097.12, 4319.75, 6085.84, 16993.34, 11567.42, 4198.93, 5318.44, 3554.81, 17571.98, 10259.99, 5082.07, 5028.93, 18502.2, 3037.74, 423.55, 3057.78, 5823.39, 1370.03, 2452.75, 115.56, 3861.12, 1470.34, 557.12, 609.98, 2070.76],
|
||||
2007: [2509.4, 2892.53, 7201.88, 3454.49, 3193.67, 5544.14, 2475.45, 3695.58, 5571.06, 14471.26, 10154.25, 3370.96, 4476.42, 2975.53, 14647.53, 8282.83, 4143.06, 3977.72, 16004.61, 2425.29, 364.26, 2368.53, 4648.79, 1124.79, 2038.39, 98.48, 2986.46, 1279.32, 419.03, 455.04, 1647.55],
|
||||
2006: [2191.43, 2457.08, 6110.43, 2755.66, 2374.96, 4566.83, 1915.29, 3365.31, 4969.95, 12282.89, 8511.51, 2711.18, 3695.04, 2419.74, 12574.03, 6724.61, 3365.08, 3187.05, 13469.77, 1878.56, 308.62, 1871.65, 3775.14, 967.54, 1705.83, 80.1, 2452.44, 1043.19, 331.91, 351.58, 1459.3],
|
||||
2005: [2026.51, 2135.07, 5271.57, 2357.04, 1773.21, 3869.4, 1580.83, 2971.68, 4381.2, 10524.96, 7164.75, 2245.9, 3175.92, 1917.47, 10478.62, 5514.14, 2852.12, 2612.57, 11356.6, 1510.68, 240.83, 1564, 3067.23, 821.16, 1426.42, 63.52, 1951.36, 838.56, 264.61, 281.05, 1164.79],
|
||||
2004: [1853.58, 1685.93, 4301.73, 1919.4, 1248.27, 3061.62, 1329.68, 2487.04, 3892.12, 8437.99, 6250.38, 1844.9, 2770.49, 1566.4, 8478.69, 4182.1, 2320.6, 2190.54, 9280.73, 1253.7, 205.6, 1376.91, 2489.4, 681.5, 1281.63, 52.74, 1553.1, 713.3, 211.7, 244.05, 914.47],
|
||||
2003: [1487.15, 1337.31, 3417.56, 1463.38, 967.49, 2898.89, 1098.37, 2084.7, 3209.02, 6787.11, 5096.38, 1535.29, 2340.82, 1204.33, 6485.05, 3310.14, 1956.02, 1777.74, 7592.78, 984.08, 175.82, 1135.31, 2014.8, 569.37, 1047.66, 47.64, 1221.17, 572.02, 171.92, 194.27, 719.54],
|
||||
2002: [1249.99, 1069.08, 2911.69, 1134.31, 754.78, 2609.85, 943.49, 1843.6, 2622.45, 5604.49, 4090.48, 1337.04, 2036.97, 941.77, 5184.98, 2768.75, 1709.89, 1523.5, 6143.4, 846.89, 148.88, 958.87, 1733.38, 481.96, 934.88, 32.72, 1007.56, 501.69, 144.51, 153.06, 603.15]
|
||||
})
|
||||
|
||||
dataMap.dataTI = dataFormatter({
|
||||
2011: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96, 6878.74, 3921.2, 17370.89, 7991.72, 7247.02, 7539.54, 24097.7, 3998.33, 1148.93, 3623.81, 7014.04, 2781.29, 3701.79, 322.57, 4355.81, 1963.79, 540.18, 861.92, 2245.12],
|
||||
2010: [10600.84, 4238.65, 7123.77, 3412.38, 4209.03, 6849.37, 3111.12, 4040.55, 9833.51, 17131.45, 12063.82, 4193.69, 5850.62, 3121.4, 14343.14, 6607.89, 6053.37, 6369.27, 20711.55, 3383.11, 953.67, 2881.08, 6030.41, 2177.07, 2892.31, 274.82, 3688.93, 1536.5, 470.88, 702.45, 1766.69],
|
||||
2009: [9179.19, 3405.16, 6068.31, 2886.92, 3696.65, 5891.25, 2756.26, 3371.95, 8930.85, 13629.07, 9918.78, 3662.15, 5048.49, 2637.07, 11768.18, 5700.91, 5127.12, 5402.81, 18052.59, 2919.13, 748.59, 2474.44, 5198.8, 1885.79, 2519.62, 240.85, 3143.74, 1363.27, 398.54, 563.74, 1587.72],
|
||||
2008: [8375.76, 2886.65, 5276.04, 2759.46, 3212.06, 5207.72, 2412.26, 2905.68, 7872.23, 11888.53, 8799.31, 3234.64, 4346.4, 2355.86, 10358.64, 5099.76, 4466.85, 4633.67, 16321.46, 2529.51, 643.47, 2160.48, 4561.69, 1652.34, 2218.81, 218.67, 2699.74, 1234.21, 355.93, 475, 1421.38],
|
||||
2007: [7236.15, 2250.04, 4600.72, 2257.99, 2467.41, 4486.74, 2025.44, 2493.04, 6821.11, 9730.91, 7613.46, 2789.78, 3770, 1918.95, 8620.24, 4511.97, 3812.34, 3835.4, 14076.83, 2156.76, 528.84, 1825.21, 3881.6, 1312.94, 1896.78, 188.06, 2178.2, 1037.11, 294.91, 366.18, 1246.89],
|
||||
2006: [5837.55, 1902.31, 3895.36, 1846.18, 1934.35, 3798.26, 1687.07, 2096.35, 5508.48, 7914.11, 6281.86, 2390.29, 3022.83, 1614.65, 7187.26, 3721.44, 3111.98, 3229.42, 11585.82, 1835.12, 433.57, 1649.2, 3319.62, 989.38, 1557.91, 159.76, 1806.36, 900.16, 249.04, 294.78, 1058.16],
|
||||
2005: [4854.33, 1658.19, 3340.54, 1611.07, 1542.26, 3295.45, 1413.83, 1857.42, 4776.2, 6612.22, 5360.1, 2137.77, 2551.41, 1411.92, 5924.74, 3181.27, 2655.94, 2882.88, 9772.5, 1560.92, 377.17, 1440.32, 2836.73, 815.32, 1374.62, 137.24, 1546.59, 787.36, 213.37, 259.49, 929.41],
|
||||
2004: [4092.27, 1319.76, 2805.47, 1375.67, 1270, 2811.95, 1223.64, 1657.77, 4097.26, 5198.03, 4584.22, 1963.9, 2206.02, 1225.8, 4764.7, 2722.4, 2292.55, 2428.95, 8335.3, 1361.92, 335.3, 1229.62, 2510.3, 661.8, 1192.53, 123.3, 1234.6, 688.41, 193.7, 227.73, 833.36],
|
||||
2003: [3435.95, 1150.81, 2439.68, 1176.65, 1000.79, 2487.85, 1075.48, 1467.9, 3404.19, 4493.31, 3890.79, 1638.42, 1949.91, 1043.08, 4112.43, 2358.86, 2003.08, 1995.78, 7178.94, 1178.25, 293.85, 1081.35, 2189.68, 558.28, 1013.76, 96.76, 1063.89, 589.91, 169.81, 195.46, 753.91],
|
||||
2002: [2982.57, 997.47, 2149.75, 992.69, 811.47, 2258.17, 958.88, 1319.4, 3038.9, 3891.92, 3227.99, 1399.02, 1765.8, 972.73, 3700.52, 1978.37, 1795.93, 1780.79, 6343.94, 1074.85, 270.96, 956.12, 1943.68, 480.37, 914.5, 89.56, 963.62, 514.83, 148.83, 171.14, 704.5]
|
||||
})
|
||||
|
||||
dataMap.dataEstate = dataFormatter({
|
||||
2011: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92, 911.16, 402.51, 1838.14, 987, 634.67, 518.04, 3321.31, 465.68, 208.71, 396.28, 620.62, 160.3, 222.31, 17.44, 398.03, 134.25, 29.05, 79.01, 176.22],
|
||||
2010: [1006.52, 377.59, 697.79, 192, 309.25, 733.37, 212.32, 391.89, 1002.5, 2600.95, 1618.17, 532.17, 679.03, 340.56, 1622.15, 773.23, 564.41, 464.21, 2813.95, 405.79, 188.33, 266.38, 558.56, 139.64, 223.45, 14.54, 315.95, 110.02, 25.41, 60.53, 143.44],
|
||||
2009: [1062.47, 308.73, 612.4, 173.31, 286.65, 605.27, 200.14, 301.18, 1237.56, 2025.39, 1316.84, 497.94, 656.61, 305.9, 1329.59, 622.98, 546.11, 400.11, 2470.63, 348.98, 121.76, 229.09, 548.14, 136.15, 205.14, 13.28, 239.92, 101.37, 23.05, 47.56, 115.23],
|
||||
2008: [844.59, 227.88, 513.81, 166.04, 273.3, 500.81, 182.7, 244.47, 939.34, 1626.13, 1052.03, 431.27, 506.98, 281.96, 1104.95, 512.42, 526.88, 340.07, 2057.45, 282.96, 95.6, 191.21, 453.63, 104.81, 195.48, 15.08, 193.27, 93.8, 19.96, 38.85, 89.79],
|
||||
2007: [821.5, 183.44, 467.97, 134.12, 191.01, 410.43, 153.03, 225.81, 958.06, 1365.71, 981.42, 366.57, 511.5, 225.96, 953.69, 447.44, 409.65, 301.8, 2029.77, 239.45, 67.19, 196.06, 376.84, 93.19, 193.59, 13.24, 153.98, 83.52, 16.98, 29.49, 91.28],
|
||||
2006: [658.3, 156.64, 397.14, 117.01, 136.5, 318.54, 131.01, 194.7, 773.61, 1017.91, 794.41, 281.98, 435.22, 184.67, 786.51, 348.7, 294.73, 254.81, 1722.07, 192.2, 44.45, 158.2, 336.2, 80.24, 165.92, 11.92, 125.2, 73.21, 15.17, 25.53, 68.9],
|
||||
2005: [493.73, 122.67, 330.87, 106, 98.75, 256.77, 112.29, 163.34, 715.97, 799.73, 688.86, 231.66, 331.8, 171.88, 664.9, 298.19, 217.17, 215.63, 1430.37, 165.05, 38.2, 143.88, 286.23, 76.38, 148.69, 10.02, 108.62, 63.78, 14.1, 22.97, 55.79],
|
||||
2004: [436.11, 106.14, 231.08, 95.1, 73.81, 203.1, 97.93, 137.74, 666.3, 534.17, 587.83, 188.28, 248.44, 167.2, 473.27, 236.44, 204.8, 191.5, 1103.75, 122.52, 30.64, 129.12, 264.3, 68.3, 116.54, 5.8, 95.9, 56.84, 13, 20.78, 53.55],
|
||||
2003: [341.88, 92.31, 185.19, 78.73, 61.05, 188.49, 91.99, 127.2, 487.82, 447.47, 473.16, 162.63, 215.84, 138.02, 418.21, 217.58, 176.8, 186.49, 955.66, 100.93, 25.14, 113.69, 231.72, 59.86, 103.79, 4.35, 83.9, 48.09, 11.41, 16.85, 47.84],
|
||||
2002: [298.02, 73.04, 140.89, 65.83, 51.48, 130.94, 76.11, 118.7, 384.86, 371.09, 360.63, 139.18, 188.09, 125.27, 371.13, 199.31, 145.17, 165.29, 808.16, 82.83, 21.45, 90.48, 210.82, 53.49, 95.68, 3.42, 77.68, 41.52, 9.74, 13.46, 43.04]
|
||||
})
|
||||
|
||||
dataMap.dataFinancial = dataFormatter({
|
||||
2011: [2215.41, 756.5, 746.01, 519.32, 447.46, 755.57, 207.65, 370.78, 2277.4, 2600.11, 2730.29, 503.85, 862.41, 357.44, 1640.41, 868.2, 674.57, 501.09, 2916.13, 445.37, 105.24, 704.66, 868.15, 297.27, 456.23, 31.7, 432.11, 145.05, 62.56, 134.18, 288.77],
|
||||
2010: [1863.61, 572.99, 615.42, 448.3, 346.44, 639.27, 190.12, 304.59, 1950.96, 2105.92, 2326.58, 396.17, 767.58, 241.49, 1361.45, 697.68, 561.27, 463.16, 2658.76, 384.53, 78.12, 496.56, 654.7, 231.51, 375.08, 27.08, 384.75, 100.54, 54.53, 97.87, 225.2],
|
||||
2009: [1603.63, 461.2, 525.67, 361.64, 291.1, 560.2, 180.83, 227.54, 1804.28, 1596.98, 1899.33, 359.6, 612.2, 165.1, 1044.9, 499.92, 479.11, 402.57, 2283.29, 336.82, 65.73, 389.97, 524.63, 194.44, 351.74, 23.17, 336.21, 88.27, 45.63, 75.54, 198.87],
|
||||
2008: [1519.19, 368.1, 420.74, 290.91, 219.09, 455.07, 147.24, 177.43, 1414.21, 1298.48, 1653.45, 313.81, 497.65, 130.57, 880.28, 413.83, 393.05, 334.32, 1972.4, 249.01, 47.33, 303.01, 411.14, 151.55, 277.66, 22.42, 287.16, 72.49, 36.54, 64.8, 171.97],
|
||||
2007: [1302.77, 288.17, 347.65, 218.73, 148.3, 386.34, 126.03, 155.48, 1209.08, 1054.25, 1251.43, 223.85, 385.84, 101.34, 734.9, 302.31, 337.27, 260.14, 1705.08, 190.73, 34.43, 247.46, 359.11, 122.25, 168.55, 11.51, 231.03, 61.6, 27.67, 51.05, 149.22],
|
||||
2006: [982.37, 186.87, 284.04, 169.63, 108.21, 303.41, 100.75, 74.17, 825.2, 653.25, 906.37, 166.01, 243.9, 79.75, 524.94, 219.72, 174.99, 204.72, 899.91, 129.14, 16.37, 213.7, 299.5, 89.43, 143.62, 6.44, 152.25, 50.51, 23.69, 36.99, 99.25],
|
||||
2005: [840.2, 147.4, 213.47, 135.07, 72.52, 232.85, 83.63, 35.03, 675.12, 492.4, 686.32, 127.05, 186.12, 69.55, 448.36, 181.74, 127.32, 162.37, 661.81, 91.93, 13.16, 185.18, 262.26, 73.67, 130.5, 7.57, 127.58, 44.73, 20.36, 32.25, 80.34],
|
||||
2004: [713.79, 136.97, 209.1, 110.29, 55.89, 188.04, 77.17, 32.2, 612.45, 440.5, 523.49, 94.1, 171, 65.1, 343.37, 170.82, 118.85, 118.64, 602.68, 74, 11.56, 162.38, 236.5, 60.3, 118.4, 5.4, 90.1, 42.99, 19, 27.92, 70.3],
|
||||
2003: [635.56, 112.79, 199.87, 118.48, 55.89, 145.38, 73.15, 32.2, 517.97, 392.11, 451.54, 87.45, 150.09, 64.31, 329.71, 165.11, 107.31, 99.35, 534.28, 61.59, 10.68, 147.04, 206.24, 48.01, 105.48, 4.74, 77.87, 42.31, 17.98, 24.8, 64.92],
|
||||
2002: [561.91, 76.86, 179.6, 124.1, 48.39, 137.18, 75.45, 31.6, 485.25, 368.86, 347.53, 81.85, 138.28, 76.51, 310.07, 158.77, 96.95, 92.43, 454.65, 35.86, 10.08, 134.52, 183.13, 41.45, 102.39, 2.81, 67.3, 42.08, 16.75, 21.45, 52.18]
|
||||
})
|
||||
|
||||
this.chart.setOption({
|
||||
baseOption: {
|
||||
timeline: {
|
||||
axisType: 'category',
|
||||
autoPlay: true,
|
||||
playInterval: 1000,
|
||||
data: [
|
||||
'2002-01-01', '2003-01-01', '2004-01-01',
|
||||
{
|
||||
value: '2005-01-01',
|
||||
tooltip: {
|
||||
formatter: '{b} GDP达到一个高度'
|
||||
},
|
||||
symbol: 'diamond',
|
||||
symbolSize: 16
|
||||
},
|
||||
'2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
|
||||
{
|
||||
value: '2011-01-01',
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
return params.name + 'GDP达到又一个高度'
|
||||
}
|
||||
},
|
||||
symbol: 'diamond',
|
||||
symbolSize: 18
|
||||
}
|
||||
],
|
||||
label: {
|
||||
formatter: function (s) {
|
||||
return (new Date(s)).getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
subtext: '数据来自国家统计局'
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
x: 'right',
|
||||
data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
|
||||
selected: {
|
||||
'GDP': false, '金融': false, '房地产': false
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
grid: {
|
||||
top: 80,
|
||||
bottom: 100,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
return params.value.replace('\n', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
'type': 'category',
|
||||
'axisLabel': {
|
||||
'interval': 0,
|
||||
rotate: 45
|
||||
},
|
||||
'data': [
|
||||
'北京', '\n天津', '河北', '\n山西', '内蒙古', '\n辽宁', '吉林', '\n黑龙江',
|
||||
'上海', '\n江苏', '浙江', '\n安徽', '福建', '\n江西', '山东', '\n河南',
|
||||
'湖北', '\n湖南', '广东', '\n广西', '海南', '\n重庆', '四川', '\n贵州',
|
||||
'云南', '\n西藏', '陕西', '\n甘肃', '青海', '\n宁夏', '新疆'
|
||||
],
|
||||
splitLine: { show: false }
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'GDP（亿元）'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{ name: 'GDP', type: 'bar' },
|
||||
{ name: '金融', type: 'bar' },
|
||||
{ name: '房地产', type: 'bar' },
|
||||
{ name: '第一产业', type: 'bar' },
|
||||
{ name: '第二产业', type: 'bar' },
|
||||
{ name: '第三产业', type: 'bar' },
|
||||
{
|
||||
name: 'GDP占比',
|
||||
type: 'pie',
|
||||
center: ['75%', '35%'],
|
||||
radius: '28%',
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
options: [
|
||||
{
|
||||
title: { text: '2002全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2002'] },
|
||||
{ data: dataMap.dataFinancial['2002'] },
|
||||
{ data: dataMap.dataEstate['2002'] },
|
||||
{ data: dataMap.dataPI['2002'] },
|
||||
{ data: dataMap.dataSI['2002'] },
|
||||
{ data: dataMap.dataTI['2002'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2002sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2002sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2002sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2003全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2003'] },
|
||||
{ data: dataMap.dataFinancial['2003'] },
|
||||
{ data: dataMap.dataEstate['2003'] },
|
||||
{ data: dataMap.dataPI['2003'] },
|
||||
{ data: dataMap.dataSI['2003'] },
|
||||
{ data: dataMap.dataTI['2003'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2003sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2003sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2003sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2004全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2004'] },
|
||||
{ data: dataMap.dataFinancial['2004'] },
|
||||
{ data: dataMap.dataEstate['2004'] },
|
||||
{ data: dataMap.dataPI['2004'] },
|
||||
{ data: dataMap.dataSI['2004'] },
|
||||
{ data: dataMap.dataTI['2004'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2004sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2004sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2004sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2005全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2005'] },
|
||||
{ data: dataMap.dataFinancial['2005'] },
|
||||
{ data: dataMap.dataEstate['2005'] },
|
||||
{ data: dataMap.dataPI['2005'] },
|
||||
{ data: dataMap.dataSI['2005'] },
|
||||
{ data: dataMap.dataTI['2005'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2005sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2005sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2005sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2006全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2006'] },
|
||||
{ data: dataMap.dataFinancial['2006'] },
|
||||
{ data: dataMap.dataEstate['2006'] },
|
||||
{ data: dataMap.dataPI['2006'] },
|
||||
{ data: dataMap.dataSI['2006'] },
|
||||
{ data: dataMap.dataTI['2006'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2006sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2006sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2006sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2007全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2007'] },
|
||||
{ data: dataMap.dataFinancial['2007'] },
|
||||
{ data: dataMap.dataEstate['2007'] },
|
||||
{ data: dataMap.dataPI['2007'] },
|
||||
{ data: dataMap.dataSI['2007'] },
|
||||
{ data: dataMap.dataTI['2007'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2007sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2007sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2007sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2008全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2008'] },
|
||||
{ data: dataMap.dataFinancial['2008'] },
|
||||
{ data: dataMap.dataEstate['2008'] },
|
||||
{ data: dataMap.dataPI['2008'] },
|
||||
{ data: dataMap.dataSI['2008'] },
|
||||
{ data: dataMap.dataTI['2008'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2008sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2008sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2008sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2009全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2009'] },
|
||||
{ data: dataMap.dataFinancial['2009'] },
|
||||
{ data: dataMap.dataEstate['2009'] },
|
||||
{ data: dataMap.dataPI['2009'] },
|
||||
{ data: dataMap.dataSI['2009'] },
|
||||
{ data: dataMap.dataTI['2009'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2009sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2009sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2009sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2010全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2010'] },
|
||||
{ data: dataMap.dataFinancial['2010'] },
|
||||
{ data: dataMap.dataEstate['2010'] },
|
||||
{ data: dataMap.dataPI['2010'] },
|
||||
{ data: dataMap.dataSI['2010'] },
|
||||
{ data: dataMap.dataTI['2010'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2010sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2010sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2010sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: { text: '2011全国宏观经济指标' },
|
||||
series: [
|
||||
{ data: dataMap.dataGDP['2011'] },
|
||||
{ data: dataMap.dataFinancial['2011'] },
|
||||
{ data: dataMap.dataEstate['2011'] },
|
||||
{ data: dataMap.dataPI['2011'] },
|
||||
{ data: dataMap.dataSI['2011'] },
|
||||
{ data: dataMap.dataTI['2011'] },
|
||||
{
|
||||
data: [
|
||||
{ name: '第一产业', value: dataMap.dataPI['2011sum'] },
|
||||
{ name: '第二产业', value: dataMap.dataSI['2011sum'] },
|
||||
{ name: '第三产业', value: dataMap.dataTI['2011sum'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['展现', '点击', '访问', '咨询', '订单']
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: '漏斗图',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
// height: {totalHeight} - y - y2,
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 40, name: '咨询' },
|
||||
{ value: 20, name: '订单' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 100, name: '展现' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: [{ value: 50, name: '完成率' }]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日']
|
||||
const data = axisData.map(function (item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1))
|
||||
})
|
||||
const links = data.map(function (item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
}
|
||||
})
|
||||
links.pop()
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '笛卡尔坐标系上的 Graph'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: axisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2f4554'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
height: '50%',
|
||||
y: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'],
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: '15%'
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]].map(function (item) {
|
||||
return [item[1], item[0], item[2] || '-']
|
||||
}),
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { debounce } from '@/utils'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'Graph 简单示例'
|
||||
},
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '节点1',
|
||||
x: 100,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点2',
|
||||
x: 1000,
|
||||
y: 300
|
||||
}, {
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100
|
||||
}, {
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500
|
||||
}],
|
||||
// links: [],
|
||||
links: [{
|
||||
source: 0,
|
||||
target: 1,
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: { curveness: 0.2 }
|
||||
}
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点4'
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点4'
|
||||
}],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: [0, '30%'],
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: '直达', selected: true },
|
||||
{ value: 679, name: '营销广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['40%', '55%'],
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||||
backgroundColor: '#eee',
|
||||
borderColor: '#aaa',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
shadowBlur: 3,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowColor: '#999',
|
||||
padding: [0, 7],
|
||||
rich: {
|
||||
a: {
|
||||
color: '#999',
|
||||
lineHeight: 22,
|
||||
align: 'center'
|
||||
},
|
||||
abg: {
|
||||
backgroundColor: '#333',
|
||||
width: '100%',
|
||||
align: 'right',
|
||||
height: 22,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
hr: {
|
||||
borderColor: '#aaa',
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height: 0
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
lineHeight: 33
|
||||
},
|
||||
per: {
|
||||
color: '#eee',
|
||||
backgroundColor: '#334455',
|
||||
padding: [2, 4],
|
||||
borderRadius: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: '直达' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1048, name: '百度' },
|
||||
{ value: 251, name: '谷歌' },
|
||||
{ value: 147, name: '必应' },
|
||||
{ value: 102, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
series: {
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
focusNodeAdjacency: 'allEdges',
|
||||
data: [{
|
||||
name: 'a'
|
||||
}, {
|
||||
name: 'b'
|
||||
}, {
|
||||
name: 'a1'
|
||||
}, {
|
||||
name: 'a2'
|
||||
}, {
|
||||
name: 'b1'
|
||||
}, {
|
||||
name: 'c'
|
||||
}],
|
||||
links: [{
|
||||
source: 'a',
|
||||
target: 'a1',
|
||||
value: 5
|
||||
}, {
|
||||
source: 'a',
|
||||
target: 'a2',
|
||||
value: 3
|
||||
}, {
|
||||
source: 'b',
|
||||
target: 'b1',
|
||||
value: 8
|
||||
}, {
|
||||
source: 'a',
|
||||
target: 'b1',
|
||||
value: 3
|
||||
}, {
|
||||
source: 'b1',
|
||||
target: 'a1',
|
||||
value: 1
|
||||
}, {
|
||||
source: 'b1',
|
||||
target: 'c',
|
||||
value: 2
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const data = [
|
||||
[[28604, 77, 17096869, 'Australia', 1990], [31163, 77.4, 27662440, 'Canada', 1990], [1516, 68, 1154605773, 'China', 1990], [13670, 74.7, 10582082, 'Cuba', 1990], [28599, 75, 4986705, 'Finland', 1990], [29476, 77.1, 56943299, 'France', 1990], [31476, 75.4, 78958237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870601776, 'India', 1990], [29550, 79.1, 122249285, 'Japan', 1990], [2076, 67.9, 20194354, 'North Korea', 1990], [12087, 72, 42972254, 'South Korea', 1990], [24021, 75.4, 3397534, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 38195258, 'Poland', 1990], [19349, 69.6, 147568552, 'Russia', 1990], [10670, 67.3, 53994605, 'Turkey', 1990], [26424, 75.7, 57110117, 'United Kingdom', 1990], [37062, 75.4, 252847810, 'United States', 1990]],
|
||||
[[44056, 81.8, 23968973, 'Australia', 2015], [43294, 81.7, 35939927, 'Canada', 2015], [13334, 76.9, 1376048943, 'China', 2015], [21291, 78.5, 11389562, 'Cuba', 2015], [38923, 80.8, 5503457, 'Finland', 2015], [37599, 81.9, 64395345, 'France', 2015], [44053, 81.1, 80688545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311050527, 'India', 2015], [36162, 83.5, 126573481, 'Japan', 2015], [1390, 71.4, 25155317, 'North Korea', 2015], [34644, 80.7, 50293439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 38611794, 'Poland', 2015], [23038, 73.13, 143456918, 'Russia', 2015], [19360, 76.5, 78665830, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321773631, 'United States', 2015]]
|
||||
]
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '1990 与 2015 年各国家人均寿命与 GDP'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '1990',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const data = [{
|
||||
name: 'Grandpa',
|
||||
children: [{
|
||||
name: 'Uncle Leo',
|
||||
value: 15,
|
||||
children: [{
|
||||
name: 'Cousin Jack',
|
||||
value: 2
|
||||
}, {
|
||||
name: 'Cousin Mary',
|
||||
value: 5,
|
||||
children: [{
|
||||
name: 'Jackson',
|
||||
value: 2
|
||||
}]
|
||||
}, {
|
||||
name: 'Cousin Ben',
|
||||
value: 4
|
||||
}]
|
||||
}, {
|
||||
name: 'Father',
|
||||
value: 10,
|
||||
children: [{
|
||||
name: 'Me',
|
||||
value: 5
|
||||
}, {
|
||||
name: 'Brother Peter',
|
||||
value: 1
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: 'Nancy',
|
||||
children: [{
|
||||
name: 'Uncle Nike',
|
||||
children: [{
|
||||
name: 'Cousin Betty',
|
||||
value: 1
|
||||
}, {
|
||||
name: 'Cousin Jenny',
|
||||
value: 2
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
this.chart.setOption({
|
||||
series: {
|
||||
type: 'sunburst',
|
||||
data: data,
|
||||
radius: [0, '90%'],
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,0.2)',
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
|
||||
},
|
||||
|
||||
singleAxis: {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
axisTick: {},
|
||||
axisLabel: {},
|
||||
type: 'time',
|
||||
axisPointer: {
|
||||
animation: true,
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'themeRiver',
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.8)'
|
||||
}
|
||||
},
|
||||
data: [['2015/11/08', 10, 'DQ'], ['2015/11/09', 15, 'DQ'], ['2015/11/10', 35, 'DQ'],
|
||||
['2015/11/11', 38, 'DQ'], ['2015/11/12', 22, 'DQ'], ['2015/11/13', 16, 'DQ'],
|
||||
['2015/11/14', 7, 'DQ'], ['2015/11/15', 2, 'DQ'], ['2015/11/16', 17, 'DQ'],
|
||||
['2015/11/17', 33, 'DQ'], ['2015/11/18', 40, 'DQ'], ['2015/11/19', 32, 'DQ'],
|
||||
['2015/11/20', 26, 'DQ'], ['2015/11/21', 35, 'DQ'], ['2015/11/22', 40, 'DQ'],
|
||||
['2015/11/23', 32, 'DQ'], ['2015/11/24', 26, 'DQ'], ['2015/11/25', 22, 'DQ'],
|
||||
['2015/11/26', 16, 'DQ'], ['2015/11/27', 22, 'DQ'], ['2015/11/28', 10, 'DQ'],
|
||||
['2015/11/08', 35, 'TY'], ['2015/11/09', 36, 'TY'], ['2015/11/10', 37, 'TY'],
|
||||
['2015/11/11', 22, 'TY'], ['2015/11/12', 24, 'TY'], ['2015/11/13', 26, 'TY'],
|
||||
['2015/11/14', 34, 'TY'], ['2015/11/15', 21, 'TY'], ['2015/11/16', 18, 'TY'],
|
||||
['2015/11/17', 45, 'TY'], ['2015/11/18', 32, 'TY'], ['2015/11/19', 35, 'TY'],
|
||||
['2015/11/20', 30, 'TY'], ['2015/11/21', 28, 'TY'], ['2015/11/22', 27, 'TY'],
|
||||
['2015/11/23', 26, 'TY'], ['2015/11/24', 15, 'TY'], ['2015/11/25', 30, 'TY'],
|
||||
['2015/11/26', 35, 'TY'], ['2015/11/27', 42, 'TY'], ['2015/11/28', 42, 'TY'],
|
||||
['2015/11/08', 21, 'SS'], ['2015/11/09', 25, 'SS'], ['2015/11/10', 27, 'SS'],
|
||||
['2015/11/11', 23, 'SS'], ['2015/11/12', 24, 'SS'], ['2015/11/13', 21, 'SS'],
|
||||
['2015/11/14', 35, 'SS'], ['2015/11/15', 39, 'SS'], ['2015/11/16', 40, 'SS'],
|
||||
['2015/11/17', 36, 'SS'], ['2015/11/18', 33, 'SS'], ['2015/11/19', 43, 'SS'],
|
||||
['2015/11/20', 40, 'SS'], ['2015/11/21', 34, 'SS'], ['2015/11/22', 28, 'SS'],
|
||||
['2015/11/23', 26, 'SS'], ['2015/11/24', 37, 'SS'], ['2015/11/25', 41, 'SS'],
|
||||
['2015/11/26', 46, 'SS'], ['2015/11/27', 47, 'SS'], ['2015/11/28', 41, 'SS'],
|
||||
['2015/11/08', 10, 'QG'], ['2015/11/09', 15, 'QG'], ['2015/11/10', 35, 'QG'],
|
||||
['2015/11/11', 38, 'QG'], ['2015/11/12', 22, 'QG'], ['2015/11/13', 16, 'QG'],
|
||||
['2015/11/14', 7, 'QG'], ['2015/11/15', 2, 'QG'], ['2015/11/16', 17, 'QG'],
|
||||
['2015/11/17', 33, 'QG'], ['2015/11/18', 40, 'QG'], ['2015/11/19', 32, 'QG'],
|
||||
['2015/11/20', 26, 'QG'], ['2015/11/21', 35, 'QG'], ['2015/11/22', 40, 'QG'],
|
||||
['2015/11/23', 32, 'QG'], ['2015/11/24', 26, 'QG'], ['2015/11/25', 22, 'QG'],
|
||||
['2015/11/26', 16, 'QG'], ['2015/11/27', 22, 'QG'], ['2015/11/28', 10, 'QG'],
|
||||
['2015/11/08', 10, 'SY'], ['2015/11/09', 15, 'SY'], ['2015/11/10', 35, 'SY'],
|
||||
['2015/11/11', 38, 'SY'], ['2015/11/12', 22, 'SY'], ['2015/11/13', 16, 'SY'],
|
||||
['2015/11/14', 7, 'SY'], ['2015/11/15', 2, 'SY'], ['2015/11/16', 17, 'SY'],
|
||||
['2015/11/17', 33, 'SY'], ['2015/11/18', 40, 'SY'], ['2015/11/19', 32, 'SY'],
|
||||
['2015/11/20', 26, 'SY'], ['2015/11/21', 35, 'SY'], ['2015/11/22', 4, 'SY'],
|
||||
['2015/11/23', 32, 'SY'], ['2015/11/24', 26, 'SY'], ['2015/11/25', 22, 'SY'],
|
||||
['2015/11/26', 16, 'SY'], ['2015/11/27', 22, 'SY'], ['2015/11/28', 10, 'SY'],
|
||||
['2015/11/08', 10, 'DD'], ['2015/11/09', 15, 'DD'], ['2015/11/10', 35, 'DD'],
|
||||
['2015/11/11', 38, 'DD'], ['2015/11/12', 22, 'DD'], ['2015/11/13', 16, 'DD'],
|
||||
['2015/11/14', 7, 'DD'], ['2015/11/15', 2, 'DD'], ['2015/11/16', 17, 'DD'],
|
||||
['2015/11/17', 33, 'DD'], ['2015/11/18', 4, 'DD'], ['2015/11/19', 32, 'DD'],
|
||||
['2015/11/20', 26, 'DD'], ['2015/11/21', 35, 'DD'], ['2015/11/22', 40, 'DD'],
|
||||
['2015/11/23', 32, 'DD'], ['2015/11/24', 26, 'DD'], ['2015/11/25', 22, 'DD'],
|
||||
['2015/11/26', 16, 'DD'], ['2015/11/27', 22, 'DD'], ['2015/11/28', 10, 'DD']]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div id="digital-flop2">
|
||||
<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:80px;height:100px;fontSize: 100px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.digitalFlopData = [
|
||||
|
||||
{
|
||||
title: '入库完成率',
|
||||
number: {
|
||||
content: '40%',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#3de7c9',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 40
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '出库完成率',
|
||||
number: {
|
||||
content: '20%',
|
||||
textAlign: 'center',
|
||||
|
||||
style: {
|
||||
fill: '#00baff',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 40
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
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-flop2 {
|
||||
position: relative;
|
||||
height: 30%;
|
||||
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: 50%;
|
||||
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: 40px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size:20px;
|
||||
margin-left: 0px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="cc-cc1" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 3000)
|
||||
setInterval(this.getListData, 565000)
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/inOutDay',{
|
||||
methodType:11
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
var jsonString = JSON.stringify(res.data.data.config);
|
||||
var jsObject = JSON.parse(jsonString)
|
||||
console.log(jsObject)
|
||||
this.chart.setOption(jsObject)
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.cc-cc1 {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div class="right-chart-5">
|
||||
|
||||
<dv-charts :option="option" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightChart2',
|
||||
data () {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: '成绩',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 17,
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bottom'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系列A', '系列B']
|
||||
},
|
||||
xAxis: {
|
||||
name: '第二周',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineWidth: 1
|
||||
},
|
||||
nameTextStyle: {
|
||||
fill: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
axisLine: {
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '销售额',
|
||||
data: 'value',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineWidth: 1
|
||||
},
|
||||
nameTextStyle: {
|
||||
fill: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
axisLine: {
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
style: {
|
||||
fontSize: 14,
|
||||
stroke: '#fff',
|
||||
fontWeight: 2,
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '系列A',
|
||||
data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系列B',
|
||||
data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.right-chart-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<div class="center-cmp">
|
||||
|
||||
<div class="cc-details">
|
||||
<div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
|
||||
<span>当月入库</span>
|
||||
</div>
|
||||
<div style="width:20%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
|
||||
</div>
|
||||
<div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
|
||||
<span>当月出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cc-header">
|
||||
<div style="width:40%;height:50px; float: left;display: flex" >
|
||||
<div class="card">{{r1}}</div>
|
||||
<div class="card">{{r2}}</div>
|
||||
<div class="card">{{r3}}</div>
|
||||
<div class="card">{{r4}}</div>
|
||||
<div class="card">{{r5}}</div>
|
||||
</div>
|
||||
<div style="width:40%;height:50px; float: left;display: flex" >
|
||||
<div class="card">{{c1}}</div>
|
||||
<div class="card">{{c2}}</div>
|
||||
<div class="card">{{c3}}</div>
|
||||
<div class="card">{{c4}}</div>
|
||||
<div class="card">{{c5}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cc-details">
|
||||
|
||||
</div>
|
||||
<div class="cc-main-container">
|
||||
<dv-active-ring-chart class="ccmc-middle" :config="config1" />
|
||||
<dv-active-ring-chart class="ccmc-middle" :config="config2" />
|
||||
|
||||
</div>
|
||||
<div class="cc-details">
|
||||
<div style="width:50%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
|
||||
<span>当日入库</span>
|
||||
</div>
|
||||
<div style="width:50%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
|
||||
<span>当日出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: [],
|
||||
config2: [],
|
||||
r1:'0',
|
||||
r2:'0',
|
||||
r3:'0',
|
||||
r4:'0',
|
||||
r5:'0',
|
||||
c1:'0',
|
||||
c2:'0',
|
||||
c3:'0',
|
||||
c4:'0',
|
||||
c5:'0'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
this.getListData2()
|
||||
this.getListData3()
|
||||
}, 2500)
|
||||
|
||||
setInterval(this.getListData, 535000)
|
||||
setInterval(this.getListData2, 545000)
|
||||
setInterval(this.getListData3, 555000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/inMonth',{
|
||||
methodType:7
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
this.config1 = res.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
},
|
||||
getListData2 () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/outMonth',{
|
||||
methodType:8
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
this.config2 = res.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
},
|
||||
getListData3 () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/inOutForMonth',{
|
||||
methodType:6
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
var jsonString = JSON.stringify(res.data);
|
||||
var jsObject = JSON.parse(jsonString)
|
||||
this.r1 = jsObject.r1
|
||||
this.r2 = jsObject.r2
|
||||
this.r3 = jsObject.r3
|
||||
this.r4 = jsObject.r4
|
||||
|
||||
this.c1 = jsObject.c1
|
||||
this.c2 = jsObject.c2
|
||||
this.c3 = jsObject.c3
|
||||
this.c4 = jsObject.c4
|
||||
|
||||
this.r5 = jsObject.r5
|
||||
this.c5 = jsObject.c5
|
||||
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-cmp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.cc-header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
.card {
|
||||
background-color: rgba(4,49,128,.1);
|
||||
color: #ffffff;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
.cc-details {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
.cc-main-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.ccmc-middle {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
.active-ring-name {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
.ccmc-middle2 {
|
||||
width: 50%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
cc-main-container2 {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.ccmc-middle2 {
|
||||
width: 50%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.label-tag {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="label-tag">
|
||||
<template v-if="mergedConfig">
|
||||
<div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
|
||||
{{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'LabelTag',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Label data
|
||||
* @type {Array<String>}
|
||||
* @default data = []
|
||||
* @example data = ['label1', 'label2']
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Label color (Hex|Rgb|Rgba|color keywords)
|
||||
* @type {Array<String>}
|
||||
* @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
|
||||
* @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
|
||||
},
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { mergeConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { mergeConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.label-tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.label-item {
|
||||
margin: 5px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<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:80px;height:50px;fontSize: 5px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
console.log('123123213123131')
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: [
|
||||
{
|
||||
title: '',
|
||||
number: {
|
||||
content: '入库',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '当日任务',
|
||||
number: {
|
||||
number: 0,
|
||||
content: '0',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '已完成',
|
||||
number: {
|
||||
number: 0,
|
||||
content: '0',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 500)
|
||||
setInterval(this.getListData, 605000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/inForDay',{
|
||||
methodType:1
|
||||
})
|
||||
.then(res => {
|
||||
this.digitalFlopData = res.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: 25%;
|
||||
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:10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size:10px;
|
||||
margin-left: 0px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<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:80px;height:50px;fontSize: 5px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: [
|
||||
{
|
||||
title: '',
|
||||
number: {
|
||||
content: '出库',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '当日任务',
|
||||
number: {
|
||||
number: 0,
|
||||
content: '0',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '已完成',
|
||||
number: {
|
||||
number: 0,
|
||||
content: '0',
|
||||
textAlign: 'center',
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 1000)
|
||||
|
||||
setInterval(this.getListData, 505000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/outForDay',{
|
||||
methodType:2
|
||||
})
|
||||
.then(res => {
|
||||
this.digitalFlopData = res.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: 25%;
|
||||
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:10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size:10px;
|
||||
margin-left: 0px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div id="digital-flop2">
|
||||
<div class="cc-main-container3">
|
||||
<dv-charts class="ccmc-middle3" :option="config" />
|
||||
<dv-charts class="ccmc-middle3" :option="config2" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
title: {
|
||||
text: '入库完成率',
|
||||
offset: [0, -30],
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 17,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bottom'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
data: [ { name: 'itemA', value: 0, gradient: ['#2fded6'] } ],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
pointer: {
|
||||
show: true
|
||||
},
|
||||
details: {
|
||||
show: true,
|
||||
offset: [0, 60],
|
||||
formatter: '{value}%',
|
||||
style: {
|
||||
fill: '#2fded6',
|
||||
fontSize: 27,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bottom'
|
||||
}
|
||||
},
|
||||
animationCurve: 'easeOutBack'
|
||||
}
|
||||
]
|
||||
},
|
||||
config2: {
|
||||
title: {
|
||||
text: '出库完成率',
|
||||
offset: [0, -30],
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 17,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bottom'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
data: [ { name: 'itemA', value: 0, gradient: ['#03c2fd'] } ],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
pointer: {
|
||||
show: true
|
||||
},
|
||||
details: {
|
||||
show: true,
|
||||
offset: [0, 60],
|
||||
formatter: '{value}%',
|
||||
style: {
|
||||
fill: '#03c2fd',
|
||||
fontSize: 27,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bottom'
|
||||
}
|
||||
},
|
||||
animationCurve: 'easeOutBack'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
this.getListData2()
|
||||
}, 1500)
|
||||
|
||||
setInterval(this.getListData, 510000)
|
||||
setInterval(this.getListData2, 515000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/returnWmsTask',{
|
||||
methodType:3
|
||||
})
|
||||
.then(res => {
|
||||
this.config = res.data.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
},
|
||||
getListData2 () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/returnWmsTask',{
|
||||
methodType:4
|
||||
})
|
||||
.then(res => {
|
||||
this.config2 = res.data.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#digital-flop2 {
|
||||
position: relative;
|
||||
height: 30%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
|
||||
.cc-main-container3 {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding-top: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.ccmc-middle3 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
.active-ring-name {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="bottom-charts">
|
||||
<div class="bc-chart-item2">
|
||||
<div class="bcci-header2">库满度</div>
|
||||
<dv-capsule-chart :config="config1" style="width: 410px;height: 220px;padding: 20px" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 2000)
|
||||
setInterval(this.getListData, 525000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/kmdView',{
|
||||
methodType:5
|
||||
})
|
||||
.then(res => {
|
||||
console.log("--------------------------------------------------------------")
|
||||
console.log(res)
|
||||
this.config1 = res.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-charts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bc-chart-item2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bcci-header2 {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
|
||||
<template>
|
||||
<div class="m-video" :class="{'u-video-hover': !hidden}" :style="`width: ${width}px; height: ${height}px;`">
|
||||
<video
|
||||
ref="veo"
|
||||
:style="`object-fit: ${zoom};`"
|
||||
:src="src"
|
||||
:poster="veoPoster"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:autoplay="autoplay"
|
||||
:controls="!originPlay&&controls"
|
||||
:loop="loop"
|
||||
:muted="autoplay || muted"
|
||||
:preload="preload"
|
||||
crossorigin="anonymous"
|
||||
@loadeddata="poster ? () => false : getPoster()"
|
||||
@pause="showPlay ? onPause() : () => false"
|
||||
@playing="showPlay ? onPlaying() : () => false"
|
||||
@click.prevent.once="onPlay"
|
||||
v-bind="$attrs">
|
||||
您的浏览器不支持video标签。
|
||||
</video>
|
||||
<svg v-show="originPlay || showPlay" class="u-play" :class="{'hidden': hidden}" :style="`width: ${playWidth}px; height: ${playWidth}px;`" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 12L9.75 8.75V15.25L15.25 12Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Video',
|
||||
props: {
|
||||
src: { // 视频文件url，必传，支持网络地址 https 和相对地址 require('@/assets/files/Bao.mp4')
|
||||
type: String,
|
||||
required: true,
|
||||
default: require('@/assets/test1.mp4')
|
||||
},
|
||||
poster: { // 视频封面url，支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')
|
||||
type: String,
|
||||
default: require('@/assets/1.jpg')
|
||||
},
|
||||
second: { // 在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面
|
||||
type: Number,
|
||||
default: 0.5
|
||||
},
|
||||
width: { // 视频播放器宽度
|
||||
type: Number,
|
||||
default: 400
|
||||
},
|
||||
height: { // 视频播放器高度
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
/*
|
||||
参考 MDN 自动播放指南：https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide
|
||||
Autoplay 功能
|
||||
据新政策，媒体内容将在满足以下至少一个的条件下自动播放：
|
||||
1.音频被静音或其音量设置为 0
|
||||
2.用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
|
||||
3.网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
|
||||
4.自动播放策略应用到<iframe>或者其文档上
|
||||
autoplay：由于目前在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，
|
||||
已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放！
|
||||
解决方法：设置视频 autoplay 时，视频必须设置为静音 muted: true 即可实现自动播放，
|
||||
然后用户可以使用控制栏开启声音，类似某宝商品自动播放的宣传视频逻辑
|
||||
*/
|
||||
autoplay: { // 视频就绪后是否马上播放
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
controls: { // 是否向用户显示控件，比如进度条，全屏
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loop: { // 视频播放完成后，是否循环播放
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
muted: { // 是否静音
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
preload: { // 是否在页面加载后载入视频，如果设置了autoplay属性，则preload将被忽略；
|
||||
type: String,
|
||||
default: 'auto' // auto:一旦页面加载，则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频
|
||||
},
|
||||
showPlay: { // 播放暂停时是否显示播放器中间的暂停图标
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
playWidth: { // 中间播放暂停按钮的边长
|
||||
type: Number,
|
||||
default: 96
|
||||
},
|
||||
zoom: { // video的poster默认图片和视频内容缩放规则
|
||||
type: String,
|
||||
default: 'contain' // none:(默认)保存原有内容，不进行缩放; fill:不保持原有比例，内容拉伸填充整个内容容器; contain:保存原有比例，内容以包含方式缩放; cover:保存原有比例，内容以覆盖方式缩放
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
veoPoster: this.poster,
|
||||
originPlay: true,
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.autoplay) {
|
||||
this.hidden = true
|
||||
this.originPlay = false
|
||||
}
|
||||
/*
|
||||
自定义设置播放速度，经测试：
|
||||
在vue2中需设置：this.$refs.veo.playbackRate = 2
|
||||
在vue3中需设置：veo.value.defaultPlaybackRate = 2
|
||||
*/
|
||||
// this.$refs.veo.playbackRate = 2
|
||||
},
|
||||
methods: {
|
||||
/*
|
||||
loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发
|
||||
preload为none时不会触发
|
||||
*/
|
||||
getPoster () { // 在未设置封面时，自动获取视频0.5s对应帧作为视频封面
|
||||
// 由于不少视频第一帧为黑屏，故设置视频开始播放时间为0.5s，即取该时刻帧作为封面图
|
||||
this.$refs.veo.currentTime = this.second
|
||||
// 创建canvas元素
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
// canvas画图
|
||||
canvas.width = this.$refs.veo.videoWidth
|
||||
canvas.height = this.$refs.veo.videoHeight
|
||||
ctx.drawImage(this.$refs.veo, 0, 0, canvas.width, canvas.height)
|
||||
// 把canvas转成base64编码格式
|
||||
this.veoPoster = canvas.toDataURL('image/png')
|
||||
},
|
||||
onPlay () {
|
||||
if (this.originPlay) {
|
||||
this.$refs.veo.currentTime = 0
|
||||
this.originPlay = false
|
||||
}
|
||||
if (this.autoplay) {
|
||||
this.$refs.veo.pause()
|
||||
} else {
|
||||
this.hidden = true
|
||||
this.$refs.veo.play()
|
||||
}
|
||||
},
|
||||
onPause () {
|
||||
this.hidden = false
|
||||
},
|
||||
onPlaying () {
|
||||
this.hidden = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
.m-video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: #ffffff00;
|
||||
cursor: pointer;
|
||||
.u-play {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
fill: none;
|
||||
color: #FFF;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity .3s;
|
||||
path {
|
||||
stroke: #FFF;
|
||||
}
|
||||
}
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.u-video-hover {
|
||||
&:hover {
|
||||
.u-play {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="cc-cc32" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { debounce } from '@/utils';
|
||||
|
||||
require( 'echarts/theme/macarons' ) // echarts theme
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 3500)
|
||||
|
||||
setInterval(this.getListData, 575000)
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/zwwms/services/rest/rpcService/returnWmsTask',{
|
||||
methodType:12
|
||||
})
|
||||
.then(res => {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
var jsonString = JSON.stringify(res.data.data.config);
|
||||
console.log(jsonString)
|
||||
var jsObject = JSON.parse(jsonString)
|
||||
this.chart.setOption(jsObject)
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.cc-cc32 {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div className="bottom-right-table-3">
|
||||
<dv-scroll-board :config="config1" style="width: 410px;height: 400px;padding: 10px"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: {
|
||||
header: ['名称', '数量'],
|
||||
data:[
|
||||
['<span style="font-size: 24px">库存量</span>', '<span style="font-size: 24px">0</span>'],
|
||||
['<span style="font-size: 24px">料号行</span>', '<span style="font-size: 24px">0</span>']
|
||||
],
|
||||
rowNum: 6,
|
||||
headerBGC: '#000fff82',
|
||||
oddRowBGC: '#ededed33',
|
||||
evenRowBGC: '#ededed33',
|
||||
headerHeight:60,
|
||||
style: {
|
||||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 3500)
|
||||
|
||||
setInterval(this.getListData, 585000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api/api/screeView/inventoryView',{
|
||||
methodType:9
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
this.config1 = res.data.data.config
|
||||
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-right-table-3 {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
margin: 0 -5px;
|
||||
|
||||
.border-box-content {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-name {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-scroll-board {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
<div class="main-header">
|
||||
<div class="mh-left"></div>
|
||||
<div class="mh-middle">荆州洗衣机数据可视化平台</div>
|
||||
<div class="mh-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-border-box-7 class="main-container">
|
||||
<div class="left-chart-container">
|
||||
<dv-border-box-8 class="rmctc-left-container">
|
||||
|
||||
<Left-Chart-1 />
|
||||
<Left-Chart-2 />
|
||||
<Left-Chart-4 />
|
||||
</dv-border-box-8>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="center-main-container">
|
||||
<div class="rmc-top-container">
|
||||
<dv-border-box-8 class="rmctc-left-container">
|
||||
|
||||
<Center-Cmp />
|
||||
|
||||
</dv-border-box-8>
|
||||
</div>
|
||||
|
||||
<dv-border-box-8 class="rmc-bottom-container">
|
||||
|
||||
<BarChart />
|
||||
|
||||
</dv-border-box-8>
|
||||
</div>
|
||||
|
||||
<div class="right-main-container">
|
||||
<div class="right-top-container">
|
||||
|
||||
<div class="rmctc-right-container">
|
||||
<dv-border-box-8 class="rmctc-chart-1">
|
||||
|
||||
<Right-Chart-1/>
|
||||
|
||||
</dv-border-box-8>
|
||||
|
||||
<dv-border-box-8 class="rmctc-chart-2" :reverse="true">
|
||||
|
||||
<Right-Chart-3 />
|
||||
|
||||
</dv-border-box-8>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-7>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftChart1 from './LeftChart1'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
import LeftChart4 from './LeftChart4'
|
||||
import CenterCmp from './CenterCmp'
|
||||
import RightChart1 from './RightChart1'
|
||||
import RightChart2 from './RightChart2'
|
||||
import BarChart from './BarChart'
|
||||
import RightChart3 from '@/components/datav/RightChart3'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
LeftChart1,
|
||||
LeftChart2,
|
||||
LeftChart4,
|
||||
CenterCmp,
|
||||
RightChart1,
|
||||
RightChart2,
|
||||
RightChart3,
|
||||
BarChart
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url('./img/bg3.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.mh-left {
|
||||
font-size: 20px;
|
||||
color: rgb(1,134,187);
|
||||
|
||||
a:visited {
|
||||
color: rgb(1,134,187);
|
||||
}
|
||||
}
|
||||
|
||||
.mh-middle {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mh-left, .mh-right {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(~"100% - 100px");
|
||||
|
||||
.border-box-content {
|
||||
padding: 0px;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.left-chart-container {
|
||||
padding: 10px;
|
||||
width: 30%;
|
||||
box-sizing: inherit;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.center-main-container {
|
||||
width: 40%;
|
||||
padding: 10px;
|
||||
box-sizing: inherit;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.right-main-container {
|
||||
width: 30%;
|
||||
padding: 10px;
|
||||
box-sizing: inherit;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.left-top-container {
|
||||
height: 65%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left-bottom-container {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
}
|
||||
.rmc-top-container {
|
||||
height: 65%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rmc-bottom-container {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.right-top-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rmctc-left-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rmctc-right-container {
|
||||
width: 100%;
|
||||
}
|
||||
.rmctc-chart-1 {
|
||||
height: 40%;
|
||||
}
|
||||
.rmctc-chart-2 {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated () {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated () {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent () {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent () {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler (e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent () {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent () {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div className="bottom-right-table-3">
|
||||
<dv-scroll-board :config="config1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: {
|
||||
"oddRowBGC": "#ededed33",
|
||||
"data": [
|
||||
["<span style=\"font-size: 24px\">201<\/span>", "<span style=\"font-size: 24px\">0<\/span>", "<span style=\"font-size: 24px\">0<\/span>", "<span style=\"font-size: 24px\">0%<\/span>"],
|
||||
["<span style=\"font-size: 24px\">202<\/span>", "<span style=\"font-size: 24px\">0<\/span>", "<span style=\"font-size: 24px\">0<\/span>", "<span style=\"font-size: 24px\">0%<\/span>"]
|
||||
],
|
||||
"rowNum": 25,
|
||||
"evenRowBGC": "#ededed33",
|
||||
"header": ["工作站", "任务数", "已完成", "占比"],
|
||||
"headerBGC": "#000fff82",
|
||||
"headerHeight": 60
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
this.getListData()
|
||||
|
||||
setInterval(this.getListData, 600000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/syncIntoOrder', {
|
||||
methodType: 'K3'
|
||||
})
|
||||
.then(res => {
|
||||
this.config1 = res.data.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-right-table-3 {
|
||||
margin: 0 -5px;
|
||||
|
||||
.dv-scroll-board {
|
||||
height: calc(~"100% - 60px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
<div class="main-header">
|
||||
<div class="mh-left"></div>
|
||||
<div class="mh-middle">中微数据可视化平台</div>
|
||||
<div class="mh-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-border-box-7 class="main-container">
|
||||
<div class="left-chart-container">
|
||||
<dv-border-box-8 class="left-chart-container-1">
|
||||
|
||||
<LeftChar1/>
|
||||
|
||||
</dv-border-box-8>
|
||||
|
||||
|
||||
<dv-border-box-8 class="left-chart-container-2">
|
||||
<span style="font-size: 24px;color: aquamarine" >   插单/加急/其它出库</span>
|
||||
<LeftChar2/>
|
||||
</dv-border-box-8>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="center-main-container">
|
||||
|
||||
|
||||
<dv-border-box-8 class="center-chart-container-1">
|
||||
|
||||
<CenterChar1 />
|
||||
|
||||
</dv-border-box-8>
|
||||
</div>
|
||||
|
||||
<div class="right-main-container">
|
||||
|
||||
<dv-border-box-8 class="right-chart-container-1">
|
||||
<span style="font-size: 24px;color: aquamarine" >   合单任务</span>
|
||||
<RightChar1 />
|
||||
|
||||
</dv-border-box-8>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dv-border-box-7>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import RightChar1 from '@/components/datav2/RightChar1'
|
||||
import LeftChar1 from '@/components/datav2/LeftChar1'
|
||||
import LeftChar2 from '@/components/datav2/LeftChar2'
|
||||
import CenterChar1 from '@/components/datav2/CenterChar1'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
LeftChar1,
|
||||
LeftChar2,
|
||||
CenterChar1,
|
||||
RightChar1
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url('./img/bg2.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.mh-left {
|
||||
font-size: 20px;
|
||||
color: rgb(1,134,187);
|
||||
|
||||
a:visited {
|
||||
color: rgb(1,134,187);
|
||||
}
|
||||
}
|
||||
|
||||
.mh-middle {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mh-left, .mh-right {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(~"100% - 100px");
|
||||
|
||||
.border-box-content {
|
||||
padding: 0px;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.left-chart-container {
|
||||
width: 30%;
|
||||
box-sizing: inherit;
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.left-chart-container-1{
|
||||
|
||||
height: 40%;
|
||||
}
|
||||
.left-chart-container-2{
|
||||
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.center-main-container {
|
||||
width: 40%;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
box-sizing: inherit;
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.center-chart-container-1{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-main-container {
|
||||
width: 30%;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
box-sizing: inherit;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.right-chart-container-1{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div className="bottom-right-table-3">
|
||||
<dv-scroll-board :config="config1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: {
|
||||
header: ['名称', '代收','已入库'],
|
||||
data:[
|
||||
['<span style="font-size: 24px">料箱区</span>', '<span style="font-size: 24px">0</span>','<span style="font-size: 24px">0</span>'],
|
||||
['<span style="font-size: 24px">货架去</span>', '<span style="font-size: 24px">0</span>','<span style="font-size: 24px">0</span>'],
|
||||
],
|
||||
rowNum: 6,
|
||||
headerBGC: '#000fff82',
|
||||
oddRowBGC: '#ededed33',
|
||||
evenRowBGC: '#ededed33',
|
||||
headerHeight:60,
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 1000)
|
||||
setInterval(this.getListData, 60000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/syncIntoOrder',{
|
||||
methodType:'K1'
|
||||
})
|
||||
.then(res => {
|
||||
this.config1 = res.data.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-right-table-3 {
|
||||
margin: 0 -5px;
|
||||
|
||||
.dv-scroll-board {
|
||||
height: calc(~"100% - 60px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div className="bottom-right-table-3">
|
||||
<dv-scroll-board :config="config1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: {
|
||||
"oddRowBGC": "#ededed33",
|
||||
"data": [
|
||||
["<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>"],
|
||||
["<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>"]
|
||||
],
|
||||
"rowNum": 10,
|
||||
"evenRowBGC": "#ededed33",
|
||||
"header": ["任务号", "工作站", "类型"],
|
||||
"headerBGC": "#000fff82",
|
||||
"columnWidth": [200],
|
||||
"headerHeight": 60
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 2000)
|
||||
|
||||
setInterval(this.getListData, 55000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/syncIntoOrder',{
|
||||
methodType:'K2'
|
||||
})
|
||||
.then(res => {
|
||||
this.config1 = res.data.data
|
||||
//this.list = JSON.stringify(res.data.data)
|
||||
//let data2=JSON.parse(this.list);
|
||||
//console.log(this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-right-table-3 {
|
||||
margin: 0 -5px;
|
||||
|
||||
.dv-scroll-board {
|
||||
height: calc(~"100% - 600px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div className="bottom-right-table-3">
|
||||
<dv-scroll-board :config="config1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
config1: {
|
||||
"oddRowBGC": "#ededed33",
|
||||
"data": [
|
||||
["<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>"],
|
||||
["<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>", "<span style=\"font-size: 24px\">---<\/span>"]
|
||||
],
|
||||
"rowNum": 20,
|
||||
"evenRowBGC": "#ededed33",
|
||||
"header": ["子任务", "工作站", "位置"],
|
||||
"headerBGC": "#000fff82",
|
||||
"headerHeight": 60
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('123123213123131')
|
||||
setTimeout(() => {
|
||||
this.getListData()
|
||||
}, 3500)
|
||||
|
||||
setInterval(this.getListData, 35000)
|
||||
},
|
||||
methods: {
|
||||
getListData () {
|
||||
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
|
||||
this.$axios.post('/api//zwwms/services/rest/rpcService/syncIntoOrder', {
|
||||
methodType: 'K4'
|
||||
})
|
||||
.then(res => {
|
||||
this.config1 = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-right-table-3 {
|
||||
margin: 0 -5px;
|
||||
|
||||
.dv-scroll-board {
|
||||
height: calc(~"100% - 60px");
|
||||
width: calc(~"100% - 60px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,55 @@
|
|||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated () {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated () {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent () {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent () {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler (e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent () {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent () {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import axios from 'axios'
|
||||
import './assets/common.less'
|
||||
import router from './router/routers'
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
//axios.defaults.baseURL = '/api/'
|
||||
|
||||
|
||||
// 原型上挂载axios， 所有组件都可以通过this.$http来请求
|
||||
Vue.prototype.$axios = axios
|
||||
|
||||
|
||||
Vue.use(dataV)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export const constantRouterMap = [
|
||||
{ path: '/index',
|
||||
meta: { title: '登录', noCache: true },
|
||||
component: (resolve) => require(['@/components/datav/index'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{ path: '/dashboard',
|
||||
meta: { title: '登录', noCache: true },
|
||||
component: (resolve) => require(['@/components/datav2/Dashboard'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{ path: '/',
|
||||
meta: { title: '登录', noCache: true },
|
||||
component: (resolve) => require(['@/components/datav/index'], resolve),
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
export default new Router({
|
||||
mode: 'hash',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRouterMap
|
||||
})
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import Cookies from 'js-cookie'
|
||||
import Config from '@/settings'
|
||||
|
||||
const TokenKey = Config.TokenKey
|
||||
|
||||
export function getToken () {
|
||||
// return 'eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIxYWZjMjNkMDIzMGY0NzcxOGI2MzNlYjBiYjMyYzNlZCIsInVzZXIiOiJ0ZXN0Iiwic3ViIjoidGVzdCJ9.VJx2Jf_MaWQ_XeGCmhiYrlXQnSUtQXZuUAzerm6CcChq9kU7tXOh946fIDn883LzTFhuWR-Qt4FMlohzA24AUQ'
|
||||
return Cookies.get(TokenKey)
|
||||
}
|
||||
|
||||
export function setToken (token, rememberMe) {
|
||||
if (rememberMe) {
|
||||
return Cookies.set(TokenKey, token, { expires: Config.tokenCookieExpires })
|
||||
} else return Cookies.set(TokenKey, token)
|
||||
}
|
||||
|
||||
export function removeToken () {
|
||||
return Cookies.remove(TokenKey)
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import Vue from 'vue'
|
||||
import Clipboard from '@/utils/clipboard'
|
||||
|
||||
function clipboardSuccess () {
|
||||
Vue.prototype.$message({
|
||||
message: 'Copy successfully',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
function clipboardError () {
|
||||
Vue.prototype.$message({
|
||||
message: 'Copy failed',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
|
||||
export default function handleClipboard (text, event) {
|
||||
const clipboard = new Clipboard(event.target, {
|
||||
text: () => text
|
||||
})
|
||||
clipboard.on('success', () => {
|
||||
clipboardSuccess()
|
||||
clipboard.off('error')
|
||||
clipboard.off('success')
|
||||
clipboard.destroy()
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
clipboardError()
|
||||
clipboard.off('error')
|
||||
clipboard.off('success')
|
||||
clipboard.destroy()
|
||||
})
|
||||
clipboard.onClick(event)
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* Date对象的补充函数，包括类似Python中的strftime()
|
||||
* 阿债 https://gitee.com/azhai/datetime.js
|
||||
*/
|
||||
|
||||
Date.prototype.toMidnight = function() {
|
||||
this.setHours(0)
|
||||
this.setMinutes(0)
|
||||
this.setSeconds(0)
|
||||
this.setMilliseconds(0)
|
||||
return this
|
||||
}
|
||||
|
||||
Date.prototype.daysAgo = function(days, midnight) {
|
||||
days = days ? days - 0 : 0
|
||||
const date = new Date(this.getTime() - days * 8.64E7)
|
||||
return midnight ? date.toMidnight() : date
|
||||
}
|
||||
|
||||
Date.prototype.monthBegin = function(offset) {
|
||||
offset = offset ? offset - 0 : 0
|
||||
const days = this.getDate() - 1 - offset
|
||||
return this.daysAgo(days, true)
|
||||
}
|
||||
|
||||
Date.prototype.quarterBegin = function() {
|
||||
const month = this.getMonth() - this.getMonth() % 3
|
||||
return new Date(this.getFullYear(), month, 1).toMidnight()
|
||||
}
|
||||
|
||||
Date.prototype.yearBegin = function() {
|
||||
return new Date(this.getFullYear(), 0, 1).toMidnight()
|
||||
}
|
||||
|
||||
Date.prototype.strftime = function(format, local) {
|
||||
if (!format) {
|
||||
const str = new Date(this.getTime() + 2.88E7).toISOString()
|
||||
return str.substr(0, 16).replace('T', ' ')
|
||||
}
|
||||
local = local && local.startsWith('zh') ? 'zh' : 'en'
|
||||
const padZero = function(str, len) {
|
||||
const pads = len - str.toString().length
|
||||
return (pads && pads > 0 ? '0'.repeat(pads) : '') + str
|
||||
}
|
||||
format = format.replace('%F', '%Y-%m-%d')
|
||||
format = format.replace(/%D|%x/, '%m/%d/%y')
|
||||
format = format.replace(/%T|%X/, '%H:%M:%S')
|
||||
format = format.replace('%R', '%H:%M')
|
||||
format = format.replace('%r', '%H:%M:%S %p')
|
||||
format = format.replace('%c', '%a %b %e %H:%M:%S %Y')
|
||||
const _this = this
|
||||
return format.replace(/%[A-Za-z%]/g, function(f) {
|
||||
let ans = f
|
||||
switch (f) {
|
||||
case '%%':
|
||||
ans = '%'
|
||||
break
|
||||
|
||||
case '%Y':
|
||||
case '%G':
|
||||
ans = _this.getFullYear()
|
||||
break
|
||||
|
||||
case '%y':
|
||||
ans = _this.getFullYear() % 100
|
||||
break
|
||||
|
||||
case '%C':
|
||||
ans = _this.getFullYear() / 100
|
||||
break
|
||||
|
||||
case '%m':
|
||||
case '%n':
|
||||
ans = _this.getMonth() + 1
|
||||
break
|
||||
|
||||
case '%B':
|
||||
local = local.startsWith('en') ? 'english' : local
|
||||
|
||||
case '%b':
|
||||
const m = _this.getMonth()
|
||||
ans = local_labels.monthes[local][m]
|
||||
break
|
||||
|
||||
case '%d':
|
||||
case '%e':
|
||||
ans = _this.getDate()
|
||||
break
|
||||
|
||||
case '%j':
|
||||
ans = _this.getDaysOfYear()
|
||||
break
|
||||
|
||||
case '%U':
|
||||
case '%W':
|
||||
const ws = _this.getWeeksOfYear(f === '%W')
|
||||
ans = padZero(ws, 2)
|
||||
break
|
||||
|
||||
case '%w':
|
||||
ans = _this.getDay()
|
||||
|
||||
case '%u':
|
||||
ans = ans === 0 ? 7 : ans
|
||||
break
|
||||
|
||||
case '%A':
|
||||
local = local.startsWith('en') ? 'english' : local
|
||||
|
||||
case '%a':
|
||||
const d = _this.getDay()
|
||||
ans = local_labels.weekdays[local][d]
|
||||
break
|
||||
|
||||
case '%H':
|
||||
case '%k':
|
||||
ans = _this.getHours()
|
||||
break
|
||||
|
||||
case '%I':
|
||||
case '%l':
|
||||
ans = _this.getHours()
|
||||
ans = ans % 12
|
||||
break
|
||||
|
||||
case '%M':
|
||||
ans = _this.getMinutes()
|
||||
break
|
||||
|
||||
case '%S':
|
||||
ans = _this.getSeconds()
|
||||
break
|
||||
|
||||
case '%s':
|
||||
ans = parseInt(_this.getTime() / 1E3)
|
||||
break
|
||||
|
||||
case '%f':
|
||||
const ms = _this.getMilliseconds()
|
||||
ans = padZero(ms * 1E3, 6)
|
||||
break
|
||||
|
||||
case '%P':
|
||||
local = local.startsWith('en') ? 'english' : local
|
||||
|
||||
case '%p':
|
||||
const h = _this.getHours()
|
||||
ans = local_labels.meridians[local][h < 12 ? 0 : 1]
|
||||
break
|
||||
|
||||
case '%z':
|
||||
let tzo = _this.getTimezoneOffset()
|
||||
const sign = tzo < 0 ? '-' : '+'
|
||||
tzo = Math.abs(tzo)
|
||||
const ho = padZero(tzo / 60, 2)
|
||||
const mo = padZero(tzo % 60, 2)
|
||||
ans = sign + ho + mo
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
if (f === '%C' || f === '%y' || f === '%m' || f === '%d' || f === '%H' || f === '%M' || f === '%S') {
|
||||
ans = padZero(ans, 2)
|
||||
}
|
||||
return ans.toString()
|
||||
})
|
||||
}
|
||||
|
||||
Date.prototype.humanize = function(local) {
|
||||
local = local && local.startsWith('zh') ? 'zh' : 'en'
|
||||
const result = this.strftime('', local)
|
||||
const days = (Date.today() - this.toMidnight().getTime()) / 8.64E7
|
||||
if (days <= -10 || days >= 10) {
|
||||
return result
|
||||
}
|
||||
const labels = local_labels.dayagos[local]
|
||||
let lbl = ''
|
||||
if (days === 0 || days === 1) {
|
||||
lbl = labels[days]
|
||||
} else if (days === -1) {
|
||||
lbl = labels[2]
|
||||
} else if (days >= 2) {
|
||||
lbl = days + labels[3]
|
||||
} else {
|
||||
lbl = days + labels[4]
|
||||
}
|
||||
return lbl + result.substr(10, 6)
|
||||
}
|
||||
|
||||
const local_labels = {
|
||||
monthes: {
|
||||
english: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
zh: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
||||
},
|
||||
weekdays: {
|
||||
english: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
zh: ['日', '一', '二', '三', '四', '五', '六']
|
||||
},
|
||||
meridians: {
|
||||
english: ['a.m.', 'p.m.'],
|
||||
en: ['AM', 'PM'],
|
||||
zh: ['上午', '下午']
|
||||
},
|
||||
dayagos: {
|
||||
english: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
|
||||
en: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
|
||||
zh: ['今天', '昨天', '明天', '天前', '天后']
|
||||
}
|
||||
}
|
||||
|
||||
export default Date
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
/**
|
||||
* Created by PanJiaChen on 16/11/18.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Parse the time to string
|
||||
* @param {(Object|string|number)} time
|
||||
* @param {string} cFormat
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
export function parseTime (time, cFormat) {
|
||||
if (arguments.length === 0) {
|
||||
return null
|
||||
}
|
||||
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'undefined' || time === null || time === 'null') {
|
||||
return ''
|
||||
} else if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
|
||||
time = parseInt(time)
|
||||
}
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||
let value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') {
|
||||
return ['日', '一', '二', '三', '四', '五', '六'][value]
|
||||
}
|
||||
if (result.length > 0 && value < 10) {
|
||||
value = '0' + value
|
||||
}
|
||||
return value || 0
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} time
|
||||
* @param {string} option
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatTime (time, option) {
|
||||
if (('' + time).length === 10) {
|
||||
time = parseInt(time) * 1000
|
||||
} else {
|
||||
time = +time
|
||||
}
|
||||
const d = new Date(time)
|
||||
const now = Date.now()
|
||||
|
||||
const diff = (now - d) / 1000
|
||||
|
||||
if (diff < 30) {
|
||||
return '刚刚'
|
||||
} else if (diff < 3600) {
|
||||
// less 1 hour
|
||||
return Math.ceil(diff / 60) + '分钟前'
|
||||
} else if (diff < 3600 * 24) {
|
||||
return Math.ceil(diff / 3600) + '小时前'
|
||||
} else if (diff < 3600 * 24 * 2) {
|
||||
return '1天前'
|
||||
}
|
||||
if (option) {
|
||||
return parseTime(time, option)
|
||||
} else {
|
||||
return (
|
||||
d.getMonth() +
|
||||
1 +
|
||||
'月' +
|
||||
d.getDate() +
|
||||
'日' +
|
||||
d.getHours() +
|
||||
'时' +
|
||||
d.getMinutes() +
|
||||
'分'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function getQueryObject (url) {
|
||||
url = url == null ? window.location.href : url
|
||||
const search = url.substring(url.lastIndexOf('?') + 1)
|
||||
const obj = {}
|
||||
const reg = /([^?&=]+)=([^?&=]*)/g
|
||||
search.replace(reg, (rs, $1, $2) => {
|
||||
const name = decodeURIComponent($1)
|
||||
let val = decodeURIComponent($2)
|
||||
val = String(val)
|
||||
obj[name] = val
|
||||
return rs
|
||||
})
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} input value
|
||||
* @returns {number} output value
|
||||
*/
|
||||
export function byteLength (str) {
|
||||
// returns the byte length of an utf8 string
|
||||
let s = str.length
|
||||
for (var i = str.length - 1; i >= 0; i--) {
|
||||
const code = str.charCodeAt(i)
|
||||
if (code > 0x7f && code <= 0x7ff) s++
|
||||
else if (code > 0x7ff && code <= 0xffff) s += 2
|
||||
if (code >= 0xDC00 && code <= 0xDFFF) i--
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} actual
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function cleanArray (actual) {
|
||||
const newArray = []
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
if (actual[i]) {
|
||||
newArray.push(actual[i])
|
||||
}
|
||||
}
|
||||
return newArray
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} json
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function param (json) {
|
||||
if (!json) return ''
|
||||
return cleanArray(
|
||||
Object.keys(json).map(key => {
|
||||
if (json[key] === undefined) return ''
|
||||
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
|
||||
})
|
||||
).join('&')
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function param2Obj (url) {
|
||||
const search = url.split('?')[1]
|
||||
if (!search) {
|
||||
return {}
|
||||
}
|
||||
return JSON.parse(
|
||||
'{"' +
|
||||
decodeURIComponent(search)
|
||||
.replace(/"/g, '\\"')
|
||||
.replace(/&/g, '","')
|
||||
.replace(/=/g, '":"')
|
||||
.replace(/\+/g, ' ') +
|
||||
'"}'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} val
|
||||
* @returns {string}
|
||||
*/
|
||||
export function html2Text (val) {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = val
|
||||
return div.textContent || div.innerText
|
||||
}
|
||||
|
||||
/**
|
||||
* Merges two objects, giving the last one precedence
|
||||
* @param {Object} target
|
||||
* @param {(Object|Array)} source
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function objectMerge (target, source) {
|
||||
if (typeof target !== 'object') {
|
||||
target = {}
|
||||
}
|
||||
if (Array.isArray(source)) {
|
||||
return source.slice()
|
||||
}
|
||||
Object.keys(source).forEach(property => {
|
||||
const sourceProperty = source[property]
|
||||
if (typeof sourceProperty === 'object') {
|
||||
target[property] = objectMerge(target[property], sourceProperty)
|
||||
} else {
|
||||
target[property] = sourceProperty
|
||||
}
|
||||
})
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} element
|
||||
* @param {string} className
|
||||
*/
|
||||
export function toggleClass (element, className) {
|
||||
if (!element || !className) {
|
||||
return
|
||||
}
|
||||
let classString = element.className
|
||||
const nameIndex = classString.indexOf(className)
|
||||
if (nameIndex === -1) {
|
||||
classString += '' + className
|
||||
} else {
|
||||
classString =
|
||||
classString.substr(0, nameIndex) +
|
||||
classString.substr(nameIndex + className.length)
|
||||
}
|
||||
element.className = classString
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} type
|
||||
* @returns {Date}
|
||||
*/
|
||||
export function getTime (type) {
|
||||
if (type === 'start') {
|
||||
return new Date().getTime() - 3600 * 1000 * 24 * 90
|
||||
} else {
|
||||
return new Date(new Date().toDateString())
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Function} func
|
||||
* @param {number} wait
|
||||
* @param {boolean} immediate
|
||||
* @return {*}
|
||||
*/
|
||||
export function debounce (func, wait, immediate) {
|
||||
let timeout, args, context, timestamp, result
|
||||
|
||||
const later = function () {
|
||||
// 据上一次触发时间间隔
|
||||
const last = +new Date() - timestamp
|
||||
|
||||
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||
if (last < wait && last > 0) {
|
||||
timeout = setTimeout(later, wait - last)
|
||||
} else {
|
||||
timeout = null
|
||||
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||
if (!immediate) {
|
||||
result = func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return function (...args) {
|
||||
context = this
|
||||
timestamp = +new Date()
|
||||
const callNow = immediate && !timeout
|
||||
// 如果延时不存在，重新设定延时
|
||||
if (!timeout) timeout = setTimeout(later, wait)
|
||||
if (callNow) {
|
||||
result = func.apply(context, args)
|
||||
context = args = null
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is just a simple version of deep copy
|
||||
* Has a lot of edge cases bug
|
||||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep
|
||||
* @param {Object} source
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function deepClone (source) {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments', 'deepClone')
|
||||
}
|
||||
const targetObj = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach(keys => {
|
||||
if (source[keys] && typeof source[keys] === 'object') {
|
||||
targetObj[keys] = deepClone(source[keys])
|
||||
} else {
|
||||
targetObj[keys] = source[keys]
|
||||
}
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arr
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function uniqueArr (arr) {
|
||||
return Array.from(new Set(arr))
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
export function createUniqueString () {
|
||||
const timestamp = +new Date() + ''
|
||||
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
|
||||
return (+(randomNum + timestamp)).toString(32)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an element has a class
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function hasClass (ele, cls) {
|
||||
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
|
||||
}
|
||||
|
||||
/**
|
||||
* Add class to element
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
*/
|
||||
export function addClass (ele, cls) {
|
||||
if (!hasClass(ele, cls)) ele.className += ' ' + cls
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove class from element
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
*/
|
||||
export function removeClass (ele, cls) {
|
||||
if (hasClass(ele, cls)) {
|
||||
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
|
||||
ele.className = ele.className.replace(reg, ' ')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import store from '@/store'
|
||||
|
||||
/**
|
||||
* @param {Array} value
|
||||
* @returns {Boolean}
|
||||
* @example see @/views/permission/directive.vue
|
||||
*/
|
||||
export default {
|
||||
install (Vue) {
|
||||
Vue.prototype.checkPer = (value) => {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const roles = store.getters && store.getters.roles
|
||||
const permissionRoles = value
|
||||
return roles.some(role => {
|
||||
return permissionRoles.includes(role)
|
||||
})
|
||||
} else {
|
||||
console.error(`need roles! Like v-permission="['admin','editor']"`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import axios from 'axios'
|
||||
|
||||
axios.defaults.baseURL = 'http://120.78.94.253:8082'
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json'
|
||||
axios.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'
|
||||
axios.defaults.timeout = 30000
|
||||
|
||||
export default {
|
||||
get (url, params) {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url,
|
||||
params
|
||||
}).then(response => {
|
||||
return response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
|
||||
|
||||
// 密钥对生成 http://web.chacuo.net/netrsakeypair
|
||||
|
||||
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
|
||||
'2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
|
||||
|
||||
// 加密
|
||||
export function encrypt (txt) {
|
||||
const encryptor = new JSEncrypt()
|
||||
encryptor.setPublicKey(publicKey) // 设置公钥
|
||||
return encryptor.encrypt(txt) // 对需要加密的数据进行加密
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import Date from './datetime.js'
|
||||
|
||||
export const calendarBaseShortcuts = [{
|
||||
text: '今天',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().daysAgo(1).setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().daysAgo(1).setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: '本周',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().daysAgo(new Date().getDay() - 1).setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: '这个月',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().monthBegin().setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: '当前季度',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().quarterBegin().setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: '最近30天',
|
||||
onClick (picker) {
|
||||
const startTime = new Date(new Date().daysAgo(30).setHours(0, 0, 0))
|
||||
const endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}]
|
||||
|
||||
export const calendarMoveShortcuts = [{
|
||||
text: '‹ 往前一天 ',
|
||||
onClick (picker) {
|
||||
let startTime = new Date(new Date().setHours(0, 0, 0))
|
||||
let endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
if (!picker.value) {
|
||||
picker.value = [startTime, endTime]
|
||||
}
|
||||
startTime = picker.value[0].daysAgo(1)
|
||||
endTime = picker.value[1].daysAgo(1)
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}, {
|
||||
text: ' 往后一天 ›',
|
||||
onClick (picker) {
|
||||
let startTime = new Date(new Date().setHours(0, 0, 0))
|
||||
let endTime = new Date(new Date().setHours(23, 59, 59))
|
||||
if (!picker.value) {
|
||||
picker.value = [startTime, endTime]
|
||||
}
|
||||
startTime = picker.value[0].daysAgo(-1)
|
||||
endTime = picker.value[1].daysAgo(-1)
|
||||
picker.$emit('pick', [startTime, endTime])
|
||||
}
|
||||
}]
|
||||
|
||||
export const calendarShortcuts = [
|
||||
...calendarBaseShortcuts,
|
||||
...calendarMoveShortcuts
|
||||
]
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from 'axios'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export function upload (api, file) {
|
||||
var data = new FormData()
|
||||
data.append('file', file)
|
||||
const config = {
|
||||
headers: { 'Authorization': getToken() }
|
||||
}
|
||||
return axios.post(api, data, config)
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/**
|
||||
* Created by PanJiaChen on 16/11/18.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isExternal (path) {
|
||||
return /^(https?:|mailto:|tel:)/.test(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUsername (str) {
|
||||
const valid_map = ['admin', 'editor']
|
||||
return valid_map.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validURL (url) {
|
||||
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
|
||||
return reg.test(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validLowerCase (str) {
|
||||
const reg = /^[a-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUpperCase (str) {
|
||||
const reg = /^[A-Z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validAlphabets (str) {
|
||||
const reg = /^[A-Za-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} email
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validEmail (email) {
|
||||
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
return reg.test(email)
|
||||
}
|
||||
|
||||
export function isvalidPhone (phone) {
|
||||
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
|
||||
return reg.test(phone)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isString (str) {
|
||||
if (typeof str === 'string' || str instanceof String) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arg
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isArray (arg) {
|
||||
if (typeof Array.isArray === 'undefined') {
|
||||
return Object.prototype.toString.call(arg) === '[object Array]'
|
||||
}
|
||||
return Array.isArray(arg)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否合法IP地址
|
||||
* @param rule
|
||||
* @param value
|
||||
* @param callback
|
||||
*/
|
||||
export function validateIP (rule, value, callback) {
|
||||
if (value === '' || value === undefined || value == null) {
|
||||
callback()
|
||||
} else {
|
||||
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
|
||||
if ((!reg.test(value)) && value !== '') {
|
||||
callback(new Error('请输入正确的IP地址'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 是否手机号码或者固话 */
|
||||
export function validatePhoneTwo (rule, value, callback) {
|
||||
const reg = /^((0\d{2,3}-\d{7,8})|(1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}))$/
|
||||
if (value === '' || value === undefined || value == null) {
|
||||
callback()
|
||||
} else {
|
||||
if ((!reg.test(value)) && value !== '') {
|
||||
callback(new Error('请输入正确的电话号码或者固话号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 是否固话 */
|
||||
export function validateTelephone (rule, value, callback) {
|
||||
const reg = /0\d{2}-\d{7,8}/
|
||||
if (value === '' || value === undefined || value == null) {
|
||||
callback()
|
||||
} else {
|
||||
if ((!reg.test(value)) && value !== '') {
|
||||
callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 是否手机号码 */
|
||||
export function validatePhone (rule, value, callback) {
|
||||
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
|
||||
if (value === '' || value === undefined || value == null) {
|
||||
callback()
|
||||
} else {
|
||||
if ((!reg.test(value)) && value !== '') {
|
||||
callback(new Error('请输入正确的电话号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 是否身份证号码 */
|
||||
export function validateIdNo (rule, value, callback) {
|
||||
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
||||
if (value === '' || value === undefined || value == null) {
|
||||
callback()
|
||||
} else {
|
||||
if ((!reg.test(value)) && value !== '') {
|
||||
callback(new Error('请输入正确的身份证号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
devServer: { //开发环境的服务器配置
|
||||
// 是否自动弹出浏览器，默认false
|
||||
open: false,
|
||||
host: '0.0.0.0',
|
||||
// 修改默认端口，默认8080
|
||||
port: 8089,
|
||||
proxy: { //进行代理转发
|
||||
'/api': {
|
||||
// 转发的网址
|
||||
target: 'http://192.168.56.136:8000',
|
||||
// 是否开启本地代理 默认true
|
||||
changeOrigin: true,
|
||||
// 重要点
|
||||
pathRewrite: {
|
||||
'/api': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue