<template>
  <div class="page_office">
    <div class="searchBox">
      <el-autocomplete
        class="checkSearch"
        popper-class="my-autocomplete"
        v-model="search_value"
        :fetch-suggestions="querySearchAsync"
        :trigger-on-focus="false"
        placeholder="请输入病人名字"
        @select="handleSelect"
      >
        <i class="el-icon-search el-input__icon" slot="suffix"></i>
        <template slot-scope="{ item }">
          <div class="name">{{ item.name }}</div>
        </template>
      </el-autocomplete>
    </div>
    <div class="none1" style="width:100%;overflow-x:auto;">
      <div class="optionsBox">
        <div class="optionsOne" @click="projectShow = true">
          <div style="display: flex;align-items: center;">
            {{ project_name }}
            <van-icon name="arrow-down"/>
          </div>
        </div>
        <div class="optionsOne" @click="itemShow = true">
          <div style="display: flex;align-items: center;">
            {{ item_name }}
            <van-icon name="arrow-down"/>
          </div>
        </div>
        <div class="toolOne" @click="startShow = true">
          <div style="display: flex;align-items: center;">
            {{ query.start_time }}
            <van-icon name="arrow-down"/>
          </div>
        </div>
        <div class="toolOne" @click="endShow = true">
          <div style="display: flex;align-items: center;">
            {{ query.end_time }}
            <van-icon name="arrow-down"/>
          </div>
        </div>

      </div>
    </div>

    <div class="chart1">统计图&nbsp;&nbsp;<span style="font-weight:normal">（患者姓名:{{patient_name}}）</span></div>
    <div>
      <bar-chart :options="options"></bar-chart>
    </div>
    <div class="chart1">指标趋势</div>
    <div>
      <bar-chart :options="options2"></bar-chart>
    </div>

    <div>
      <van-popup v-model="projectShow" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="project_columns"
          @confirm="chooseProject"
          @cancel="projectShow = false"
        />

      </van-popup>


      <van-popup v-model="itemShow" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="item_columns"
          @confirm="chooseItem"
          @cancel="itemShow = false"
        />
      </van-popup>

      <!--<van-popup v-model="patientShow" position="bottom" :style="{ height: '40%' }">-->
      <!--<van-picker-->
      <!--show-toolbar-->
      <!--:columns="patient_type_columns"-->
      <!--@confirm="chooseProject"-->
      <!--@cancel="patientShow = false"-->
      <!--/>-->
      <!--</van-popup>-->


      <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
      <van-popup v-model="sectionShow" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="range_value_columns"
          @confirm="chooseSection"
          @cancel="sectionShow = false"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
  import echarts from "echarts";
  import BarChart from "../components/BarChart";
  import {
    GetDefalutPatient,
    GetInspectionIndexChart,
    GetInspectionIndexInit,
    GetInspectionIndexTable,
    GetPatientInspectionIndexBarChart,
    GetPatientInspectionIndexChart,
    GetRangeValue
  } from "@/api/statistics";
  import {uParseTime} from '@/utils/tools'
  import {PostSearch,} from "@/api/patient";


  export default {
    components: {
      BarChart
    },
    data() {
      return {
        percent:[],

        project_name: '',
        patient_name: "",
        item_name: '',
        project: '',
        range_name: "全部",


        isStop: false,
        currentDate1: new Date(new Date().setMonth(new Date().getMonth() - 1)),
        currentDate2: new Date(),
        minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
        tableHeight: '',
        value: "",
        search_value: "",
        query: {
          patient_id: "",
          start_time: "",
          end_time: "",
          limit: 20,
          page: 1,
          project_id: "",
          item_id: "",
          range_type: "",
          range_value: "",
        },

        project_columns: [],
        item_columns: [],
        patient_type_columns: [],
        range_value_columns: [],
        state: "全部分区",
        type: "患者姓名",
        projectShow: false,
        itemShow: false,
        patientShow: false,
        startShow: false,
        endShow: false,
        sectionShow: false,
        all_inspection_reference: [],
        custom_chart_data_color: [],
        currentDate: new Date(),
        startTime: "日期范围",
        endTime: "日期范围",
        maxDate: new Date(),
        options: {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          legend: {
            data: ["次数"],
            left: 0
          },
          xAxis: {
            data: [],
            axisLine: {
              lineStyle: {
                color: "#FF0000",
                width: 8 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 8; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
            }
          },
          yAxis: {
            axisLabel: {
              formatter: "{value} %"
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#00FF00",
                width: 8 //这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              name: '',
              type: "bar",
              data: [],
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: (params) => {
                    if(this.percent.length > 0){
                      let str = ''
                      str = params.data + '('+ this.percent[params.dataIndex] +'%)'
                      return str
                    }else{
                      let str = ''
                      str = params.data
                      return str
                    }
                  }
                }
              },
              //配置样式
              itemStyle: {
                //通常情况下：

                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                normal: {
                  color: function (params) {
                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                    var colorList = [
                      ["#A9E0F3", "#9FBDFC"],
                      ['#FFD7C0', '#FF9994'],
                      ['#D7C3FD', '#B3A8F7'],
                    ]

                    var index = params.dataIndex;
                    if (params.dataIndex >= colorList.length) {
                      index = params.dataIndex % colorList.length;
                    }

                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: colorList[index][0] },
                      // { offset: 0.5, color: colorList[index][1] },
                      { offset: 1, color: colorList[index][1] }
                    ]);
                  },
                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                },

                //鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ],
          dataZoom: [
            {
              // Y轴固定,让内容滚动
              type: 'slider',
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: 'inside',
              xAxisIndex: [0],
              start: 1,
              end: 20,
              zoomLock: true // 锁定区域禁止缩放
            }
          ]
        },
        options2: {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          legend: {
            data: ["次数"],
            left: 0
          },
          xAxis: {
            data: [],
            // axisLine: {
            //   lineStyle: {
            //     color: "#FF0000",
            //     width: 8 //这里是为了突出显示加上的
            //   }
            // },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 4; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
            }
          },
          yAxis: {
            axisLabel: {
              formatter: "{value} %"

            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#00FF00",
                width: 8 //这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              custom_name: [],
              name: '',
              type: "line",
              data: [],
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              },
              //配置样式
              itemStyle: {
                //通常情况下：

                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                normal: {
                  color: function (params) {
                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                    var colorList = [
                      ["#A9E0F3", "#9FBDFC"],

                      ["#FFD7C0", "#FF9994"]
                    ];

                    var index = params.dataIndex;
                    if (params.dataIndex >= colorList.length) {
                      index = params.dataIndex % colorList.length;
                    }

                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: colorList[index][0]},
                      // { offset: 0.5, color: colorList[index][1] },
                      {offset: 1, color: colorList[index][1]}
                    ]);
                  },
                  lineStyle: {
                    color: "#5b98ff"//折线的颜色
                  },
                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                },

                //鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.2)"
                }
              }
            }
          ],
          dataZoom: [
            {
              // Y轴固定,让内容滚动
              type: 'slider',
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: 'inside',
              xAxisIndex: [0],
              start: 1,
              end: 20,
              zoomLock: true // 锁定区域禁止缩放
            }
          ]
        },

        tableData: []
      };
    },
    created() {
      this.tableHeight = (document.documentElement.clientHeight - 44) + "px"
      var date = new Date();
      var year = date.getFullYear(); //获取完整的年份(4位)
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var day = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate(); //获取当前日(1-31)
      var last_month = date.getMonth() < 10 ? "0" + date.getMonth().toString() : date.getMonth(); //获取当前月份(0-11,0代表1月)
      this.query.end_time = year + "-" + month + "-" + day
      this.query.start_time = year + "-" + last_month + "-" + day
      GetDefalutPatient()
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            this.query.patient_id = resp.data.patient.id
            this.patient_name = resp.data.patient.name
          } else {
            this.$toast({
              message: resp.msg
            })
          }
        })
        .catch(error => {

        })

      this.GetInspectionIndexInit()
      // this.GetDialysisBloodPressureTableData(this.query)


    },
    methods: {
      handleSelect(val) {
        this.query.patient_id = val.id
        this.query.page = 1
        this.patient_name = val.name

        this.isStop = false
        this.GetPatientInspectionIndexBarChart(this.query)
        this.GetPatientInspectionIndexChart(this.query)

      },
      querySearchAsync(keyword, cb) {
        let key = "";
        if (keyword != undefined) {
          key = keyword;
        }
        let searchArray = [];
        PostSearch(key).then(response => {
          if (response.data.state == 1) {
            searchArray = response.data.data.patient;
            cb(searchArray);
          } else {
            cb([]);
          }
        });
      },
      getTime(time) {
        return uParseTime(time, '{y}-{m}-{d}')
      },
      GetInspectionIndexInit() {
        GetInspectionIndexInit()
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              let project_name = []
              let item_name = []
              this.all_inspection_reference = resp.data.references

              for (let i = 0; i < this.all_inspection_reference.length; i++) {
                project_name.push(this.all_inspection_reference[i].project_name)
              }
              var obj = {}
              //去重复
              project_name = project_name.reduce((cur, next) => {
                obj[next] ? "" : (obj[next] = true && cur.push(next));
                return cur;
              }, []);

              this.project_columns = project_name
              this.project_name = project_name[0]

              for (let i = 0; i < this.all_inspection_reference.length; i++) {
                if (this.all_inspection_reference[i].project_name == this.project_columns[0]) {
                  item_name.push(this.all_inspection_reference[i].item_name)
                }
              }
              this.item_columns = item_name
              this.item_name = item_name[0]

              var projectInfo = this.getPojectInfo(this.project_columns[0], this.item_columns[0])
              this.query.project_id = projectInfo.project_id
              this.query.item_id = projectInfo.id
              this.query.range_type = projectInfo.range_type


              this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)


            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      GetPatientInspectionIndexBarChart(params) {
        this.options.xAxis.data = []
        this.options.series[0].data = []
        GetPatientInspectionIndexBarChart(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              for (let i = 0; i < resp.data.data.length; i++) {
                this.options.xAxis.data.push(resp.data.data[i].name)
                this.options.series[0].data.push(resp.data.data[i].total)
                this.percent.push(resp.data.data[i].ratio)

              }
              this.getArrLength(this.options.xAxis.data,1)

            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      GetPatientInspectionIndexChart(params) {
        this.options2.xAxis.data = []
        this.options2.series[0].data = []
        GetPatientInspectionIndexChart(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {


              let tempData = []
              let otherData = []
              for (let i = 0; i < resp.data.data.length; i++) {
                this.options2.xAxis.data.push(resp.data.data[i].date)
                if (this.query.range_type == 2) {
                  this.options2.series[0].data.push("1")
                  tempData.push(resp.data.data[i].value)
                  otherData.push(resp.data.data[i].value)
                } else {
                  this.options2.series[0].data.push(resp.data.data[i].value)
                }
                this.getArrLength(this.options2.xAxis.data,2)
              }

              //获取无法确定选项的颜色
              if (this.query.range_type == 2) {
                //去重复
                let obj = {}
                tempData = tempData.reduce((cur, next) => {
                  obj[next] ? "" : (obj[next] = true && cur.push(next));
                  return cur;
                }, []);

                //随机获取颜色值
                let newObj = {}
                for (let i = 0; i < tempData.length; i++) {
                  newObj[tempData[i]] = this.getColor()
                }

                //匹配对应的颜色值
                for (let i = 0; i < otherData.length; i++) {
                  for (let key in newObj) {
                    if (otherData[i] === key) {
                      this.custom_chart_data_color.push(newObj[key])
                    }
                  }
                }
              }

            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      getColor() {
        var colorArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += colorArr[this.random(0, 16)];
        }
        return color;

      }, random(min, max) {
        if (isNaN(min) || isNaN(max)) {
          return null;
        }
        if (min > max) {
          min ^= max;
          max ^= min;
          min ^= max;
        }
        return (Math.random() * (max - min) | 0) + min;
      },
      GetInspectionIndexChart(params) {
        this.options.xAxis.data = []
        this.options.series[0].data = []
        GetInspectionIndexChart(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              for (let i = 0; i < resp.data.data.length; i++) {
                this.options.xAxis.data.push(resp.data.data[i].name)
                this.options.series[0].data.push(resp.data.data[i].total)

              }
              this.getArrLength(this.options.xAxis.data,1)
            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      }, getPojectInfo(project_name, item_name) {
        for (let i = 0; i < this.all_inspection_reference.length; i++) {
          if (this.all_inspection_reference[i].project_name == project_name && this.all_inspection_reference[i].item_name == item_name) {
            return this.all_inspection_reference[i]
          }
        }
        return null
      }, GetRangeValue(range_type, project_id, id) {
        let params = {
          range_type: range_type,
          project_id: project_id,
          item_id: id
        }
        GetRangeValue(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              // this.range_value_columns =resp.data.range_vaule
              this.range_value_columns = []
              if (range_type == 1) {
                this.range_value_columns.push("全部")
                this.range_value_columns.push("小于" + resp.data.range_vaule[0])
                this.range_value_columns.push(resp.data.range_vaule[0] + "~" + resp.data.range_vaule[1])
                this.range_value_columns.push("大于" + resp.data.range_vaule[1])
                this.query.range_value = "全部"

              } else {
                this.range_value_columns.push("全部")
                for (let i = 0; i < resp.data.range_vaule.length; i++) {
                  this.range_value_columns.push(resp.data.range_vaule[i])
                }
                this.query.range_value = "全部"
              }
              this.GetPatientInspectionIndexChart(this.query)
              this.GetPatientInspectionIndexBarChart(this.query)


            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      chooseType(val) {
        this.type = val;
        this.typeShow = false;
      },
      chooseProject(val) {
        this.query.page = 1
        this.isStop = false

        this.project_name = val;
        this.projectShow = false;
        let item_inspection_reference = []
        for (let i = 0; i < this.all_inspection_reference.length; i++) {
          if (this.all_inspection_reference[i].project_name == val) {
            this.query.project_id = this.all_inspection_reference[i].project_id
            item_inspection_reference.push(this.all_inspection_reference[i].item_name)
          }
        }

        this.item_name = item_inspection_reference[0]
        this.item_columns = item_inspection_reference

        var projectInfo = this.getPojectInfo(val, this.item_columns[0])

        this.query.project_id = projectInfo.project_id
        this.query.item_id = projectInfo.id
        this.query.range_type = projectInfo.range_type
        this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)

      }, chooseItem(val) {
        this.query.page = 1
        this.isStop = false
        this.item_name = val;
        this.itemShow = false;

        for (let i = 0; i < this.all_inspection_reference.length; i++) {
          if (this.all_inspection_reference[i].item_name == val && this.all_inspection_reference[i].project_name == this.project_name) {
            this.query.item_id = this.all_inspection_reference[i].id
          }
        }
        var projectInfo = this.getPojectInfo(this.project_name, val)
        this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)

      }, chooseSection(val) {
        this.query.range_value = val;
        this.range_name = val
        this.sectionShow = false;
        this.query.page = 1
        this.isStop = false

        this.GetPatientInspectionIndexChart(this.query)

      },
      getstartTime(value) {
        this.page = 1;
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.start_time = `${year}-${month}-${day}`;
        this.query.page = 1
        this.isStop = false

        this.startShow = false;
        this.GetPatientInspectionIndexBarChart(this.query)
        this.GetPatientInspectionIndexChart(this.query)
      },
      getstartTime2(value) {
        this.page = 1;
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.page = 1
        this.isStop = false
        this.query.end_time = `${year}-${month}-${day}`

        this.endShow = false;

        this.GetPatientInspectionIndexBarChart(this.query)
        this.GetPatientInspectionIndexChart(this.query)
      },
      getArrLength(result,type){
        if(type == 1){
          if(result.length > 6){
            var dataZoom_end = (6/result.length)*100;
            this.options.dataZoom[0].end = dataZoom_end
          }else{
            var dataZoom_end = 100;
            this.options.dataZoom[0].end = dataZoom_end
          }
        }else if(type == 2){
          if(result.length > 6){
            var dataZoom_end = (6/result.length)*100;
            this.options2.dataZoom[0].end = dataZoom_end
          }else{
            var dataZoom_end = 100;
            this.options2.dataZoom[0].end = dataZoom_end
          }
        }

      },

    }
  };
</script>

<style lang="scss" scoped>
  .page_office {
  .searchBox{
    background: #F6F6F6;
    height: 3rem;
    display: flex;
    align-items: center;
    padding:0 0.625rem;
  }
  .optionsBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    width: 43.75rem;
    background: #fff;

  .optionsOne {
    /*/ / max-width: 8.75 rem;*/
    /*/ / min-width: 6.25 rem;*/
    padding: 0 0.75rem;
    height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 5px;
    text-align: center;
    font-size: 0.8125rem;
    color: #646566;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 0.8125rem;
  }

  .toolOne {
    width: 6.25rem;
    height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 5px;
    text-align: center;
    font-size: 0.8125rem;
    color: #646566;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 0.8125rem;
  }

  }
  .chart1 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: 0 0 0 0.8125rem;
  }

  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }

  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>

<style lang="scss">
  .page_office {
  .searchBox{
    .el-input{
      font-size: 14px !important;
    }
    .el-autocomplete{
      width: 100%;
    }
    .el-input__inner{
      border-radius:1rem;
      line-height: 2rem;
      height:2rem;
      border:none;
    }
    .el-input__icon{
      line-height:2rem;
    }
  }
  .el-table {

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .el-table__fixed-right {
    right: 0 !important;
  }

  }
  .none1::-webkit-scrollbar {
    display:none;
  }
  }
</style>
