gdy_pc_8/src/views/demo2.vue

<template>
   <div style="height: 100%; width: 100%">

          <div class="content">
               <div style="margin: -5px 0px 5px;display: flex;justify-content: space-between;">
                     <a-input allowClear v-model="searchTitle" placeholder="请输入任务名称"></a-input>
                     <a-button icon="search" type="primary" @click="searchDataClick">搜索</a-button>
                 </div>
               <!-- 中间 内容 -->
               <div class="centerContent">
                   <!-- 甘特图 -->
                   <div class="selectDate">
                       <a-button @click="changeToday">今</a-button>
                       <!-- 日期切换 -->
                       <a-select  default-value="d" style="width: 55px;margin-left: 5px;" @change="ganttChangeDateView">
                           <a-select-option value="y">年</a-select-option>
                           <a-select-option value="m">月</a-select-option>
                           <a-select-option value="w">周</a-select-option>
                           <a-select-option value="d">日</a-select-option>
                         </a-select>
                       <a-button style="margin-left: 5px;" @click="changeFull"><a-icon type="fullscreen" /></a-button>
                     </div>
                   <div class="rightGatt" style="min-height:calc(78vh - 50px - 5px );width: 100%;overflow: hidden;" ref="gantt"></div>
                 </div>
             </div>
         </div>

    </div>
