ZheJiangNingBo
/
functional-agriculture
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

标准体系

Browse Source
master
zhy521521 12 months ago
parent b37920b5c3
commit ed5259db76
17 changed files with 506 additions and 322 deletions
Show Stats Download Patch File Download Diff File

7
README.md
Unescape View File

@ -1,7 +1,4 @@
## 项目启动 node-v10版本即可 ## 项目启动 node-v10版本即可
## 项目适配 使用postcss-px2rem px2rem-loader进行rem适配
https://blog.csdn.net/Refuelefforts/article/details/113933784
实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位
前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。
## rem作为单位 元素是根据根元素字体大小来计算 rem高度不适配解决方案 媒体查询 vw vh ## /home/project/nginx/html/dist_0228

BIN
public/images/pdf.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/images/pdfbg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

5
src/App.vue
Unescape View File

@ -9,6 +9,7 @@
box-sizing: border-box; box-sizing: border-box;
// user-select: none; // user-select: none;
} }
// 修改滚动条样式 // 修改滚动条样式
* { * {
scrollbar-color: rgb(13, 43, 85) transparent; scrollbar-color: rgb(13, 43, 85) transparent;
@ -37,6 +38,10 @@
} }
} }
//去除el-dialog append-to-body 设置为false的暗色背景
.v-modal {
background: transparent !important;
}
@font-face { @font-face {
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;

9
src/api/bztx/index.js
Unescape View File

@ -24,3 +24,12 @@ export function getSchemeTree(params) {
params, params,
}); });
} }
// 标准体系查询
export function standardSystemQuery(params) {
return request({
url: "/standard/system/standardSystemQuery",
method: "post",
params,
});
}
//

629
src/views/bztx/index.vue
Unescape View File

