vue 折线图 根据年月日切换

138 阅读1分钟
        <el-row :gutter="20">
                <el-col
                  :span="24"
                  class="user-portary-fst"
                  style="height: 428px"
                  v-loading="loading6"
                >
                  <div class="userportary-part-div">
                    <div class="userportary-part-div-title">
                      违规时间曲线图
                      <div class="extra">
                        统计方式:
                        <el-button-group>
                          <el-button
                            :type="eventTrendFlag == 3 ? 'primary' : 'default'"
                            size="small"
                            @click="getEventTrendData(userId, 3)"
                            >三天</el-button
                          >
                          <el-button
                            :type="eventTrendFlag == 5 ? 'primary' : 'default'"
                            size="small"
                            @click="getEventTrendData(userId, 5)"
                            >五天</el-button
                          >
                          <el-button
                            :type="eventTrendFlag == 7 ? 'primary' : 'default'"
                            size="small"
                            @click="getEventTrendData(userId, 7)"
                            >七天</el-button
                          >
                        </el-button-group>
                      </div>
                    </div>
                    <div ref="assetSafty" class="userportary-part-div-content"></div>
                  </div>
                </el-col>
              </el-row>
              
              
              
                    eventTrendFlag: 3,
                    userId:null,
                    
                      created() {
                        // 切换下拉框数据
                        this.switchFile();
                      },
                      methods: {
                        getEventTrendData(id, falg) {
                          this.eventTrendFlag = falg;
                          timeEventRecord(id, falg).then((res) => {
                            this.initLine(res.data);
                          });
                        },
                        // 切换下拉框数据
                        switchFile(item) {
                          console.log("item", item);
                          listUser().then((res) => {
                            this.userName = res.rows;
                            this.userId = res.rows[0].id;
                            if (item) {
                              this.initBar(item.id);
                              this.getUserList(item.id);
                              this.getRisk(item.id);
                              this.userId = item.id;
                              this.getEventTrendData(item.id, this.eventTrendFlag);
                            } else {
                              this.initBar(this.userId);
                              this.getUserList(this.userId);
                              this.getRisk(this.userId);
                              this.getEventTrendData(this.userId, this.eventTrendFlag);
                            }
                          });
                          //
                        },
                    
                    <el-button
                  class="butn-sty"
                  :type="falg == 3 ? 'primary' : 'default'"
                  size="small"
                  @click="getSyslog(3)"
                  >三天</el-button
                >
                <el-button
                  class="butn-sty"
                  :type="falg == 5 ? 'primary' : 'default'"
                  size="small"
                  @click="getSyslog(5)"
                  >五天</el-button
                >
                <el-button
                  class="butn-sty"
                  :type="falg == 7 ? 'primary' : 'default'"
                  size="small"
                  @click="getSyslog(7)"
                  >7天</el-button
                  
                  
                    mounted() {
                // 系统日志饼图
                // this.initPie();
                // this.initBar();
                // this.initLine();
                this.getSyslog(3);
               // 系统日志量
                getSyslog(falg) {
                  this.falg = falg;
                  sysData({ days: falg }).then((res) => {
                    if (res.code == 200) {
                      this.initBar(res.data);
                    }
                  });
                },