|
@@ -0,0 +1,420 @@
|
|
|
+<template>
|
|
|
+ <div class="benchmarkBasicPage">
|
|
|
+ <div class="benchmarkBasicPageBtn">
|
|
|
+ <div class="collectSeach" :style="$utils.collectSeachSty()">
|
|
|
+ <div class="exceed">
|
|
|
+ <span class="exceedSpan" style="width: 50px">机构:</span>
|
|
|
+ <el-select v-model="orgVal" placeholder="请选择机构" multiple collapse-tags>
|
|
|
+ <el-option
|
|
|
+ v-for="item in orgSelectArr"
|
|
|
+ :key="item.orgCode"
|
|
|
+ :label="item.orgName"
|
|
|
+ :value="item.orgCode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="exceed exceedWidth">
|
|
|
+ <span class="exceedSpan" style="width: 50px">指标:</span>
|
|
|
+ <el-select v-model="itemVal" placeholder="请选择指标" @change="changeItemVal">
|
|
|
+ <el-option
|
|
|
+ v-for="item in itemSelectArr"
|
|
|
+ :key="item.irn"
|
|
|
+ :label="item.itemFieldName"
|
|
|
+ :value="item.irn">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="exceed">
|
|
|
+ <span class="exceedSpan" style="width: 70px">指标项:</span>
|
|
|
+ <el-select v-model="evalVal" placeholder="请选择指标项" filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in evalSelectArr"
|
|
|
+ :key="item.itemsCode"
|
|
|
+ :label="item.itemsName"
|
|
|
+ :value="item.itemsCode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="exceed exceedWidth">
|
|
|
+ <span class="exceedSpan" style="width: 50px">频度:</span>
|
|
|
+ <el-select v-model="rangeVal" placeholder="请选择频度" filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in rangeArr"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="exceed">
|
|
|
+ <span class="exceedSpan" style="width: 50px">时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="resAnnual"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ type="daterange"
|
|
|
+ placeholder="请选择时间"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <seachs @handleSeach="getSeachData" :showRest="false"></seachs>
|
|
|
+ </div>
|
|
|
+ <div class="benchmarkBasicPageTableData">
|
|
|
+ <el-table :data="benchmarkBasicPageData" style="width: 100%" :class="unitRatingTableSty()">
|
|
|
+ <el-table-column type="index" label="序号" align="center"></el-table-column>
|
|
|
+ <el-table-column v-for="(it, index) in benchmarkBasicHeader" :key="index" :label="it.name" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{scope.row[it.code]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div id="basicEcharts" style="width: 100%; height: 40vh"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import seachs from '../seachGroup.vue'
|
|
|
+import {apiPostbenchmarkBasicList, apiPostTreeSelectList1015, apiPostTreeSelectList1019, apiPostTreeSelectList1020} from '../../api/api'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ seachs
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statesVisible: false,
|
|
|
+ benchmarkBasicPageData:[],
|
|
|
+ benchmarkBasicHeader: [],
|
|
|
+ orgVal: [],
|
|
|
+ itemVal: '',
|
|
|
+ evalVal: '',
|
|
|
+ rangeVal: 'M',
|
|
|
+ resAnnual: [],
|
|
|
+ orgSelectArr: [],
|
|
|
+ itemSelectArr: [],
|
|
|
+ evalSelectArr: [],
|
|
|
+ rangeArr: [],
|
|
|
+ winPix: window.devicePixelRatio,
|
|
|
+ innerWidth: window.innerWidth
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.rangeArr = [
|
|
|
+ {
|
|
|
+ label: '日',
|
|
|
+ value: 'D'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '月',
|
|
|
+ value: 'M'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '年',
|
|
|
+ value: 'Y'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getorgSelectList()
|
|
|
+ this.getEchartsData()
|
|
|
+ this.resAnnual = [this.getTime(new Date(new Date().getTime() - 6*30*24*60*60*1000)), this.getTime(new Date(new Date().getTime()))]
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 获取组织机构数据
|
|
|
+ getorgSelectList() {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ type: 1015,
|
|
|
+ map: {
|
|
|
+ orgLevel: "3"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ apiPostTreeSelectList1015(params).then(datas =>{
|
|
|
+ if (datas && datas.data.data) {
|
|
|
+ that.orgSelectArr = datas.data.data
|
|
|
+ that.orgVal = [datas.data.data[0].orgCode, datas.data.data[1].orgCode]
|
|
|
+ that.getfiledDatatypeList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeItemVal(val) {
|
|
|
+ this.evalSelectArr = []
|
|
|
+ this.getevalDatatypeList(val)
|
|
|
+ },
|
|
|
+ //查询主题域
|
|
|
+ getfiledDatatypeList() {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ type: 1019,
|
|
|
+ map: {
|
|
|
+ pId: ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ apiPostTreeSelectList1019(params).then(datas =>{
|
|
|
+ if (datas && datas.data.data) {
|
|
|
+ that.itemSelectArr = datas.data.data
|
|
|
+ // that.itemVal = datas.data.data[0].itemFieldCode
|
|
|
+ that.itemVal = datas.data.data[1].irn
|
|
|
+ that.getevalDatatypeList(that.itemVal)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //查询指标项
|
|
|
+ getevalDatatypeList(val) {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ type: 1020,
|
|
|
+ map: {
|
|
|
+ irn: val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ apiPostTreeSelectList1020(params).then(datas =>{
|
|
|
+ if (datas && datas.data.data) {
|
|
|
+ that.evalSelectArr = datas.data.data
|
|
|
+ that.evalVal = datas.data.data[0].itemsCode
|
|
|
+ that.getbenchmarkBasicList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取指标数据
|
|
|
+ getbenchmarkBasicList() {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ type: '1011',
|
|
|
+ map: {
|
|
|
+ sysCode: that.orgVal,
|
|
|
+ itemCode: [that.evalVal],
|
|
|
+ fdlx: [
|
|
|
+ "FDLX100",
|
|
|
+ "FDLX400",
|
|
|
+ "FDLX200"
|
|
|
+ ],
|
|
|
+ range: 'M',
|
|
|
+ dataType: '429668',
|
|
|
+ kj: 'JT',
|
|
|
+ startTime: that.resAnnual[0],
|
|
|
+ endTime: that.resAnnual[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ apiPostbenchmarkBasicList(params).then(datas =>{
|
|
|
+ if (datas && datas.data) {
|
|
|
+ if (datas.data.title) {
|
|
|
+ that.benchmarkBasicHeader = datas.data.title
|
|
|
+ }
|
|
|
+ if (datas.data.list) {
|
|
|
+ that.benchmarkBasicPageData = datas.data.list
|
|
|
+ let xaxisArr = []
|
|
|
+ let seriesArr = []
|
|
|
+ that.benchmarkBasicPageData.forEach(it => {
|
|
|
+ xaxisArr.push(it.time)
|
|
|
+
|
|
|
+ })
|
|
|
+ that.benchmarkBasicHeader.forEach(iv =>{
|
|
|
+ if (iv.code !== 'time') {
|
|
|
+ let seriesitemArr = []
|
|
|
+ that.benchmarkBasicPageData.forEach(item => {
|
|
|
+ seriesitemArr.push(item[iv.code])
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ name: iv.name,
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ data: seriesitemArr
|
|
|
+ }
|
|
|
+ seriesArr.push(obj)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.getEchartsData(xaxisArr, seriesArr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取echarts数据
|
|
|
+ getEchartsData(xaxisArr, seriesArr) {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: xaxisArr
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: seriesArr
|
|
|
+ }
|
|
|
+ let dom = document.getElementById('basicEcharts');
|
|
|
+ dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
|
|
|
+ let chat = this.$echarts.init(dom)
|
|
|
+ chat.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ chat.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTime(date){
|
|
|
+ var y = date.getFullYear();
|
|
|
+ var m = date.getMonth() + 1;
|
|
|
+ m = m < 10 ? ('0' + m) : m;
|
|
|
+ var d = date.getDate();
|
|
|
+ d = d < 10 ? ('0' + d) : d;
|
|
|
+ let timeF = y + '-' + m + '-' + d
|
|
|
+ return timeF
|
|
|
+ },
|
|
|
+ getSeachData() {
|
|
|
+ this.getbenchmarkBasicList()
|
|
|
+ },
|
|
|
+ unitRatingTableSty() {
|
|
|
+ if (this.winPix === 1.25 || this.innerWidth < 1800) {
|
|
|
+ return 'unitRating125Table'
|
|
|
+ } else {
|
|
|
+ return 'unitRating100Table'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.benchmarkBasicPage{
|
|
|
+ .benchmarkBasicPageBtn{
|
|
|
+ .collectSeach{
|
|
|
+ display: flex;
|
|
|
+ padding: 24px 20px;
|
|
|
+ border-bottom: 1px solid#D6DBEA;
|
|
|
+ .exceed{
|
|
|
+ display: flex;
|
|
|
+ .exceedSpan{
|
|
|
+ width: 100px;
|
|
|
+ height: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8991B0;
|
|
|
+ line-height: 12px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+ .el-input{
|
|
|
+ margin-right:10px;
|
|
|
+ height: 40px;
|
|
|
+ .el-input__inner{
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+ .el-input__suffix{
|
|
|
+ .el-select__caret{
|
|
|
+ line-height:30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-date-editor{
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .exceedWidth{
|
|
|
+ .el-select{
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-select{
|
|
|
+ margin-right:10px;
|
|
|
+ .el-input__inner{
|
|
|
+ height:30px;
|
|
|
+ }
|
|
|
+ .el-input__suffix{
|
|
|
+ .el-select__caret{
|
|
|
+ line-height:30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+ .PeriodBtn{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ height: 30px;
|
|
|
+ // width:100px;
|
|
|
+ padding: 0 20px ;
|
|
|
+ // padding-top: 8px;
|
|
|
+ span{
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .benchmarkBasicPageTableData{
|
|
|
+ .unitRating125Table{
|
|
|
+ .el-table__body-wrapper{
|
|
|
+ height: 30vh !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .unitRating100Table{
|
|
|
+ .el-table__body-wrapper{
|
|
|
+ height: 35vh !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ .el-input__inner{
|
|
|
+ height: 30px !important;
|
|
|
+ }
|
|
|
+ .el-radio__label{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .tooltipCC{
|
|
|
+ width: 300px !important;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .tooltipCCDes{
|
|
|
+ width: 50px;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .indicitem{
|
|
|
+ color: #409EFF;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor:pointer;
|
|
|
+ &:hover{
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pagination{
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: end;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-overlay{
|
|
|
+ .startToDia{
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 30px 60px 30px 20px !important;
|
|
|
+ .periodFrom{
|
|
|
+ .el-select, .el-input{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-input{
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flowSty{
|
|
|
+ width: 100%;
|
|
|
+ height: 70vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|