@ -7,7 +7,7 @@
<titleCard>硒产业标准体系统计</titleCard> <titleCard>硒产业标准体系统计</titleCard>
<div class="top-item"> <div class="top-item">
<div class="item" v-for="item in topList" :key="item.id" <div class="item" v-for="item in topList" :key="item.id"
@click="ckickItem(item.id, item.schemeName)"> @click="ckickItem(item.parentId, item.schemeName)">
<div class="title"> <div class="title">
{{ item.schemeName }} {{ item.schemeName }}
</div> </div>
@ -18,7 +18,7 @@
</div> </div>
<div class="bottom-item"> <div class="bottom-item">
<div class="item" v-for="item in bottomList" :key="item.id" <div class="item" v-for="item in bottomList" :key="item.id"
@click="ckickItem(item.id, item.schemeName)"> @click="ckickItem(item.parentId, item.schemeName)">
<div class="title"> <div class="title">
{{ item.schemeName }} {{ item.schemeName }}
@ -32,140 +32,237 @@
</div> </div>
<!-- 标准统计 --> <!-- 标准统计 -->
<div class="bztj"> <div class="bztj" v-if="sgowBox">
<titleCard>标准统计</titleCard> <titleCard>标准统计</titleCard>
<div class="bztj-card"> <div class="bztj-card">
<div class="gj"> <div class="gj" @click="clickBztj(hyList.value)">
<div class="title"> <div class="title">
{{ gjLIst.name }} {{ countryList.key }}
</div> </div>
<div class="num">{{ gjLIst.num }}</div> <div class="num">{{ countryList.value }}</div>
</div> </div>
<div class="hy"> <div class="hy" @click="clickBztj(hyList.value)">
<div class="title"> <div class="title">
{{ hyList.name }} {{ hyList.key }}
</div> </div>
<div class="num">{{ hyList.num }}</div> <div class="num">{{ hyList.value }}</div>
</div> </div>
<div class="sj"> <div class="sj" @click="clickBztj(hyList.value)">
<div class="title"> <div class="title">
{{ sjList.name }} {{ sjList.key }}
</div> </div>
<div class="num">{{ sjList.num }}</div> <div class="num">{{ sjList.value }}</div>
</div> </div>
<div class="dbz"> <div class="dbz" @click="clickBztj(hyList.value)">
<div class="title"> <div class="title">
{{ dbzList.name }} {{ dbzList.key }}
</div> </div>
<div class="num">{{ dbzList.num }}</div> <div class="num">{{ dbzList.value }}</div>
</div>
<div class="all" @click="clickBztj(hyList.value)">
<div class="title">
{{ allList.key }}
</div>
<div class="num">{{ allList.value }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 本地标准 --> <!-- 本地标准 -->
<div class="bd"> <div class="bd">
<titleCard>本地标准</titleCard> <titleCard>本地标准</titleCard>
<div class="item"> <div class="item" @click="clickBztj(hyList.value)">
<div class="title"> <div class="title">
{{ bdList.name }} {{ bdList.key }}
</div> </div>
<div class="num"> <div class="num">
{{ bdList.num }} {{ bdList.value }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="rightWrap"> <div class="rightWrap">
<div class="search-wrap"> <div class="search-wrap" :class="{ flexs: showChart }">
<img src="../../../public/images/go-back.png" alt="" class="imgs" v-show="!showChart"
@click="showChart = !showChart">
<div> <div>
<el-input v-model="searchContent" placeholder="请输入搜索内容"></el-input> <el-input v-model="searchContent" placeholder="请输入搜索内容" @keyup.enter.native="enterKeyup"></el-input>
</div> </div>
</div> </div>
<div id="bztx" class="charts"></div> <div id="bztx" class="charts" v-show="showChart"></div>
<div v-show="!showChart" class="contents">
<template v-if="fileList.length">
<div class="item" v-for="(item, index) in fileList" :key="index" @click="clickFile(item)">
<div class="imgWrap">
<img src="../../../public/images/pdf.png" alt="" style="width:100% ;height: 100%;">
</div>
<div class="title">
{{ item.fileName }}
</div>
</div>
</template>
<template v-else>
<div class="nodata">
<span>
暂无数据!
</span>
</div>
</template>
</div>
</div> </div>
</div> </div>
<el-dialog :title="fileTitle" :visible.sync="showNewsDialog" :append-to-body="false">
<embed :src="fileSrc" type="application/pdf" width="100%" height="740px"
style="position: relative;z-index: 1008;" />
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { standardSystemStatistics, standardSystem, getSchemeTree } from '../../api/bztx/index' import { standardSystemStatistics, standardSystem, getSchemeTree, standardSystemQuery } from '../../api/bztx/index'
export default { export default {
data() { data() {
return { return {
topList: [], topList: [],
bottomList: [], bottomList: [],
gjLIst: { sgowBox: false,
}, names: '',
countryList: {}, //疑问 该变量定义为gjLIst没办法显示数据
hyList: {}, hyList: {},
sjList: {}, sjList: {},
dbzList: {}, dbzList: {},
allList:{},
bdList: {}, bdList: {},
option: { option: {
tooltip: {
tooltip: { // 提示框浮层设置
trigger: 'item', trigger: 'item',
triggerOn: 'mousemove', triggerOn: 'mousemove', // 提示框触发条件
backgroundColor: "#fff" enterable: true, // 鼠标是否可进入提示框浮层中，默认false
}, },
series: [ series: [
{ {
type: 'tree', type: 'tree',
id: 0,
name: 'tree1',
data: [], data: [],
top: '10%', name: '树图',
left: '10%', top: '5%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
bottom: '10%', left: '5%', // 组件离容器左侧的距离
right: '10%', bottom: '5%', // 组件离容器下侧的距离
symbolSize: 7, right: '10%', // 组件离容器右侧的距离
edgeShape: 'polyline', layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
edgeForkPosition: '63%', orient: 'LR', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
initialTreeDepth: 3, edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
lineStyle: { roam: false, // 是否开启鼠标缩放或平移，默认false
width: 2 // initialTreeDepth: 0, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
// symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
// symbolRotate: 270, // 配合arrow图形使用效果较好
symbolSize: 5, // 大于0时是圆圈，等于0时不展示，标记的大小
itemStyle: { // 树图中每个节点的样式
color: '#1890FF', // 节点未展开时的填充色
borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
borderWidth: 1, // 描边线宽，为0时无描边
borderType: 'dotted', // 描边类型
borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
shadowBlur: 16, // 图形阴影的模糊大小
opacity: 1 // 图形透明度
}, },
itemStyle: { label: { // 每个节点对应的文本标签样式
color: 'none', // 设置节点的背景颜色为红色 show: true, // 是否显示标签
borderColorSaturation: 0.6, // 调整边界线条的饱和度 distance: 8, // 文本距离图形元素的距离
borderWidth: 0, // 设置边界线条的宽度 position: 'left', // 标签位置
emphasis: { verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
shadowBlur: 5, // 设置高亮时的模糊效果 align: 'center', // 文字水平对齐方式，默认自动，left，right，center
shadowOffsetX: 0, fontSize: 12, // 字体大小
shadowColor: 'rgba(0, 0, 0, 0.5)' color: '#fff', // 字体颜色
} backgroundColor: '#042248', // 文字块的背景颜色
borderColor: '#1890FF', // 文字块边框颜色
borderWidth: 1, // 文字块边框宽度
borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
borderRadius: 4, // 文字块的圆角
padding: [6, 6], // 文字块内边距
shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
shadowBlur: 4, // 文字块的背景阴影长度
width: 80,
// 文字超出宽度是否截断或者换行；只有配置width时有效
overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
ellipsis: '...'
}, },
label: { lineStyle: { // 树图边的样式
position: 'left', color: '#fff', // 树图边的颜色
verticalAlign: 'middle', width: 1, // 树图边的宽度
align: 'right', curveness: 0.5, // 树图边的曲度
textStyle: { shadowColor: 'rgba(0, 0, 0, 1)', // 阴影颜色
fontSize: 12, // shadowBlur: 10 // 图形阴影的模糊大小
fontFamily: 'PingFangSC, PingFang SC', },
fontWeight: 400, emphasis: { // 树图中图形和标签高亮的样式
color: '#fff', disabled: true, // 是否关闭高亮状态，默认false
padding: 10, // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
// backgroundColor: '#fff', focus: 'self', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
itemStyle: { // 该节点的样式
color: '#1890FF', // 图形的颜色
// borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
borderWidth: 1, // 描边线宽，为0时无描边
borderType: 'solid', // 描边类型 solid dashed dotted
borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
shadowBlur: 12, // 图形阴影的模糊大小
opacity: 1 // 图形透明度
}, },
lineStyle: { // 树图边的样式
color: 'rgba(0,0,0,.45)', // 树图边的颜色
width: 2, // 树图边的宽度
curveness: 0.5, // 树图边的曲度
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
shadowBlur: 6 // 图形阴影的模糊大小
},
label: { // 高亮标签的文本样式
color: '#333',
fontWeight: 600
}
},
blur: { // 淡出状态的相关配置，开启emphasis.focus后有效
itemStyle: {}, // 节点的样式
lineStyle: {}, // 树图边的样式
label: {} // 淡出标签的文本样式
}, },
leaves: { leaves: { // 叶子节点的特殊配置
label: { label: { // 叶子节点的文本标签样式
// distance: 8,
// color: '#1890FF',
position: 'right', position: 'right',
verticalAlign: 'middle', verticalAlign: 'middle',
align: 'left' align: 'center'
} },
}, itemStyle: {}, // 叶子节点的样式
emphasis: { emphasis: {}, // 叶子节点高亮状态的配置
focus: 'descendant' blur: {}, // 叶子节点淡出状态的配置
select: {} // 叶子节点选中状态的配置
}, },
expandAndCollapse: false,//开启展开收起功能 animation: true, // 是否开启动画
animationDuration: 550, expandAndCollapse: false, // 子树折叠和展开的交互，默认打开
animationDurationUpdate: 750 // 动画更新时间 animationDuration: 550, // 初始动画的时长
} animationEasing: 'linear', // 初始动画的缓动效果
] animationDelay: 0, // 初始动画的延迟
}, animationDurationUpdate: 750, // 数据更新动画的时长
searchContent: '' animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
animationDelayUpdate: 0 // 数据更新动画的延迟
}]
},
searchContent: '',
showChart: true,
fileList: [],
showNewsDialog: false,
fileSrc: '',
fileTitle: '',
schemeId: '', //硒产业文件搜索id
filetype: '', //点击标准统计 本地标准传参
myChart: null
} }
}, },
@ -173,9 +270,11 @@ export default {
this.$store.commit('SET_ROUTERINFO', this.$route.meta) this.$store.commit('SET_ROUTERINFO', this.$route.meta)
}, },
mounted() { mounted() {
this.standardSystemStatistics() this.standardSystemStatistics()
this.standardSystem() this.standardSystem()
window.addEventListener("resize", () => {
this.myChart.resize();
});
}, },
methods: { methods: {
// 硒产业标准体系 // 硒产业标准体系
@ -184,55 +283,52 @@ export default {
if (res.code == 200) { if (res.code == 200) {
this.topList = res.data.slice(0, 2) this.topList = res.data.slice(0, 2)
this.bottomList = res.data.slice(2, 5) this.bottomList = res.data.slice(2, 5)
// console.log(this.topList, this.bottomList) this.schemeId = res.data[0].parentId
Object.keys(res.data[0]).length && this.getSchemeTree(res.data[0].parentId, res.data[0].schemeName)
Object.keys(res.data[0]).length && this.ckickItem(res.data[0].id, res.data[0].schemeName)
} }
}) })
}, },
// 标准统计 // 标准统计 本地标准
standardSystem() { standardSystem() {
standardSystem().then(res => { standardSystem().then(res => {
if (res.code == 200) { if (res.code == 200) {
for (const key in res.data) { for (const key in res.data) {
if (key == '国家标准') { if (key == '国家标准') {
this.gjList = { this.countryList = res.data.国家标准
name: key,
num: res.data[key]
}
} }
if (key == '行业标准') { if (key == '行业标准') {
this.hyList = { this.hyList = res.data.行业标准
name: key,
num: res.data[key]
}
} }
if (key == '省级地方标准') { if (key == '省级地方标准') {
this.sjList = { this.sjList = res.data.省级地方标准
name: key,
num: res.data[key]
}
} }
if (key == '待编制标准') { if (key == '待编制标准') {
this.dbzList = { this.dbzList = res.data.待编制标准
name: key, }
num: res.data[key] if(key == '总数'){
this.allList = {
key:key,
value:res.data[key]
} }
} }
if (key == '本地标准') { if (key == '本地标准') {
this.bdList = { this.bdList = res.data.本地标准
name: key,
num: res.data[key]
}
} }
this.sgowBox = true
} }
console.log(this.gjList)
} }
}) })
}, },
// 点击硒产业统计标准
ckickItem(id, fatherData) { ckickItem(id, fatherData) {
this.schemeId = id
this.filetype = ""
this.showChart = true
this.getSchemeTree(id, fatherData)
},
// 树数据
getSchemeTree(id, fatherData) {
console.log(fatherData) console.log(fatherData)
let params = { let params = {
parentId: id parentId: id
@ -241,146 +337,85 @@ export default {
if (res.code == 200) { if (res.code == 200) {
let nweDate = [], echartsData = [] let nweDate = [], echartsData = []
if (res.data.length) { if (res.data.length) {
nweDate = res.data.map(item => { nweDate = this.dealData(res.data)
return { echartsData = [{ name: '硒产业标准体系统计', schemeId: id, children: [...nweDate] }]
name: item.schemeName
}
});
echartsData = [{ name: fatherData, children: [...nweDate] }]
} }
console.log('树状图数据', echartsData) console.log('树状图数据', echartsData)
this.initEcharts(echartsData) this.initEcharts(echartsData)
} }
}) })
}, },
dealData(data) {
console.log(4444, data)
var treeData = []
data.forEach(item => {
item.name = item.schemeName
item.schemeId = item.parentId
treeData.push({ ...item })
if (item.children) {
console.log([item.children])
this.dealData(item.children)
}
})
return treeData
},
initEcharts(echartsData) { initEcharts(echartsData) {
var chartDom = document.getElementById('bztx'); var chartDom = document.getElementById('bztx');
var myChart = this.$echarts.init(chartDom); this.myChart = this.$echarts.init(chartDom);
// const data = {
// name: 'flare',
// children: [
// {
// name: 'data',
// children: [
// {
// name: 'converters',
// children: [
// { name: 'Converters', value: 721 },
// { name: 'DelimitedTextConverter', value: 4294 }
// ]
// },
// {
// name: 'DataUtil',
// value: 3322
// }
// ]
// },
// {
// name: 'display',
// children: [
// { name: 'DirtySprite', value: 8833 },
// { name: 'LineSprite', value: 1732 },
// { name: 'RectSprite', value: 3623 }
// ]
// },
// {
// name: 'flex',
// children: [{ name: 'FlareVis', value: 4116 }]
// },
// {
// name: 'query',
// children: [
// { name: 'AggregateExpression', value: 1616 },
// { name: 'And', value: 1027 },
// { name: 'Arithmetic', value: 3891 },
// { name: 'Average', value: 891 },
// { name: 'BinaryExpression', value: 2893 },
// { name: 'Comparison', value: 5103 },
// { name: 'CompositeExpression', value: 3677 },
// { name: 'Count', value: 781 },
// { name: 'DateUtil', value: 4141 },
// { name: 'Distinct', value: 933 },
// { name: 'Expression', value: 5130 },
// { name: 'ExpressionIterator', value: 3617 },
// { name: 'Fn', value: 3240 },
// { name: 'If', value: 2732 },
// { name: 'IsA', value: 2039 },
// { name: 'Literal', value: 1214 },
// { name: 'Match', value: 3748 },
// { name: 'Maximum', value: 843 },
// {
// name: 'methods',
// children: [
// { name: 'add', value: 593 },
// { name: 'and', value: 330 },
// { name: 'average', value: 287 },
// { name: 'count', value: 277 },
// { name: 'distinct', value: 292 },
// { name: 'div', value: 595 },
// { name: 'eq', value: 594 },
// { name: 'fn', value: 460 },
// { name: 'gt', value: 603 },
// { name: 'gte', value: 625 },
// { name: 'iff', value: 748 },
// { name: 'isa', value: 461 },
// { name: 'lt', value: 597 },
// { name: 'lte', value: 619 },
// { name: 'max', value: 283 },
// { name: 'min', value: 283 },
// { name: 'mod', value: 591 },
// { name: 'mul', value: 603 },
// { name: 'neq', value: 599 },
// { name: 'not', value: 386 },
// { name: 'or', value: 323 },
// { name: 'orderby', value: 307 },
// { name: 'range', value: 772 },
// { name: 'select', value: 296 },
// { name: 'stddev', value: 363 },
// { name: 'sub', value: 600 },
// { name: 'sum', value: 280 },
// { name: 'update', value: 307 },
// { name: 'variance', value: 335 },
// { name: 'where', value: 299 },
// { name: 'xor', value: 354 },
// { name: 'x_x', value: 264 }
// ]
// },
// { name: 'Minimum', value: 843 },
// { name: 'Not', value: 1554 },
// { name: 'Or', value: 970 },
// { name: 'Query', value: 13896 },
// { name: 'Range', value: 1594 },
// { name: 'StringUtil', value: 4130 },
// { name: 'Sum', value: 791 },
// { name: 'Variable', value: 1124 },
// { name: 'Variance', value: 1876 },
// { name: 'Xor', value: 1101 }
// ]
// },
// {
// name: 'scale',
// children: [
// { name: 'IScaleMap', value: 2105 },
// { name: 'LinearScale', value: 1316 },
// { name: 'LogScale', value: 3151 },
// { name: 'OrdinalScale', value: 3770 },
// { name: 'QuantileScale', value: 2435 },
// { name: 'QuantitativeScale', value: 4839 },
// { name: 'RootScale', value: 1756 },
// { name: 'Scale', value: 4268 },
// { name: 'ScaleType', value: 1821 },
// { name: 'TimeScale', value: 5833 }
// ]
// }
// ]
// };
this.option.series[0].data = echartsData this.option.series[0].data = echartsData
console.log(9999, this.option.series[0].data) console.log(9999, this.option.series[0].data)
this.option && myChart.setOption(this.option); //树绑定事件
let that = this
this.myChart.on('click', function (params) {
console.log('查看文档', params)
// 查询文档
// params.data.name
that.getStandardSystemQuery('');
});
this.option && this.myChart.setOption(this.option);
},
// 搜索文件
getStandardSystemQuery(filename) {
console.log('搜索', filename)
let params = {
filename,
schemeId: this.schemeId,
filetype: this.filetype,
}
standardSystemQuery(params).then(res => {
if (res.code == 200) {
this.fileList = res.data
this.showChart = false
}
})
}, },
// 点击文件
clickFile(item) {
this.showNewsDialog = true
this.fileTitle = item.fileName
this.fileSrc = process.env.VUE_APP_PATH_PRE + item.filePath
},
// 搜索文件
enterKeyup() {
this.showChart = false
this.getStandardSystemQuery(this.searchContent, '')
},
// 点击标准统计
clickBztj(value) {
this.filetype = value
// this.schemeId = ""
this.getStandardSystemQuery()
console.log(value)
}
},
watch: {
searchContent(value) {
if (value.length == 0) {
console.log('监听')
this.showChart = true
}
}
} }
} }
</script> </script>
@ -398,7 +433,6 @@ export default {
position: relative; position: relative;
top: 7.8vh; top: 7.8vh;
height: calc(100% - 7.8vh); height: calc(100% - 7.8vh);
// border: 1px solid red;
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
@ -462,7 +496,7 @@ export default {
.bztj-card { .bztj-card {
width: 100%; width: 100%;
height: 240px; height: 26.086vh;
background-image: url('../../../public/images/bztxcard.png'); background-image: url('../../../public/images/bztxcard.png');
background-size: 99% 100%; background-size: 99% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -486,42 +520,65 @@ export default {
.gj, .gj,
.hy, .hy,
.sj, .sj,
.dbz { .dbz,
.all {
width: 100px; width: 100px;
text-align: center; text-align: center;
position: absolute; position: absolute;
// border: 1px solid red;
} }
.gj { .gj {
left: 0; left: 0;
top: -10px; top: -10px;
// border: 1px solid red;
} }
.gj:hover {
cursor: pointer;
}
.hy { .hy {
right: 0; right: 0;
top: -10px; top: -10px;
} }
.hy:hover {
cursor: pointer;
}
.sj { .sj {
left: 0; left: 0;
bottom: 35px; bottom: 35px;
} }
.sj:hover {
cursor: pointer;
}
.dbz { .dbz {
right: 0; right: 0;
bottom: 35px; bottom: 35px;
} }
.dbz:hover {
cursor: pointer;
}
.all {
left: 150px;
top:5.978vh;
}
.all:hover {
cursor: pointer;
}
} }
.bd { .bd {
.item { .item {
margin: auto; margin: auto;
height: 100px; height: 10.87vh;
width: 40%; width: 40%;
// border: 1px solid red;
background-image: url('../../../public/images/xcybg.png'); background-image: url('../../../public/images/xcybg.png');
background-size: 100% 100%; background-size: 100% 100%;
background-position-y: 15px; background-position-y: 15px;
@ -562,13 +619,18 @@ export default {
.search-wrap { .search-wrap {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center; align-items: center;
height: 50px; height: 5.435vh;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-right: 20px; padding-right: 20px;
.imgs {
width: 30px;
margin-left: 20px;
}
.search { .search {
width: 150px; width: 150px;
width: 100%; width: 100%;
@ -579,18 +641,97 @@ export default {
border: 1px solid; border: 1px solid;
border-image: linear-gradient(124deg, rgb(119, 194, 251), rgb(43, 101, 215), rgb(43, 101, 215)) 1 1; border-image: linear-gradient(124deg, rgb(119, 194, 251), rgb(43, 101, 215), rgb(43, 101, 215)) 1 1;
background: none; background: none;
height: 30px; height: 3.261vh;
color: #fff; color: #fff;
} }
} }
.charts { .flexs {
justify-content: flex-end;
}
.charts,
.contents {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 3.261vh);
}
.contents {
box-sizing: border-box;
padding: 20px 0 0 20px;
display: flex;
flex-wrap: wrap;
.item {
width: 200px;
height: 21.74vh;
margin: 0 20px 2.174vh 0;
.imgWrap {
margin: 20px auto;
width: 100px;
height: 10.87vh;
}
.title {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.item:hover {
background-image: url('../../../public/images/pdfbg.png');
background-size: 100% 100%;
cursor: pointer;
}
.nodata {
width: 100%;
height: 650px;
line-height: 650px;
text-align: center;
font-size: 20px;
opacity: 0.7;
}
} }
} }
} }
/deep/ .el-dialog__title {
color: #fff;
font-size: 16px;
}
/deep/ .el-dialog__body {
padding: 0 20px 20px;
height: 69.565vh;
}
/deep/.el-dialog__wrapper {
// position: absolute !important;
margin: auto;
height: 86.956vh;
width: 60%;
background-image: url('../../../public/images/vediobg.png');
background-size: 100% 100%;
}
/deep/ .el-dialog {
background: none;
height: 100%;
width: 100%;
margin: 0;
margin-top: 0 !important;
}
} }
</style> </style>

19
src/views/scgl/components/cpcl.vue
Unescape View File

@ -20,14 +20,17 @@ export default {
}, },
mounted() { mounted() {
productOutput().then(res => { productOutput().then(res => {
var xAxisData = res.data.map(item => { if (res.code == 200) {
return item.productName var xAxisData = res.data.map(item => {
}) return item.productName
var seriesData = res.data.map(item => { })
return item.productQuantity var seriesData = res.data.map(item => {
}) return item.productQuantity
this.$refs.cpcl.option.grid.left = 8+"%" })
this.$refs.cpcl.getInitEcharts(xAxisData, seriesData) this.$refs.cpcl.option.grid.left = 8 + "%"
this.$refs.cpcl.getInitEcharts(xAxisData, seriesData)
}
}) })
}, },

6
src/views/scgl/components/nySuggest.vue
Unescape View File

@ -36,7 +36,11 @@ export default {
font-family: SourceHanSansCN, SourceHanSansCN; font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400; font-weight: 400;
color: #ECF4F9; color: #ECF4F9;
overflow: scroll; .content{
height: 12vh;
overflow: scroll;
}
} }
</style> </style>

2
src/views/zygk/components/dsj.vue
Unescape View File

@ -19,7 +19,7 @@
<!-- 作者:{{ itemContent.createBy }} --> <!-- 作者:{{ itemContent.createBy }} -->
</p> </p>
<p class="content"> <p class="content">
{{ itemContent.eventTitle }} {{ itemContent.eventContent }}
</p> </p>
</div> </div>

22
src/views/zygk/components/fwfb.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="fwfb-wrap"> <div class="fwfb-wrap">
<titleCard>{{range}}发文省直辖市分布(篇) <titleCard>{{ range }}发文省直辖市分布(篇)
</titleCard> </titleCard>
<div class="fwfb-chart"> <div class="fwfb-chart">
<div id="fwfb" style="width: 100%;height: 100%;"></div> <div id="fwfb" style="width: 100%;height: 100%;"></div>
@ -10,10 +10,10 @@
<script> <script>
import { distributionOfPublicationsBase } from '../../../api/zygk/index' import { distributionOfPublicationsBase } from '../../../api/zygk/index'
export default { export default {
props:{ props: {
range:{ range: {
type:String, type: String,
default:'全球' default: '全球'
} }
}, },
data() { data() {
@ -75,7 +75,7 @@ export default {
orient: 'vertical', orient: 'vertical',
series: [ series: [
{ {
name: 'Radius Mode', name: '',
type: 'pie', type: 'pie',
radius: [0, 60], radius: [0, 60],
center: ['50%', '50%'], center: ['50%', '50%'],
@ -131,10 +131,14 @@ export default {
}, },
] ]
} },
mapChart:null
} }
}, },
mounted() { mounted() {
window.addEventListener("resize", () => {
this.mapChart.resize();
});
}, },
methods: { methods: {
getfwfbEchart(courtryIndex) { getfwfbEchart(courtryIndex) {
@ -152,8 +156,8 @@ export default {
this.option.legend[0].data = this.option.series[0].data.slice(0, 4) this.option.legend[0].data = this.option.series[0].data.slice(0, 4)
this.option.legend[1].data = this.option.series[0].data.slice(4, 8) this.option.legend[1].data = this.option.series[0].data.slice(4, 8)
var chartDom = document.getElementById('fwfb'); var chartDom = document.getElementById('fwfb');
var myChart = this.$echarts.init(chartDom); this.mapChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && this.mapChart.setOption(this.option);
} }
}) })

13
src/views/zygk/components/fwqs.vue
Unescape View File

@ -133,10 +133,14 @@ export default {
left: '8%', left: '8%',
right: '0' right: '0'
} }
} },
mapChart:null,
} }
}, },
mounted() { mounted() {
window.addEventListener("resize", () => {
this.mapChart.resize();
});
}, },
methods: { methods: {
getfwqsEchart(courtryIndex) { getfwqsEchart(courtryIndex) {
@ -152,11 +156,8 @@ export default {
return item.count * 1 return item.count * 1
}) })
var chartDom = document.getElementById('fxqs'); var chartDom = document.getElementById('fxqs');
var myChart = this.$echarts.init(chartDom); this.mapChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && this.mapChart.setOption(this.option);
window.addEventListener("resize", () => {
this.mapChart.resize();
});
} }
}) })