</template>
<script>
  import {gantt} from '@/assets/js/dhtmlx';
  import "@/assets/css/dhtmlxgantt.css";
  import moment from 'moment'​
  export default {
    name: "ganttChart",
    data() {
      return {
        moment,
        timer: null, //定时
        item: {}, //单行数据
        searchTitle: "", //搜索标题
        tasks: {
          data: [
          ], //数据
          links: [
              {
                id:'111',//数据id
                source:'1'
                target:'2'
                type:'0'
              },//
              {
                id:'222'
                source:'2'
                target:'1'
                type:'1'
              },
          ], //关联项目数据
        },
        savetasks: {
          data: [],
          links: []
        }, //暂存空数据
        ganttServerStaff: [], //设置gantt成员数据
        selectStaff: [], //下拉成员
        staff: [], //成员
        ganttEvent: { //销毁事件
        },
        urls: {
          staff: "", //项目成员
          tasklinks: '', //gantt数据
          linksEdit: '', //修改和新增连接
          linksDelete: '', //删除连接
          addTask: '', //新增项目PUT
          editTask: '', //编辑项目put请求 tid
          deleteTask: '', //删除项目delete tid
        }
      }
    },
    watch: {
      searchTitle(newVal, oldVal) {
        this.searchTitle = newVal;
      }
    },
    mounted() {

      this.$nextTick(() => {
        this.ganttChangeEvent(); //交互事件
        this.initGantt(); //初始化

        this.createTodayLine(); //今日线
        // this.ganttServerList(); //服务数据
      })
      this.onQuery(); //查询数据
      this.ganttChangeDateView("d"); //默认日格式
    },
    methods: {
      /*
        甘特图
       */
      // 初始化gantt
      initGantt() {
        // 清空之前的配置
        // gantt.clearAll();

        // 启用动态加载
        gantt.config.branch_loading = true
        //日期格式化
        gantt.config.xml_date = "%Y-%m-%d";
        gantt.config.order_branch = true;
        gantt.config.order_branch_free = true;
        //左侧是否自适应
        gantt.config.autofit = true;
        gantt.config.drag_links = true; //连线
        gantt.config.readonly = false; //只读
        gantt.config.date_scale = "%m月%d日"; //右侧显示列名
        gantt.config.layout = { //拖拽布局
          css: "gantt_container",
          rows: [{
              cols: [{
                  view: "grid",
                  id: "grid",
                  scrollX: "scrollHor",
                  scrollY: "scrollVer"
                },
                {
                  resizer: true,
                  width: 1
                },
                {
                  view: "timeline",
                  id: "timeline",
                  scrollX: "scrollHor",
                  scrollY: "scrollVer"
                },
                {
                  view: "scrollbar",
                  scroll: "y",
                  id: "scrollVer"
                }
              ]
            },
            {
              view: "scrollbar",
              scroll: "x",
              id: "scrollHor",
              height: 20
            }
          ]
        };
        gantt.config.start_on_monday = true;
        gantt.config.work_time = true;
        gantt.config.fit_tasks = true; //自动调整图表坐标轴区间用于适配task的长度

        ​
        //汉化
        gantt.locale = {
          date: {
            month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            day_short: ["日", "一", "二", "三", "四", "五", "六"]
          },
          labels: {
            dhx_cal_today_button: "今天",
            day_tab: "日",
            week_tab: "周",
            month_tab: "月",
            new_event: "新建日程",
            icon_save: "保存",
            icon_cancel: "关闭",
            icon_details: "详细",
            icon_edit: "编辑",
            icon_delete: "删除",
            confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
            confirm_deleting: "是否删除计划?",
            section_description: "描述:",
            section_time: "时间范围:",
            section_type: "类型:",
            section_text: "计划名称:",
            section_test: "测试:",
            section_projectClass: "项目类型:",
            taskProjectType_0: "项目任务",
            taskProjectType_1: "普通任务",
            section_head: "负责人:",
            section_priority: '优先级:',
            taskProgress: '任务状态',
            taskProgress_0: "未开始",
            taskProgress_1: "进行中",
            taskProgress_2: "已完成",
            taskProgress_3: "已延期",
            taskProgress_4: "搁置中",
            section_template: 'Details',
            /* grid columns */
            column_text: "计划名称",
            column_start_date: "开始时间",
            column_duration: "持续时间",
            column_add: "",
            column_priority: "难度",
            /* link confirmation */
            link: "关联",
            confirm_link_deleting: "将被删除",
            message_ok: '确定',
            message_cancel: '取消',
            link_start: " (开始)",
            link_end: " (结束)",
            ​
            type_task: "任务",
            type_project: "项目",
            type_milestone: "里程碑",
            ​
            minutes: "分钟",
            hours: "小时",
            days: "天",
            weeks: "周",
            months: "月",
            years: "年"
          }
        }

        gantt.serverList("priority", [{
            key: 0,
            label: "最高"
          },
          {
            key: 1,
            label: "较高"
          },
          {
            key: 2,
            label: "普通"
          },
          {
            key: 3,
            label: "较低"
          },
          {
            key: 4,
            label: "最低"
          },
        ]);

        //左侧显示列名
        gantt.config.columns = [{
            name: "text",
            min_width: 100,
            max_width: 200,
            label: "任务",
            align: "left",
            resize: true,
            tree: true,
            editor: {
              type: 'text',
              map_to: 'text'
            }
          },
          {
            name: "id",
            label: "",
            hide: true
          },
          {
            name: "start_date",
            label: "开始时间",
            width: 120,
            resize: true,
            align: "left"
          },
          {
            name: "head",
            min_width: 100,
            height: 40,
            label: "负责人",
            resize: true,
            align: "left",
            // editor: {
            //   map_to: "head_id", type: "select", options: gantt.serverList("staff"),
            // },
            template: (item) => {
              if (this.ganttDealById(gantt.serverList('staff'), item.head_id)) {
                return `<span class='userIcon' style='background-color:${item.color ? item.color : "#6666"}'>${this.ganttDealById(gantt.serverList('staff'), item.head_id).slice(0, 1)}</span>${this.ganttDealById(gantt.serverList('staff'), item.head_id)}`
              }
            }
          },
          // { name: "end_date", label: "结束时间", align: "center" },
          {
            name: "taskProgress",
            label: "任务状态",
            align: "center",
            min_width: 110,
            editor: {
              type: "select",
              map_to: "taskProgress",
              options: [{
                  key: "0",
                  label: gantt.locale.labels.taskProgress_0
                },
                {
                  key: "1",
                  label: gantt.locale.labels.taskProgress_1
                },
                {
                  key: "2",
                  label: gantt.locale.labels.taskProgress_2
                },
                {
                  key: "3",
                  label: gantt.locale.labels.taskProgress_3
                },
                {
                  key: "4",
                  label: gantt.locale.labels.taskProgress_4
                },
              ],
            },
            template: function(obj) {
              let re = '';
              switch (obj.taskProgress) {
                case "0":
                  re = `<div class='taskProgress color_bg_1' >未开始</div>`
                  break;
                case "1":
                  re = `<div class='taskProgress color_bg_2' >进行中</div>`
                  break;
                case "2":
                  re = `<div class='taskProgress color_bg_3'  >已完成</div>`
                  break;
                case "3":
                  re = `<div  class='taskProgress color_bg_4'>已延期</div>`
                  break;
                case "4":
                  re = `<div  class='taskProgress color_bg_5' >搁置中</div>`
                  break;
              }
              return re​
            }
          }, ​
        ];​

        //弹出层
        gantt.config.lightbox.sections = [{
            name: "text",
            height: 70,
            map_to: "text",
            type: "textarea",
            focus: true,
            width: "*"
          },
          {
            name: "time",
            height: 40,
            map_to: "auto",
            type: "duration",
            time_format: ["%Y", "%m", "%d"],
          },
          {
            name: "projectClass",
            height: 30,
            map_to: "proTemplate",
            type: "template",

          },
          {
            name: "head",
            height: 22,
            map_to: "head_id",
            type: "select",
            options: gantt.serverList('staff', []),
          },
          {
            name: "description",
            height: 70,
            map_to: "description",
            type: "textarea"
          },
          {
            name: "priority",
            height: 40,
            map_to: "priority",
            type: "radio",
            options: gantt.serverList("priority")
          }, ​
        ];​
        gantt.config.smart_scales = true;
        gantt.plugins({
          click_drag: true,
          drag_timeline: true, // 拖动图
          marker: true, // 时间标记
          fullscreen: true, // 全屏
          tooltip: true, // 鼠标经过时信息
          undo: true // 允许撤销
        })
        gantt.init(this.$refs.gantt);

      },


      // gantt数据服务列表
      ganttServerList() {
        this.getProjectStaff(); //获取项目成员
        // 项目难度
        gantt.serverList("priority", [{
            key: 0,
            label: "最高"
          },
          {
            key: 1,
            label: "较高"
          },
          {
            key: 2,
            label: "普通"
          },
          {
            key: 3,
            label: "较低"
          },
          {
            key: 4,
            label: "最低"
          },
        ]);

      },
      // gantt交互事件注册
      ganttChangeEvent() {
        // gantt渲染
        this.ganttEvent.onGanttReady = gantt.attachEvent("onGanttReady", () => {

          //弹窗标题 日期范围
          gantt.templates.task_time = function(start, end, task) {
            return "周期：" + moment(start).format('YYYY-MM-DD') + " 至 " + moment(end).format('YYYY-MM-DD');
          };
          // 浮窗
          gantt.templates.tooltip_text = (start, end, task) => {
            return "<b>项目名称:</b> " + task.text + "<br><b>负责人:</b>" + task.head + "<br/><b>开始时间:</b> " +
              moment(start).format('YYYY-MM-DD') +
              "<br/><b>结束时间:</b> " +
              moment(new Date(end).valueOf() - 1000 * 60 * 60 * 24).format('YYYY-MM-DD');
          }
          //弹窗标题 计划名称
          gantt.templates.task_text = function(start, end, task) {
            return task.text;
          };
          gantt.templates.timeline_cell_class = function(task, date) {
            if (!gantt.isWorkTime({
                task: task,
                date: date
              })) {
              return "weekend";
            } else {
              return 'weekday'
            }
          };
          gantt.templates.task_end_date = (date) => {
            return gantt.templates.task_date(this.moment(new Date(date.valueOf() - 1000 * 60 * 60 * 24)).format(
              "YYYY-MM-DD"));
          };
          gantt.templates.grid_date_format = (date, column) => {
            if (column === "end_date") {
              return this.moment(new Date(date.valueOf() - 1000 * 60 * 60 * 24)).format("YYYY-MM-DD");
            } else {
              return this.moment(date).format("YYYY-MM-DD");
            }
          }
        });
        // 修改默认弹窗
        gantt.attachEvent("onBeforeLightbox", (id) => {
          var task = gantt.getTask(id);
          task.proTemplate = `${gantt.locale.labels.taskProjectType_0}`
          return true;
        });​
        //添加后触发
        this.ganttEvent.onAfterTaskAdd = gantt.attachEvent("onAfterTaskAdd", (id, item) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.dealProject("add", item)
          }, 500)​
        });
        // 修改任务
        this.ganttEvent.onAfterTaskUpdate = gantt.attachEvent("onAfterTaskUpdate", (id, data) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.dealProject("edit", data);
            gantt.render()
          }, 500)​
        });
        // 删除项目
        this.ganttEvent.onAfterTaskDelete = gantt.attachEvent("onAfterTaskDelete", (id, data) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {

            this.dealProject("delete", data);
            gantt.render();
          }, 500)
        });
        // 移动项目
        this.ganttEvent.onAfterTaskDrag = gantt.attachEvent("onAfterTaskDrag", (id, mode, e) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            var task = gantt.getTask(id);
            this.dealProject("edit", task);
            gantt.render()
          }, 500)
        });
        // 用户完成拖动并释放鼠标
        this.ganttEvent.onAfterTaskChanged = gantt.attachEvent("onAfterTaskChanged", (id, mode, task) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            gantt.render();
          }, 500)
        });​
        // 删除连接项目关系
        this.ganttEvent.onAfterLinkDelete = gantt.attachEvent("onAfterLinkDelete", (id, item) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {

            let param = Object.assign({}, {
              projectId: this.$store.state.project_data.id
            }, item)
            this.axios.$delete(this.urls.linksDelete, param).then(res => {
              res.code == 200 && this.$message.success("解除成功!")
              res.code != 200 && this.$message.error("解除失败!")
            })
            gantt.render();
          }, 500)
        });
        // 修改连接项目关系
        this.ganttEvent.onAfterLinkUpdate = gantt.attachEvent("onAfterLinkUpdate", (id, item) => {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            ​
            let param = Object.assign({}, {
              projectId: this.$store.state.project_data.id
            }, item)
            this.axios.$put(this.urls.linksEdit, param).then(res => {
              res.code == 200 && this.$message.success("关联成功!")
              res.code != 200 && this.$message.error("关联失败!")​
            })
            gantt.render()
          }, 500)
        });
        // 新增连接项目关系
        this.ganttEvent.onBeforeLinkAdd = gantt.attachEvent("onBeforeLinkAdd", (id, item) => {
          this.timer = setTimeout(() => {
            clearTimeout(this.timer)
            let param = Object.assign({}, {
              projectId: this.$store.state.project_data.id
            }, item)
            this.axios.$put(this.urls.linksEdit, param).then(res => {
              res.code == 200 && this.$message.success("关联成功!");
              res.code != 200 && this.$message.error("关联失败!");

            })
            gantt.render()
          }, 20)​
        });
        // 保存新增
        this.ganttEvent.onLightboxSave = gantt.attachEvent("onLightboxSave", (id, item) => {
          if (!item.text) {
            this.$message.error("请填写计划名称!");
            return false;
          }
          return true;
        });​
      },
      // 处理id 对应名称label
      ganttDealById(list, id) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].key == id)
            return list[i].label;
        }
        return "";
      },
      // 切换 年 季 月 周 日视图
      ganttChangeDateView(type) {
        switch (type) {
          case 'y':
            gantt.config.scale_unit = "year";
            gantt.config.step = 1;
            gantt.config.subscales = null;
            gantt.config.date_scale = "%Y年";
            gantt.templates.date_scale = null;
            break;​
          case 'm':
            gantt.config.scale_unit = 'month';
            gantt.config.step = 1;
            gantt.config.date_scale = "%m月";
            gantt.templates.date_scale = null;

            break;
          case 'w':
            gantt.config.scale_unit = 'week';
            gantt.config.step = 1;
            gantt.config.date_scale = "第%w周";
            gantt.templates.date_scale = null;

            break;
          case 'd':
            gantt.config.scale_unit = 'day';
            gantt.config.step = 1;
            gantt.config.date_scale = "%m月%d日";
            gantt.templates.date_scale = null;
            gantt.config.subscales = null;

            break;
        }
        gantt.render();
      },
      // 今日线
      createTodayLine() {
        var dateToStr = gantt.date.date_to_str("%Y年%M%d日");
        var markerId = gantt.addMarker({
          id: 'markerLine',
          start_date: new Date(),
          css: "today",
          text: "今日",
          title: dateToStr(new Date())
        });
        gantt.updateMarker(markerId);
      },
      // 是否全屏
      changeFull() {
        gantt.ext.fullscreen.toggle();
      },
      // 定位到今日线
      changeToday() {
        this.$nextTick(() => {
          let ganTT = document.getElementsByClassName('gantt_marker today')
          gantt.scrollTo(ganTT[0].offsetLeft - 300, null);
        })
      },
      /*
    操作
    */
      //  获取项目成员
      getProjectStaff(projectID) {
        this.axios.get(this.urls.staff, {
          params: {
            projectId: projectID ? projectID : this.$store.state.project_data.id
          },
        }).then(res => {
          let staffArr = [];
          res.data.code = 200 && res.data.result.forEach((item, index) => {
            staffArr[index] = {};
            staffArr[index].key = item.id;
            staffArr[index].label = item.realname;
          })
          this.selectStaff = res.data.result;
          // 补充gantt数据
          this.ganttServerStaff = staffArr;
          gantt.updateCollection("staff", staffArr);
          gantt.render()
        })
      },
      //计算进度
      evalProgess(start, end, update) {
        if (start && end && update) {
          let start_date = this.moment(start).format("YYYY-MM-DD");
          let end_date = this.moment(end).format("YYYY-MM-DD");
          let update_date = this.moment(update).format("YYYY-MM-DD");

          if ((new Date(end_date) - new Date(update_date) > 0)) {
            let process = (new Date(update_date) - new Date(start_date)) / (new Date(end_date) - new Date(start_date));
            return process.toFixed(2)
          } else {
            return 0
          }
        }​
        return 0
      },
      // 获取数据
      onQuery(param) {
        gantt.clearAll();
        gantt.parse(this.savetasks);
        gantt.render();
        param = Object.assign({}, {
          projectId: this.$store.state.project_data.id ? this.$store.state.project_data.id : '1'
        }, param)
        this.axios.get(this.urls.tasklinks, {
          params: param
        }).then(res => {
          let result = res.data.result["taskList"];
          let pushArr = [];
          this.tasks.links = res.data.result["ganttchartList"]; //连接项目
          this.tasks.data = [];
          result.forEach((item, index) => {
            this.tasks.data[index] = {};
            this.tasks.data[index].id = item.tid ? item.tid : ''; //项目id
            this.tasks.data[index].text = item.title ? item.title : '空标题'; //标题
            this.tasks.data[index].start_date = item.startTime; //开始时间
            // 负责人--成员
            this.tasks.data[index].head_id = item.headRole?.id ? item.headRole?.id : ''; //负责人id
            this.tasks.data[index].head = item.headRole?.realname ? item.headRole?.realname : ''; //负责人
            this.tasks.data[index].progress = this.evalProgess(item.startTime, item.endTime, item
              .updateTime) //项目进展
            // 后台时间加一天 显示减一天 处理条形图时间左闭右开
            this.tasks.data[index].end_date = this.moment(new Date(item.endTime).valueOf() + 1000 * 60 * 60 *
              24).format("YYYY-MM-DD"); //结束时间
            // this.tasks.data[index].end_date = item.endTime;//结束时间
            this.tasks.data[index].priority = item.priority ? item.priority : ''; //任务优先级
            this.tasks.data[index].projectClass = item.type ? item.type : ''; //类型 0项目任务 1 普通任务
            ​
            this.tasks.data[index].taskProgress = item.taskStatus.toString(); //任务状态
            this.tasks.data[index].description = item.describe ? item.describe : ''; //描述
            this.tasks.data[index].color = item.stateDictionary.color ? item.stateDictionary.color : ''; //颜色
            if (item.taskList && item.taskList.length != 0) {
              this.tasks.data[index].render = "split"; //显示在单行
              this.tasks.data[index].open = true; //展开
              item.taskList.forEach((_item) => {
                pushArr.push({
                  id: _item.tid,
                  text: _item.title ? _item.title : '空标题',
                  start_date: _item.startTime,
                  end_date: _item.endTime,
                  head_id: _item.headId,
                  head: _item.head,
                  priority: _item.priority,
                  projectClass: _item.type,
                  taskProgress: _item.taskStatus.toString(),
                  description: _item.describe,
                  parent: _item.mainTaskId,
                });
              })
            }
          });
          this.tasks.data = this.tasks.data.concat(pushArr)

          this.$nextTick(() => {
            gantt.parse(this.tasks);
            gantt.render();
            gantt.refreshData();
          })​
        })
      },
      ​
      // 项目新增 修改tid  删除tid
      dealProject(type, data) {
        let param = {};
        if (type != 'add') {
          param.tid = data.id;
          param.title = data.text;
          param.startTime = this.moment(data.start_date).format("YYYY-MM-DD");
          param.endTime = this.moment(data.end_date).format("YYYY-MM-DD");

          param.describe = data.description;
          param.priority = data.priority;

          param.head = data.head_id;
          param.taskStatus = data.taskProgress;
          param.projectId = this.$store.state.project_data.id;
        } else {

          param.title = data.text;
          param.startTime = this.moment(data.start_date).format("YYYY-MM-DD");
          param.endTime = this.moment(data.end_date).format("YYYY-MM-DD");

          param.describe = data.description;
          param.priority = data.priority;

          param.head = data.head_id;
          param.taskStatus = data.taskProgress;
          param.projectId = this.$store.state.project_data.id;
        }
        let formdata = new FormData();
        for (let i in param) {
          formdata.append(i, param[i])
        }
        switch (type) {
          case "add": //新增
            this.axios.put(this.urls.addTask, formdata).then(res => {

              res.data.code == 200 && this.$message.success("新增成功!")
              res.data.code != 200 && this.$message.error("新增失败!")
            }).catch(err => {
              this.$message.error("请求失败!")
            })
            break;
          case "edit":
            this.axios.put(this.urls.editTask, formdata).then(res => {
              res.data.code == 200 && this.$message.success("修改成功!")
              res.data.code != 200 && this.$message.error("修改失败!")
            }).catch(err => {
              this.$message.error("请求失败!")
            })
            break;
          case "delete":
            this.axios.delete(this.urls.deleteTask, formdata).then(res => {
              res.data.code == 200 && this.$message.success("删除成功!")
              res.data.code != 200 && this.$message.error("删除失败!")
            }).catch(err => {
              this.$message.error("请求失败!")
            })
            break;​
        }
      },
      selecthead(val) {

        this.searchHead = val; //id
      },
      // 搜索判断数据
      hasSubstr(parentId, type) {
        let task = gantt.getTask(parentId);
        if (type == 'tilte') {
          if (task.text.toLowerCase().indexOf(this.searchTitle) !== -1)
            return true;
        }
        // }  
      },
      //点击按钮搜索
      searchDataClick() {

        if (this.searchTitle) {
          this.ganttEvent.onBeforeTaskDisplay = gantt.attachEvent("onBeforeTaskDisplay", (id, task) => {
            if (this.hasSubstr(id, 'tilte')) {
              return true;
            }
            return false;
          });
          gantt.refreshData()
          gantt.render()
        } else {
          this.ganttEvent.onBeforeTaskDisplay = gantt.attachEvent("onBeforeTaskDisplay", (id, task) => {
            return true
          })
          gantt.refreshData()
          gantt.render()
        }
      },
    },
    ​
    destroyed() {
      // 销毁gantt事件
      for (let i in this.ganttEvent) {
        gantt.detachEvent(this.ganttEvent[i])
      }
      gantt.ext.tooltips.tooltip.hide();
    }
  }
</script>
<style scoped lang="scss">
  @import url(./gantt.css);

  .ant-layout {
    background: #f8f9f9;
  }

  ​ .ant-layout-header {
    background: #fdffff;
    color: rgb(29, 28, 28);
    border: 1px solid #dee0e0;
  }

  ​ .header {
    // position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  ​ .content {
    background: #fdffff;
    height: 99vh;
  }

  ​ // 中间

  .centerContent {
    position: relative;
    background: #fdffff;
    width: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: space-between;

    .selectDate {
      width: 100px;
      position: fixed;
      top: 18%;
      right: 9%;
      z-index: 99;
      display: flex;
      justify-content: space-between;
    }
  }
</style>