多柱状体滚动

最新推荐文章于 2026-08-18 15:59:11 发布

原创最新推荐文章于 2026-08-18 15:59:11 发布 · 117 阅读

本内容遵循CC 4.0 BY-SA版权协议

此代码段展示了在一个Vue应用中如何实现数据的筛选、日期选择、表格展示以及Echarts图表渲染。用户可以选择日期范围，并从二级受检病区下拉框中选择科室。表格数据和Echarts图表会根据选择更新，同时提供导出功能，将数据显示在图表上并转化为图片导出。

<div class="workPreview" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中"

element-loading-spinner="el-icon-loading"

element-loading-background="rgba(0, 0, 0, 0.7)">

<el-button

type="primary"

slot="OutBtn"

id="save"

size="mini"

style="position: absolute;right:8px;height:30px"

@click="download"

>导出</el-button>

</headers>

<div

style="display:flex;position: relative;padding-left:4px;width: 18%;max-width: 150px;"

v-if="roleObj.roleNo=='00070301'"

<select-index

:testedWardSelectData="testedWardSelectData"

@searchSelectDept="searchSelectDept"

:popoverwidth='"150"'

:showData="showArr"

:selectType="true"

</div>

<el-date-picker

style="width: 18%;max-width: 150px;"

v-model="searchParameters.timeStr"

value-format="yyyy-MM-dd"

type="date"

placeholder="选择日期"

:clearable='false'

:editable="false"

@change="gettimeStr()"

></el-date-picker>

<el-date-picker

style="width: 18%;max-width: 150px;"

v-model="searchParameters.timeEnd"

value-format="yyyy-MM-dd"

type="date"

placeholder="选择日期"

:clearable='false'

:editable="false"

@change="gettimeEnd()"

></el-date-picker>

</div>

<!-- <div id="myChart2" class="myChart2" style="wdith:100%;" v-if="echartArr.length!=0"

:style="{minWidth: '100%',width:myChartWrapW,background:'#fff','border-radius': '8px',}"

></div> -->

<div

style="width:100%;display:flex;justify-content:space-between;margin-top:4px;"

<div

id="myChart2"

class="myChart2"

:style="{minWidth: '100%',width:myChartWrapW,background:'#fff','border-radius': '8px',}"

></div>

<el-table

:data="echartArr"

:row-style="{height:38+'px',color:'#000000'}"

:header-cell-style="{height:38+'px',padding:0+'px',color:'#000000',fontWeight:'500'}"

:cell-style="{padding:0+'px'}"

height= 'calc(100vh - 540px)'

<el-table-column prop="levelName" label="层级" align="center" min-width="70"></el-table-column>

<el-table-column v-for="(item,index) in tabledata.levelProportionVoList" :key="index" align="center" :label="item.dateNow">

<el-table-column label="人数" align="center" min-width="50" :prop="'numberSum'+index"></el-table-column>

<el-table-column label="占比" align="center" min-width="50" :prop="'proportion'+index"></el-table-column>

</el-table-column>

</el-table>

</div>

<No-data/>

</div>

</template>

import NoData from "@/views/components/component/noData/index.vue";

import headers from "@/views/handerView/statisticalanalysis/components/headers.vue";

import selectIndex from "@/views/components/component/testedWardSelect/selectIndex.vue";

import {

// getNightShiftNumberDetail,

// statisticAnalysisgetNightShiftNumber,

statisticAnalysisgetShiftComparison,

personalFilesselectDictDeptList,

exportShiftComparison

} from "@/api/handleView/statisticalanalysis";

import {

dictDatadictType

} from "@/api/handleView/dict";

import py from "@/utils/lbdz";

import { output } from "@/utils/lbdz";

import { CanvasDrawImage } from "@/views/handerView/statisticalanalysis/js/index.js";