43
src/views/zygk/components/fwyj.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="fwyj-wrap"> <div class="fwyj-wrap">
<titleCard>{{range}}功能农业领域发文研究分支分布</titleCard> <titleCard>{{ range }}功能农业领域发文研究分支分布</titleCard>
<div class="fwyj-zx"> <div class="fwyj-zx">
<div id="fxyj" style="width: 100%;height: 100%;"> <div id="fxyj" style="width: 100%;height: 100%;">
</div> </div>
@ -10,10 +10,10 @@
<script> <script>
import { researchBranchDistributionBase } from '../../../api/zygk' import { researchBranchDistributionBase } from '../../../api/zygk'
export default { export default {
props:{ props: {
range:{ range: {
type:String, type: String,
default:'全球' default: '全球'
} }
}, },
data() { data() {
@ -79,7 +79,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'], data: [],
fontSize: 10, fontSize: 10,
axisLabel: { axisLabel: {
interval: 0, //0 表示所有标签都显示 interval: 0, //0 表示所有标签都显示
@ -105,7 +105,7 @@ export default {
{ {
// name: '发文量', // name: '发文量',
type: 'bar', type: 'bar',
data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200], data: [],
showBackground: true, showBackground: true,
barWidth: 6, // 柱子的宽度 barWidth: 6, // 柱子的宽度
// 每根柱子的样式 // 每根柱子的样式
@ -132,26 +132,37 @@ export default {
}, },
] ],
mapChart: null
} }
} }
}, },
mounted() { mounted() {
window.addEventListener("resize", () => {
this.mapChart.resize();
});
}, },
methods: { methods: {
getfwyjEchart(courtryIndex) { getfwyjEchart(courtryIndex) {
let params = { let params = {
articleCountryType: courtryIndex articleCountryType: courtryIndex
} }
researchBranchDistributionBase(params).then(res => { }) researchBranchDistributionBase(params).then(res => {
var chartDom = document.getElementById('fxyj'); if (res.code == 200) {
var myChart = this.$echarts.init(chartDom); this.option.yAxis.data = res.data.map(item => {
this.option && myChart.setOption(this.option); return item.key
window.addEventListener("resize", () => { })
this.mapChart.resize(); this.option.series[0].data = res.data.map(item => {
}); return item.count * 1
})
var chartDom = document.getElementById('fxyj');
this.mapChart = this.$echarts.init(chartDom);
this.option && this.mapChart.setOption(this.option);
}
})
} }
} }
} }

