数字资源能力一本账
This commit is contained in:
a0049873
parent
b67fa140cf
commit
97eaa4e9d2
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2022-08-25 14:37:49
|
* @Date: 2022-08-25 14:37:49
|
||||||
* @LastEditors: Light
|
* @LastEditors: Light
|
||||||
* @LastEditTime: 2022-10-26 10:48:52
|
* @LastEditTime: 2022-10-31 09:16:10
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
*/
|
*/
|
||||||
var _global = {}
|
var _global = {}
|
||||||
|
|
@ -44,7 +44,7 @@ var CONFIGITEM = {
|
||||||
dev: {
|
dev: {
|
||||||
previewUrl: 'http://localhost:8080/',
|
previewUrl: 'http://localhost:8080/',
|
||||||
apiURL: 'http://192.168.124.243:8888/renren-admin',
|
apiURL: 'http://192.168.124.243:8888/renren-admin',
|
||||||
websocketURL: 'ws://192.168.124.243:8888/renren-admin/websocket'
|
websocketURL: 'ws://192.168.243.243:8888/renren-admin/websocket'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,947 @@
|
||||||
|
<!--
|
||||||
|
* @Author: Light
|
||||||
|
* @Date: 2022-10-31 09:24:38
|
||||||
|
* @LastEditors: Light
|
||||||
|
* @LastEditTime: 2022-10-31 11:40:37
|
||||||
|
* @Description: 能力溯源分析
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="capabilityTraceability">
|
||||||
|
<div class="header">
|
||||||
|
<div class="name">数字资源能力一本账</div>
|
||||||
|
<div class="tab">
|
||||||
|
<div v-for="tab in tabList" :key="tab" :class="selectTab==tab?'select':''" @click="changeTab(tab)">{{tab}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview">
|
||||||
|
<div class="top"><i></i>总体情况</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="item" v-for="item in allSituation" :key="item">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right">
|
||||||
|
<div>{{item.name}}</div>
|
||||||
|
<div>{{item.num}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="first">
|
||||||
|
<div class="one">
|
||||||
|
<div class="top"><i></i>部门情况</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="item" v-for="item in allSituationDept" :key="item">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right">
|
||||||
|
<div>{{item.name}}</div>
|
||||||
|
<div>{{item.num}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="two">
|
||||||
|
<div class="top"><i></i>部门数字资源分布</div>
|
||||||
|
<div class="main">
|
||||||
|
<el-table
|
||||||
|
:data="tableData1"
|
||||||
|
border
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="deptName"
|
||||||
|
label="部门名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="project"
|
||||||
|
label="注册项目"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="system"
|
||||||
|
label="注册系统"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="video"
|
||||||
|
label="视频资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="layer"
|
||||||
|
label="GIS图层"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="cloudResources"
|
||||||
|
label="云网资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="assembly"
|
||||||
|
label="组件资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three">
|
||||||
|
<div class="top"><i></i>部门数字资源应用分布</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="nav">
|
||||||
|
<div :class="selectDistribution==nav?'select':''" v-for='nav in distributionNav' :key="nav" @click="selectDistribution=nav">{{nav}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="ehcarts">
|
||||||
|
<div class="name">{{selectDistribution}}</div>
|
||||||
|
<div id="echarts1" style="width: 1450px;height:300px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="back" @click="goBack()">返回顶部<i></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="second">
|
||||||
|
<div class="one">
|
||||||
|
<div class="top"><i></i>部门情况</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="item" v-for="item in allSituationDept2" :key="item">
|
||||||
|
<div class="left"></div>
|
||||||
|
<div class="right">
|
||||||
|
<div>{{item.name}}</div>
|
||||||
|
<div>{{item.num}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="two">
|
||||||
|
<div class="top"><i></i>部门数字资源分布</div>
|
||||||
|
<div class="main">
|
||||||
|
<el-table
|
||||||
|
:data="tableData2"
|
||||||
|
border
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="deptName"
|
||||||
|
label="部门名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="project"
|
||||||
|
label="注册项目"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="system"
|
||||||
|
label="注册系统"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="video"
|
||||||
|
label="视频资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="layer"
|
||||||
|
label="GIS图层"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="cloudResources"
|
||||||
|
label="云网资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="assembly"
|
||||||
|
label="组件资源"
|
||||||
|
width="210">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three">
|
||||||
|
<div class="top"><i></i>部门数字资源应用分布</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="nav">
|
||||||
|
<div :class="selectDistribution2==nav?'select':''" v-for='nav in distributionNav2' :key="nav" @click="selectDistribution2=nav">{{nav}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="ehcarts">
|
||||||
|
<div class="name">{{selectDistribution2}}</div>
|
||||||
|
<div id="echarts2" style="width: 1450px;height:300px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="back" @click="goBack()">返回顶部<i></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
const chartData1 = [
|
||||||
|
{ name: '社会治安', value: 300 },
|
||||||
|
{ name: '城市管理', value: 400 },
|
||||||
|
{ name: '疫情防控', value: 452 },
|
||||||
|
{ name: '危化品管理', value: 770 },
|
||||||
|
{ name: '交通运输', value: 650 },
|
||||||
|
{ name: '森林防火', value: 256 },
|
||||||
|
{ name: '防汛抗旱', value: 350 },
|
||||||
|
{ name: '文化旅游', value: 422 },
|
||||||
|
{ name: '非煤矿山', value: 235 },
|
||||||
|
{ name: '医疗卫生', value: 658 },
|
||||||
|
{ name: '安全生产', value: 600 },
|
||||||
|
{ name: '生态环境', value: 400 },
|
||||||
|
{ name: '农业农村', value: 523 },
|
||||||
|
{ name: '市场监督', value: 482 },
|
||||||
|
{ name: '政务服务', value: 423 },
|
||||||
|
{ name: '其他', value: 300 }
|
||||||
|
]
|
||||||
|
const chartData2 = [
|
||||||
|
{ name: '社会治安', value: 300 },
|
||||||
|
{ name: '城市管理', value: 400 },
|
||||||
|
{ name: '疫情防控', value: 452 },
|
||||||
|
{ name: '危化品管理', value: 770 },
|
||||||
|
{ name: '交通运输', value: 650 },
|
||||||
|
{ name: '森林防火', value: 256 },
|
||||||
|
{ name: '防汛抗旱', value: 350 },
|
||||||
|
{ name: '文化旅游', value: 422 },
|
||||||
|
{ name: '非煤矿山', value: 235 },
|
||||||
|
{ name: '医疗卫生', value: 658 },
|
||||||
|
{ name: '安全生产', value: 600 },
|
||||||
|
{ name: '生态环境', value: 400 },
|
||||||
|
{ name: '农业农村', value: 523 },
|
||||||
|
{ name: '市场监督', value: 482 },
|
||||||
|
{ name: '政务服务', value: 423 },
|
||||||
|
{ name: '其他', value: 300 }
|
||||||
|
]
|
||||||
|
const xData1 = chartData1.map(v => v.name)
|
||||||
|
const xData2 = chartData2.map(v => v.name)
|
||||||
|
const sData1 = chartData1.map(v => v.value)
|
||||||
|
const sData2 = chartData2.map(v => v.value)
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tabList: ['总体情况', '部门情况', '地市情况'],
|
||||||
|
selectTab: '总体情况',
|
||||||
|
allSituation: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||||
|
allSituationDept: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||||
|
allSituationDept2: [{ name: '注册地市', num: '100个' }, { name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||||
|
tableData1: [{
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '财政厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '应急厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '大数据局',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '民政局',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '公安厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '教育厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '审计厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '海洋局',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableData2: [{
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}, {
|
||||||
|
deptName: '交通运输厅',
|
||||||
|
project: '1005',
|
||||||
|
system: '1005',
|
||||||
|
video: '1005',
|
||||||
|
layer: '1005',
|
||||||
|
cloudResources: '1005',
|
||||||
|
assembly: '1005'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
distributionNav: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
|
||||||
|
selectDistribution: '注册项目',
|
||||||
|
distributionNav2: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
|
||||||
|
selectDistribution2: '注册项目',
|
||||||
|
option1: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '14%',
|
||||||
|
right: '3%',
|
||||||
|
left: '3%',
|
||||||
|
bottom: '14%'
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: xData1,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
color: '#666',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
color: '#666'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: sData1,
|
||||||
|
barWidth: '20px',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#f48238'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
option2: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '14%',
|
||||||
|
right: '3%',
|
||||||
|
left: '3%',
|
||||||
|
bottom: '14%'
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: xData2,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10,
|
||||||
|
color: '#666',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
color: '#666'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(151,151,151,0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: sData2,
|
||||||
|
barWidth: '20px',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#02ab46'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
myEcharts () {
|
||||||
|
var chartDom1 = document.getElementById('echarts1')
|
||||||
|
var chartDom2 = document.getElementById('echarts2')
|
||||||
|
var myChart1 = echarts.init(chartDom1)
|
||||||
|
var myChart2 = echarts.init(chartDom2)
|
||||||
|
myChart1.setOption(this.option1)
|
||||||
|
myChart2.setOption(this.option2)
|
||||||
|
},
|
||||||
|
changeTab (tab) {
|
||||||
|
this.selectTab = tab
|
||||||
|
switch (this.selectTab) {
|
||||||
|
case '总体情况':
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
break
|
||||||
|
case '部门情况':
|
||||||
|
window.scrollTo(0, 330)
|
||||||
|
break
|
||||||
|
case '地市情况':
|
||||||
|
window.scrollTo(0, 1640)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goBack () {
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.myEcharts()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.capabilityTraceability {
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
i {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/gang.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
.name {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 3px 14px;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.overview {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: white;
|
||||||
|
padding: 14px 16px;
|
||||||
|
.main {
|
||||||
|
margin: 34px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.item {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 45px 0 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
.left {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
margin-left: 10px;
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
div:nth-of-type(2) {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #027cf6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(1) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one1.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one2.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(3) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one3.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(4) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one4.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(5) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one5.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(6) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/one6.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.first {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: white;
|
||||||
|
padding: 14px 16px;
|
||||||
|
.one {
|
||||||
|
margin-bottom: 42px;
|
||||||
|
.main {
|
||||||
|
margin: 34px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.item {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 45px 0 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
.left {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
margin-left: 10px;
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
div:nth-of-type(2) {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #f9c599;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(1) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two1.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two2.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(3) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two3.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(4) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two4.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(5) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two5.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(6) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/two6.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
margin-bottom: 42px;
|
||||||
|
.main {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.main {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 50px;
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-right: 60px;
|
||||||
|
border-bottom: 3px solid #fff;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
border-bottom: 3px solid #f48238;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ehcarts {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 5px 5px 5px #ccc;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 10px;
|
||||||
|
.name {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-left: 1400px;
|
||||||
|
text-align: end;
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: 8px;
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/back.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: white;
|
||||||
|
padding: 14px 16px;
|
||||||
|
.one {
|
||||||
|
margin-bottom: 42px;
|
||||||
|
.main {
|
||||||
|
margin: 34px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.item {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 35px 0 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
.left {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
margin-left: 10px;
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
div:nth-of-type(2) {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #02ab46;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(1) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three1.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three2.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(3) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three3.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(4) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three4.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(5) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three5.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(6) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three6.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(7) > .left {
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/three7.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
margin-bottom: 42px;
|
||||||
|
.main {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.main {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 50px;
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-right: 60px;
|
||||||
|
border-bottom: 3px solid #fff;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
border-bottom: 3px solid #02ab46;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ehcarts {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 5px 5px 5px #ccc;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 10px;
|
||||||
|
.name {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-left: 1400px;
|
||||||
|
text-align: end;
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: 8px;
|
||||||
|
background: url("~@/assets/img/capabilityTraceability/back.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue