长辛店镇网站建设,网站建设中如何发布信息推广,安阳后营贴吧,苏州软件定制开发描述#xff1a;vue项目中如果在一个页面使用多个时间选择器组件时#xff0c;不同的时间选择器需要分别分开工作 解决方案一
原本是想直接每一个时间选择器都安排一套相对独立的维生系统#xff0c;但是到后面发现繁琐至极#xff0c;而且报错#xff0c;果断放弃#… 描述vue项目中如果在一个页面使用多个时间选择器组件时不同的时间选择器需要分别分开工作 解决方案一
原本是想直接每一个时间选择器都安排一套相对独立的维生系统但是到后面发现繁琐至极而且报错果断放弃
解决方案二
利用vue框架自带的watch 监听属性配合change绑定事件就可以解决这个问题。(代码仅做参考)
templatediv stylemargin-top: 15px!-- 第一行一个饼状图两个表格饼图放中间 --el-row :gutter20 classgaid-titleel-col :span8div classgrid-contentdiv classtitle_hhh4员工排行/h4/divdiv classbox_boxel-table :datatableData v-loadingloading height330el-table-column label排名 aligncentertemplate slot-scopescopespan v-ifscope.row.index 0 classfont red1/spanspan v-else-ifscope.row.index 1 classfont green2/spanspan v-else-ifscope.row.index 2 classfont plue3/spanspan v-else classfontmini{{ scope.row.index 1 }}/span/template/el-table-columnel-table-column label部门 propdepart /el-table-column label姓名 propemployee_name /el-table-column label预约数 propreserve_count /el-table-column label来访数 propvisitor_count /el-table-column label总数 proptotal //el-table/div/div/el-colel-col :span9div classgrid-contentdiv classtitle_hhh4预约环形图/h4/divdiv classbox_boxel-row :gutter10 stylemargin-left: 10pxel-selectsizeminiv-modelcompany_noplaceholder选择查询公司changegetcompany(company_no)clearableel-optionv-foritem in departs:keyitem.value:labelitem.label:valueitem.value/el-option/el-select!-- 在这里绑定了多个change事件希望顺次执行 --!-- 思路利用监听属性来获取时间的数据变化然后把最新的值赋值到对应数据上去最后按条件重新获取数据妙呀 --el-date-pickerstylemargin-left: 8pxsizeminiv-modeldatatimetypedaterangeunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期value-formatyyyy-MM-dd:picker-optionspickerOptionschangegetPieData(), getTime(datatime)/el-date-pickerel-buttontypeprimaryclickrefreshsizeministylemargin-left: 8px刷新/el-button/el-rowdiv classcenterrigin stylemargin-top: 30pxannUlar :ring1ring1 :ring2ring2 :legendlegendData //div/div/div/el-colel-col :span7div classgrid-contentdiv classtitle_hhh4访客排行/h4/divdiv classbox_boxel-table :datatableData1 v-loadingloading height330el-table-column label排名 aligncentertemplate slot-scopescopespan v-ifscope.row.index 0 classfont red1/spanspan v-else-ifscope.row.index 1 classfont green2/spanspan v-else-ifscope.row.index 2 classfont plue3/spanspan v-else classfontmini{{ scope.row.index 1 }}/span/template/el-table-column!-- el-table-column label部门 propdepart / --el-table-column label姓名 propvisitor_name /el-table-column label预约数 propreserve_count /el-table-column label来访数 propvisitor_count /el-table-column label总数 proptotal //el-table/div/div/el-col/el-row!-- 第二行两个折线图 --div classbottomel-row :gutter20 classgaid-titleel-col :span12div classgrid-contentdiv classtitle_hhh4预约折线图/h4/divdiv classbox_boxel-row :gutter10 stylemargin-left: 25pxel-form inlineel-form-item label公司查询el-selectv-modelcompany_no2placeholder选择查询公司changegetcompany2(company_no2)clearableel-optionv-foritem in companylist:keyitem.value:labelitem.label:valueitem.value/el-option/el-select/el-form-itemel-form-item label时间查询el-date-pickerv-modeldatatime2typedaterangeunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期value-formatyyyy-MM-dd:picker-optionspickerOptionschangegetTime(datatime2), getOrderDate()/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickrefresh2刷新/el-button/el-form-item/el-form/el-rowlineChart:xdataxdata:y1y1:y2y2:y3y3:y4y4:legendheadData//div/div/el-colel-col :span12div classgrid-contentdiv classtitle_hhh4部门统计图/h4/divdiv classbox_box/div/div/el-col/el-row/div/div
/templatescript
// 员工排名
import { personnelData } from /api/commpy/chart;
// 访客排名
import { visitorData } from /api/commpy/chart;
// 获取公司列表
import { getJson } from /api/user;
// 饼状图
import annUlar from ../../components/visitTu;
import { ringData } from /api/commpy/chart;
// 预约统计图
import lineChart from ../../components/visitTu/linechart.vue;
import { lineData } from /api/commpy/chart;
export default {components: { annUlar, lineChart },data() {return {loading: true,// 员工排行表格数据tableData: [],// 访客排行表格数据tableData1: [],// 饼图数据departs: [],ring1: [],ring2: [],legendData: [],company_no: ,datatime: [],queryParams: {start_date: undefined,end_date: undefined,},// 预约折线图数据companylist: [],company_no2: undefined,datatime2: [],xdata: [],y1: [],y2: [],y3: [],y4: [],headData: [],queryParams2: {company_no: ,start_date: undefined,end_date: undefined,},// 时间查询转换pickerOptions: {shortcuts: [{text: 最近一周,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, [start, end]);},},{text: 最近十五天,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);picker.$emit(pick, [start, end]);},},{text: 最近一个月,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit(pick, [start, end]);},},{text: 最近三个月,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit(pick, [start, end]);},},{text: 最近六个月,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);picker.$emit(pick, [start, end]);},},{text: 最近一年,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);picker.$emit(pick, [start, end]);},},],},};},created() {// 获取双环图数据this.getPieData();this.getEmpeeList();this.getVisitList();this.getCompanyList();this.getOrderDate();},// 直接通过这个监听时间数据的变化然后把新数据赋值上去最后再已经获取到新数据的情况下请求新的数据秒呀watch: {datatime: function (val) {this.queryParams.start_date val[0];this.queryParams.end_date val[1];},datatime2: function (val) {this.queryParams2.start_date val[0];this.queryParams2.end_date val[1];},},methods: {// 获取饼图数据getPieData() {ringData(this.queryParams).then((res) {this.ring1 res.data.data[0];this.ring2 res.data.data[1];this.legendData res.data.legend_data;});},// 员工排行getEmpeeList() {personnelData().then((res) {this.tableData res.data;this.loading false;});},// 访客排行getVisitList() {visitorData().then((res) {this.tableData1 res.data;this.loading false;});},//获取公司列表getCompanyList() {getJson().then((res) {this.departs res.data.company_list;this.companylist res.data.company_list;});},//通过公司编号获取数据getcompany(val) {if (val) {this.queryParams.company_no val;this.getPieData();}},getcompany2(val) {if (val) {this.queryParams2.company_no val;this.getOrderDate();}},// 获取预约统计图的数据getOrderDate() {lineData(this.queryParams2).then((res) {this.headData res.data.legend_data;this.xdata res.data.xData;this.y1 res.data.data[0];this.y2 res.data.data[1];this.y3 res.data.data[2];this.y4 res.data.data[3];});},//刷新refresh() {this.datatime [];this.company_no undefined;this.queryParams {start_date: undefined,end_date: undefined,company_no: undefined,};this.getPieData();},// 预约折线图刷新refresh2() {this.datatime2 [];this.company_no2 undefined;this.queryParams2 {start_date: undefined,end_date: undefined,company_no: undefined,};this.getOrderDate();},getTime() {},},
};
/script
style langscss scoped
.gaid-title {padding: 0px 15px 15px 15px;.grid-content {background: #ffff;.title_hh {border: 1px solid transparent;text-align: center;height: 50px;}}
}.red {color: rgb(209, 78, 78);
}
.green {color: #009e47;background-color: transparent;
}
.plue {color: #0064a8;
}
.font {padding: 10px 0px;font-size: 18px;font-weight: bold;display: inline-block;
}
.fontmini {padding: 10px 0px;font-size: 18px;display: inline-block;
}.centerrigin {text-align: center;display: flex;justify-content: center;
}
/style
解决方案三
待更新…