11
src/views/zygk/components/smzq.vue
Unescape View File

@ -213,12 +213,15 @@ export default {
}, },
] ]
} },
mapChart:null
} }
}, },
mounted() { mounted() {
window.addEventListener("resize", () => {
this.mapChart.resize();
});
}, },
methods: { methods: {
getsmzqEchart(courtryIndex) { getsmzqEchart(courtryIndex) {
@ -236,8 +239,8 @@ export default {
}) })
console.log("this.option.series[0]", this.option.series[0]) console.log("this.option.series[0]", this.option.series[0])
var chartDom = document.getElementById('smzq'); var chartDom = document.getElementById('smzq');
var myChart = this.$echarts.init(chartDom); this.mapChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && this.mapChart.setOption(this.option);
} }
}) })

25
src/views/zygk/components/zlnd.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="zlnd-wrap"> <div class="zlnd-wrap">
<titleCard>{{range}}功能农业领域专利年代分布</titleCard> <titleCard>{{ range }}功能农业领域专利年代分布</titleCard>
<div class="zlnd-zx"> <div class="zlnd-zx">
<div id="zlnd" style="width: 100%;height: 100%;"> <div id="zlnd" style="width: 100%;height: 100%;">
</div> </div>
@ -10,10 +10,10 @@
<script> <script>
import { distributionPatentAgesTheAgriculturalField } from '../../../api/zygk/index' import { distributionPatentAgesTheAgriculturalField } from '../../../api/zygk/index'
export default { export default {
props:{ props: {
range:{ range: {
type:String, type: String,
default:'全球' default: '全球'
} }
}, },
data() { data() {
@ -113,11 +113,14 @@ export default {
left: '10%', left: '10%',
right: '0' right: '0'
} }
} },
mapChart:null
} }
}, },
mounted() { mounted() {
window.addEventListener("resize", () => {
this.mapChart.resize();
});
}, },
methods: { methods: {
getzlndEchart(courtryIndex) { getzlndEchart(courtryIndex) {
@ -133,11 +136,9 @@ export default {
return item.count * 1 return item.count * 1
}) })
var chartDom = document.getElementById('zlnd'); var chartDom = document.getElementById('zlnd');
var myChart = this.$echarts.init(chartDom); this.mapChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && this.mapChart.setOption(this.option);
window.addEventListener("resize", () => {
this.mapChart.resize();
});
} }
}) })