export default {

name: "trialrecord",

components: {

headers,

NoData,

selectIndex

data() {

return {

roleObj:JSON.parse(sessionStorage.getItem('roleObj')),

requestHttpFlag: false,

fullscreenLoading:true,

searchParameters:{

preparerDepartCode:"",

timeStr: "",

timeEnd: "",

myChartWrapW:"",

echartArr: [

// { name: "大学本科", value: "1", id: "collegeRegularSum" },

// { name: "大学专科", value: "2", id: "collegeJuniorSum" },

// { name: "研究生", value: "3", id: "postgraduateSum" },

// { name: "中等职业", value: "4", id: "secondaryVocationalSum" },

// { name: "中等专科", value: "5", id: "secondarySpecialtySum" }

tabledata:[],

seriesarr:[],

testedWardSelectData: {},

showArr: {},

};

created() {

setTimeout(() => {

this.fullscreenLoading = false

}, 1000);

mounted() {

this.getTestedWardlistTwo()

// this.getauditRecordList()

this.fun_date()

methods: {

fun_date(){

var date1 = new Date()

var month1 = ""

if((date1.getMonth()+1)<10){

month1 = "0"+(date1.getMonth()+1)

}else{

month1 = ""+(date1.getMonth()+1)

}

var time2=date1.getFullYear()+"-"+month1+"-"+date1.getDate();//time1表示当前时间

var date2 = new Date(date1);

date2.setDate(date1.getDate()-6);

var month2 = ""

if((date1.getMonth()+1)<10){

month2 = "0"+(date2.getMonth()+1)

}else{

month2 = ""+(date2.getMonth()+1)

}

var time1 = date2.getFullYear()+"-"+month2+"-"+date2.getDate();

console.log(time1,time2,"===============")

this.searchParameters.timeStr=time1 //

this.searchParameters.timeEnd=time2 //

// return time2;

setTimeout(() => {

this.getauditRecordList();

}, 500);

inputHandleChange() {

this.debounce(() => {

this.searchParameters.pageNum = 1;

this.getauditRecordList();

}, 500)();

handleChange() {

// this.searchParameters.pageNum = 1;

this.getauditRecordList();

gettimeStr(){

var data1 = Date.parse(this.searchParameters.timeStr.replace(/-/g, "/"));

var data2 = Date.parse(this.searchParameters.timeEnd.replace(/-/g, "/"));

var datadiff = data2 - data1;

if(datadiff<0){

this.$message({

message: '开始时间不能大于结束时间!',

type: 'warning'

});

this.searchParameters.timeStr=""

return;

}

var time = 30 * 24 * 60 * 60 * 1000;

if (this.searchParameters.timeStr.length > 0 && this.searchParameters.timeEnd.length > 0) {

if (datadiff > time) {

this.$message({

message: '前后时间间隔不能大于30天',

type: 'warning'

});

this.searchParameters.timeStr=""

}else{

this.handleChange()

}

gettimeEnd(){

var data1 = Date.parse(this.searchParameters.timeStr.replace(/-/g, "/"));

var data2 = Date.parse(this.searchParameters.timeEnd.replace(/-/g, "/"));

var datadiff = data2 - data1;

if(datadiff<0){

this.$message({

message: '结束时间不能小于开始时间!',

type: 'warning'

});

this.searchParameters.timeEnd=""

return;

}

var time = 30 * 24 * 60 * 60 * 1000;

console.log(this.searchParameters.timeStr.length)

console.log(this.searchParameters.timeEnd.length)

if (this.searchParameters.timeStr.length > 0 && this.searchParameters.timeEnd.length > 0) {

if (datadiff > time) {

this.$message({

message: '前后时间间隔不能大于30天',

type: 'warning'

});

this.searchParameters.timeEnd=""

}else{

this.handleChange()

}

async download() {

if (this.antiFlag) {

return;

}

this.antiFlag = true;

let dirUrl = await CanvasDrawImage();

console.log(dirUrl,"===================")

let obj = {

url:dirUrl.value

}

exportShiftComparison(obj)

.then(response => {

if (response) {

output(this.$route.query.name, response);

this.$message.success("导出成功");

} else {

this.$message.error("导出失败");

}

this.antiFlag = false;

})

.catch(() => {

this.$message.error("导出失败");

this.antiFlag = false;

});

// 查询二级受检病区下拉框数据列表

getTestedWardlistTwo() {

// this.testedWardSelectData = [{"id":null,"deptCode":"-1","deptName":"全部","pym":null,"parentCode":null,"parentName":null,"levelCode":null,"deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["G","H","K","M","N","S","X","Z"],"deptKeyList":[{"firstLetter":"G","deptList":[{"id":"22","deptCode":"352","deptName":"ICU","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"24","deptCode":"0006","deptName":"骨科三","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"18","deptCode":"432","deptName":"骨科二","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"17","deptCode":"32","deptName":"骨科一","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"H","deptList":[{"id":"16","deptCode":"1233","deptName":"呼吸内科","pym":"H","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"K","deptList":[{"id":"19","deptCode":"55","deptName":"康复科","pym":"K","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"M","deptList":[{"id":"8","deptCode":"1101001","deptName":"妇产科二","pym":"M","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"N","deptList":[{"id":"21","deptCode":"123","deptName":"NICU","pym":"N","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"S","deptList":[{"id":"23","deptCode":"5223","deptName":"神经内科一","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"15","deptCode":"1222","deptName":"肾内科","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"X","deptList":[{"id":"25","deptCode":"0007","deptName":"心血管内科一","pym":"X","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"26","deptCode":"0008","deptName":"心血管内科二","pym":"X","parentCode":"100","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"Z","deptList":[{"id":"20","deptCode":"534","deptName":"重症科","pym":"Z","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}},{"id":"5555","deptCode":"5555","deptName":"内科系","pym":"N","parentCode":"6666","parentName":null,"levelCode":"03","deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["G","H","K","M","N","S","X","Z"],"deptKeyList":[{"firstLetter":"G","deptList":[{"id":"22","deptCode":"352","deptName":"ICU","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"24","deptCode":"0006","deptName":"骨科三","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"18","deptCode":"432","deptName":"骨科二","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"17","deptCode":"32","deptName":"骨科一","pym":"G","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"H","deptList":[{"id":"16","deptCode":"1233","deptName":"呼吸内科","pym":"H","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"K","deptList":[{"id":"19","deptCode":"55","deptName":"康复科","pym":"K","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"M","deptList":[{"id":"8","deptCode":"1101001","deptName":"妇产科二","pym":"M","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"N","deptList":[{"id":"21","deptCode":"123","deptName":"NICU","pym":"N","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"S","deptList":[{"id":"23","deptCode":"5223","deptName":"神经内科一","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null},{"id":"15","deptCode":"1222","deptName":"肾内科","pym":"S","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"X","deptList":[{"id":"25","deptCode":"0007","deptName":"心血管内科一","pym":"X","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null},{"firstLetter":"Z","deptList":[{"id":"20","deptCode":"534","deptName":"重症科","pym":"Z","parentCode":"5555","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}},{"id":"975103281070080000","deptCode":"100","deptName":"重症科系","pym":"Z","parentCode":"6666","parentName":null,"levelCode":"03","deptKey":{"firstLetter":null,"deptList":null,"firstLetterList":["X"],"deptKeyList":[{"firstLetter":"X","deptList":[{"id":"26","deptCode":"0008","deptName":"心血管内科二","pym":"X","parentCode":"100","parentName":null,"levelCode":"04","deptKey":null}],"firstLetterList":null,"deptKeyList":null,"type":null}],"type":null}}] ;

personalFilesselectDictDeptList().then(response => {

if (response.code == "200") {

// this.testedWardSelectData = response.data.deptList;

// console.log(response, "response===================");

// return;

let deptObj = {};

response.data.deptList.forEach((item, index) => {

if (item.deptCode == "-1") {

deptObj = item.deptKey;

item.deptKey.deptKeyList.forEach((node, next) => {

node.deptList.forEach(three => {

three.pymTwo = py.chineseToPinYin(three.deptName);

});

}

});

this.testedWardSelectData = deptObj;

}

});

searchSelectDept(params) {

console.log(params,"===========")

this.searchParameters.preparerDepartCode = params.selectDeptCode;

this.getauditRecordList();

//人员列表

getauditRecordList() {

// if (this.requestHttpFlag) {

// return;

// }

// this.requestHttpFlag = true;

var params = {

preparerDepartCode: this.searchParameters.preparerDepartCode, //

timeStr: this.searchParameters.timeStr, //

timeEnd: this.searchParameters.timeEnd, //

};

statisticAnalysisgetShiftComparison(params)

.then(response => {

if (response.code == "200") {

this.echartArr=[]

this.tabledata = response.data;

var personarr=[]

this.seriesarr=[]

this.tabledata.levelList.forEach(element => {

var params={

name:element,

type:'bar',

// stack: "总量",

// barWidth : 30,//柱图宽度

// barGap: '-45%',

barWidth: 20,

barGap:1, //柱子之间间距

data:[],

// data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4],

}

this.seriesarr.push(params)

});

// console.log(this.seriesarr,"===========this.seriesarr")

this.tabledata.levelProportionVoList.forEach((element,index) => {

// console.log(element,"===========element===index")

personarr=[]

element.levelProportionDetailVoList.forEach((item,itemindex)=> {

this.seriesarr[itemindex].data.push(item.numberSum)

this.tabledata.levelProportionVoList[0].levelProportionDetailVoList[itemindex]["numberSum" + index] = item.numberSum

this.tabledata.levelProportionVoList[0].levelProportionDetailVoList[itemindex]["proportion" + index] = item.proportion

});

// console.log(this.seriesarr,"====================seriesarr")

// console.log(this.tabledata.levelProportionVoList[0].levelProportionDetailVoList,"====================this.tabledata.levelProportionVoList[0].levelProportionDetailVoList")

if(this.tabledata.levelProportionVoList.length>0 && this.tabledata.levelProportionVoList[0].levelProportionDetailVoList){

this.echartArr=this.tabledata.levelProportionVoList[0].levelProportionDetailVoList

}

console.log(this.echartArr,"====================tabledata")

if(this.tabledata.levelProportionVoList.length!=0){

this.myChartWrapW = (this.tabledata.levelProportionVoList.length + 1) * 260 + 'px';

}else{

this.myChartWrapW = '100px'

}

console.log(this.myChartWrapW,"==============this.myChartWrapW")

this.$nextTick(()=>{

var myChart = this.$echarts.init(document.getElementById('myChart2'));

myChart.dispose();

this.distribution2();

})

}

})

.catch(err => {

setTimeout(() => {

// this.requestHttpFlag = false;

}, 500);

});

distribution2() {

let myChart2 = this.$echarts.init(document.getElementById("myChart2"));

// let option = {

// tooltip : {

// trigger: 'axis'

// },

// legend: {

// // data:['人数','占比%'],

// bottom: "bottom"

// },

// calculable : true,

// xAxis : [

// {

// type : 'category',

// // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

// data :this.tabledata.dateList

// }

// ],

// yAxis : [

// {

// type : 'value',

// minInterval:1,

// }

// ],

// series :this.seriesarr

// // series : [

// // {

// // name:'人数',

// // type:'bar',

// // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

// // // data :this.tabledata.countList

// // },

// // {

// // name:'占比%',

// // type:'bar',

// // // data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

// // data :this.tabledata.proportionList

// // }

// // ]

// };

let option = {

// backgroundColor: '#00265f',

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'shadow'

}

legend: {

// data: ['引镇入库数', '引镇出库数', '航天入库数','航天出库数'],

align: 'right',

top:'15',

right: 10,

// textStyle: {

// color: "#fff"

// },

itemWidth: 10,

itemHeight: 10,

itemGap: 15,

// bottom: "bottom"

grid: {

left: '10',

right: '10',

bottom: '5%',

containLabel: true

xAxis: [{

type: 'category',

data:this.tabledata.dateList,

axisLine: {

show: true,

lineStyle: {

// color: "#fff",

width: 1,

type: "solid"

axisTick: {

show: false,

axisLabel: {

show: true,

// textStyle: {

// color: "#fff",

// }

}],

yAxis: [{

type: 'value',

minInterval:1,

axisLabel: {

fontSize:'10',

// formatter: '{value} %'

axisTick: {

show: false,

axisLine: {

show: false,

lineStyle: {

// color: "#fff",

width: 1,

type: "solid"

splitLine: {

lineStyle: {

type:'dashed',

color: "#666666",

}

}],

// dataZoom: [ //给x轴设置滚动条

// {

// start: 0, //默认为0

// end: 100 - 1500 / 31, //默认为100

// type: 'slider',

// show: true,

// xAxisIndex: [0],

// handleSize: 10, //滑动条的左右2个滑动条的大小

// height: 6, //组件高度

// left: 50, //左边的距离

// right: 40, //右边的距离

// bottom: 0, //右边的距离

// handleColor: '#ddd', //h滑动图标的颜色

// // handleStyle: {

// // borderColor: "#cacaca",

// // borderWidth: "1",

// // shadowBlur: 2,

// // background: "#ddd",

// // shadowColor: "#ddd",

// // },

// // fillerColor: '#808080',

// // backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色

// showDataShadow: false, //是否显示数据阴影默认auto

// showDetail: false, //即拖拽时候是否显示详细数值信息默认true

// // handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',

// // filterMode: 'filter',

// },

// //下面这个属性是里面拖到

// {

// type: 'inside',

// show: true,

// xAxisIndex: [0],

// start: 0, //默认为1

// end: 100 - 1500 / 31, //默认为100

// },

// // {

// // start: 0, //默认为0