2
src/views/zygk/components/zlsource.vue
Unescape View File

@ -75,7 +75,7 @@ export default {
orient: 'vertical', orient: 'vertical',
series: [ series: [
{ {
name: 'Radius Mode', name: '',
type: 'pie', type: 'pie',
radius: [0, 60], radius: [0, 60],
center: ['50%', '50%'], center: ['50%', '50%'],

23
src/views/zygk/components/zlyjfb.vue
Unescape View File

@ -78,7 +78,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'], data: [],
fontSize: 10, fontSize: 10,
axisLabel: { axisLabel: {
interval: 0, //0 表示所有标签都显示 interval: 0, //0 表示所有标签都显示
@ -104,7 +104,7 @@ export default {
{ {
// name: '发文量', // name: '发文量',
type: 'bar', type: 'bar',
data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200], data: [],
showBackground: true, showBackground: true,
barWidth: 6, // 柱子的宽度 barWidth: 6, // 柱子的宽度
itemStyle: { itemStyle: {
@ -131,7 +131,8 @@ export default {
] ]
} },
mapChart:null
} }
}, },
@ -146,11 +147,19 @@ export default {
articleCountryType: courtryIndex articleCountryType: courtryIndex
} }
researchBranchDistribution(params).then(res => { researchBranchDistribution(params).then(res => {
if (res.code == 200) {
this.option.yAxis.data = res.data.map(item => {
return item.key
})
this.option.series[0].data = res.data.map(item => {
return item.count * 1
})
var chartDom = document.getElementById('zlyjfb');
this.mapChart = this.$echarts.init(chartDom);
this.option && this.mapChart.setOption(this.option);
}
}) })
var chartDom = document.getElementById('zlyjfb');
var myChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option);
} }
} }

12
src/views/zygk/components/zxfb.vue
Unescape View File

@ -18,7 +18,6 @@ export default {
}, },
data() { data() {
return { return {
option: { option: {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -124,11 +123,8 @@ export default {
bottom: '30%', bottom: '30%',
}, },
} },
mapChart:null
} }
}, },
mounted() { mounted() {
@ -156,8 +152,8 @@ export default {
}) })
console.log(this.option.xAxis.data, this.option.yAxis.data, this.option.series.data) console.log(this.option.xAxis.data, this.option.yAxis.data, this.option.series.data)
var chartDom = document.getElementById('zxfb'); var chartDom = document.getElementById('zxfb');
var myChart = this.$echarts.init(chartDom); this.mapChart = this.$echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && this.mapChart.setOption(this.option);
} }
}) })

Write Preview
Loading…
Cancel
Save