FE-V2-PC/src/views/emergencyManagement/plan_log/index.vue

<!--风险统计-->
<template>
  <div class="plan_log scrollbar-box">
    <div class="top-max-big-box">
      <div class="top-left-box">
        <p class="top-max-big-title color_one">风险统计</p>
        <div id="left-eCharts" v-if="eChartsTypeOne">

        </div>
        <img v-if="!eChartsTypeOne" src="@/assets/ZDimages/null-data.png">
        <p v-if="!eChartsTypeOne" class="null-p">暂无数据</p>
      </div>
      <div class="top-right-box">
        <div class="top-right-top-box">
          <p class="top-max-big-title color_one">风险类型占比</p>
          <div id="right-top-eCharts" v-if="eChartsTypeTwo"></div>
          <div class="title-button-box">
            <p :class="rightTopType==0?'selected-p':(rightTopType==1?'left-p':'left-p-one')" @click="rightTopClick('0')">近半年</p>
            <p :class="rightTopType==1?'selected-p':'center-p'" @click="rightTopClick('1')">近一年</p>
            <p :class="rightTopType==2?'selected-p':(rightTopType==0?'right-p-one':'right-p')" @click="rightTopClick('2')">近三年</p>
          </div>
          <img v-if="!eChartsTypeTwo" src="@/assets/ZDimages/null-data.png">
          <p v-if="!eChartsTypeTwo" class="null-p">暂无数据</p>
        </div>
        <div class="top-right-bottom-box">
          <p class="top-max-big-title color_one">学院风险数</p>
          <div id="right-bottom-eCharts" v-if="eChartsTypeThree"></div>
          <div class="title-button-box">
            <p :class="rightBottomType==0?'selected-p':(rightBottomType==1?'left-p':'left-p-one')" @click="rightBottomClick('0')">近半年</p>
            <p :class="rightBottomType==1?'selected-p':'center-p'" @click="rightBottomClick('1')">近一年</p>
            <p :class="rightBottomType==2?'selected-p':(rightBottomType==0?'right-p-one':'right-p')" @click="rightBottomClick('2')">近三年</p>
          </div>
          <img v-if="!eChartsTypeThree" src="@/assets/ZDimages/null-data.png">
          <p v-if="!eChartsTypeThree" class="null-p">暂无数据</p>
        </div>
      </div>
    </div>
    <div class="bottom-max-big-box">
      <el-form :model="queryParams" ref="queryParams" :inline="true" v-show="showSearch">
        <el-form-item label="学院" prop="deptId">
          <el-select v-model="queryParams.deptId" placeholder="请选择学院" @change="getSubjectDictList">
            <el-option
              v-for="dict in deptOptions"
              :key="dict.deptId"
              :label="dict.deptName"
              :value="dict.deptId"
            ></el-option>
          </el-select>
<!--          <treeselect style="width:190px;" v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>-->
        </el-form-item>
        <el-form-item label="实验室" prop="subjectId">
          <el-select v-model="queryParams.subjectId" placeholder="请选择实验室" clearable size="small">
            <el-option
              v-for="item in subjectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生风险时间">
          <el-date-picker
            :clearable="false"
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>

      <el-table   v-loading="loading" border :data="logList"  @selection-change="handleSelectionChange">
        <el-table-column label="风险" align="left" prop="riskPlanName" />
        <el-table-column label="实验室名称" align="left" prop="subjectName" />
        <el-table-column label="学院" align="left" prop="deptName" />
        <el-table-column label="风险详情" align="left" prop="remark" />
        <el-table-column label="发生风险时间" align="left" prop="createTime" />
      </el-table>

      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listLog, getLog, delLog, addLog, updateLog, lineChart, happenChart, statisticsChartDept } from "@/api/laboratory/plan_log";
import { subjectDictList } from "@/api/laboratory/record";

import echarts from 'echarts'
import { listDepartments, treeselect } from '@/api/system/dept'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Log",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 风险异常日志表格数据
      logList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //选择时间
      dateRange:[],
      // 部门树选项
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        riskPlanId: null,
        riskPlanName: null,
        subjectId: null,
        deptId: null,
        deptName: null,
        userId: null,
        startDate: null,
        endDate: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      //右上echarts选中状态
      rightTopType:0,
      //右下echarts选中状态
      rightBottomType:0,
      lineCharts: null,
      eChartsTypeOne:true,
      happenCharts: null,
      eChartsTypeTwo:true,
      statisticsChartDepts: null,
      eChartsTypeThree:true,
      // 实验室下拉框
      subjectOptions: [],
      option : {
        backgroundColor: 'transparent',
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '20%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: [
          {
            type: 'category',

            boundaryGap: false,
            axisLabel: {
              color: '#333333', //字体颜色
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0', //底线颜色
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#195384',
              },
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#65aaf1',
              fontStyle: 'normal',
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333333', //字体颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0', //底线颜色
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0',
                width: 1,
                type: 'dashed',
              },
            },
          },
        ],
        // 缩放组件
        dataZoom: {
          type: 'slider',
          start: 0,
          end: 50, //缩放组件显示70%的位置
          minSpan :0,
          maxSpan:50,
          backgroundColor: '#999',//组件背景颜色
          dataBackground: {
            lineStyle: {
              color: '#0183FA',
              opacity: '1',
            },
            areaStyle: {
              color: '#0183FA',
              opacity: '1',
            },
          },
          selectedDataBackground: {
            lineStyle: {
              color: '#0183FA',
              opacity: '1',
            },
            areaStyle: {
              color: '#0183FA',
              opacity: '1',
            },
          },
          fillerColor: 'rgba(0,0,0,0)',//滚动框冲田颜色
          // borderColor: '#0183FA',//滚动框边框颜色
          // handleIcon:'image://https://img-qn-1.51miz.com/Element/00/78/74/76/d87f9e3f_E787476_14131ebe.png!/quality/90/unsharp/true/compress/true/format/png/fh/320',//手柄样式
          moveHandleSize: 14,
          textStyle:{//文字样式
            color:'#fff',
            lineHeight:'34',
            fontStyle:'oblique',
            fontSize:'16'
          },
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            showSymbol: false,
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0092f6',
                lineStyle: {
                  color: '#0092f6',
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0.4,
                      color: 'rgba(0,146,246,0.1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,146,246,1)',
                    },
                  ]),
                },
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red',
                },
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    //this.getTreeselect();
    this.getDeptList();
    // this.getSubjectDictList();

    this.lineChart();
    this.happenChart();
    this.statisticsChartDept()
  },
  mounted(){
  },
  methods: {
    /** 查询实验室字典列表 */
    getSubjectDictList () {
      subjectDictList({deptId: this.queryParams.deptId}).then(response => {
        this.subjectOptions = response.data;
      });
    },
    /** 查询部门下拉树结构 */

      /*getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },*/
    /** 查询学院列表 */
    getDeptList() {
      listDepartments().then(response => {
        this.deptOptions = response.data;
      });
    },
    //右上eCharts标签点击时间
    rightTopClick(type){
      let self = this;
      if(this.rightTopType != type){
        this.rightTopType = type;
        if(this.happenCharts[type][0]){
          setTimeout(function(){
            self.eChartsTypeTwo = true;
            self.eChartsTwo();
          },200);
        }else{
          // 无数据
          this.eChartsTypeTwo = false;
        }
      }
    },
    //
    rightBottomClick(type){
      let self = this;
      if(this.rightBottomType != type){
        this.rightBottomType = type;
        if(this.statisticsChartDepts[type].data[0]){
          setTimeout(function(){
            self.eChartsTypeThree = true;
            self.eChartsThree();
          },200);
        }else{
          // 无数据
          this.eChartsTypeThree = false;
        }
      }
    },
    /** 查询风险异常日志列表 */
    getList() {
      this.loading = true;
      listLog(this.queryParams).then(response => {
        this.logList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        riskPlanId: null,
        riskPlanName: null,
        subjectId: null,
        deptId: null,
        deptName: null,
        remark: null,
        createTime: null,
        userId: null,
        createBy: null,
        updateTime: null,
        updateBy: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.dateRange[0]){
        this.queryParams.startDate = this.dateRange[0]
        this.queryParams.endDate = this.dateRange[1]
      }else {
        this.queryParams.startDate = null
        this.queryParams.endDate = null
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.dateRange = []
      this.queryParams.startDate = null
      this.queryParams.endDate = null
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加风险异常日志";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getLog(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改风险异常日志";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateLog(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addLog(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 风险发生数折线统计图 */
    lineChart(){
      let self = this;
      // TODO 时间
      lineChart({}).then(response => {
        if(response.data.xAxis) {
          if(this.option.xAxis.length==1){
            response.data.xAxis.data.unshift("");
            response.data.series[0].data.unshift(0)
            this.option.xAxis[0].data=response.data.xAxis.data
            this.option.series[0].data=response.data.series[0].data
            setTimeout(function(){
              self.eChartsOne();
            },500);
          }else{
            this.option.xAxis[0].data=response.data.xAxis.data
            this.option.series[0].data=response.data.series[0].data
            setTimeout(function(){
              self.eChartsOne();
            },500);
          }
        }else{
        //  无数据处理
          this.eChartsTypeOne = false;
        }

      });
    },
    /** 风险发生占比图 */
    happenChart(){
      let self = this;
      happenChart({}).then(response => {
        let list = [
          [],
          [],
          [],
        ];
        if(response.data.halfList[0]){
          for(let i=0;i<response.data.halfList.length;i++){
            let obj = {
              name:response.data.halfList[i].riskPlanName,
              value:response.data.halfList[i].count,
            };
            list[0].push(obj);
          }
        }
        if(response.data.nearlyList[0]){
          for(let i=0;i<response.data.nearlyList.length;i++){
            let obj = {
              name:response.data.nearlyList[i].riskPlanName,
              value:response.data.nearlyList[i].count,
            };
            list[1].push(obj);
          }
        }
        if(response.data.threeList[0]){
          for(let i=0;i<response.data.threeList.length;i++){
            let obj = {
              name:response.data.threeList[i].riskPlanName,
              value:response.data.threeList[i].count,
            };
            list[2].push(obj);
          }
        }
        this.happenCharts = [...list];
        if(this.happenCharts[0][0]||this.happenCharts[1][0]||this.happenCharts[2][0]){
          if(this.happenCharts[0][0]){
            this.eChartsTypeTwo = true;
            setTimeout(function(){
              self.eChartsTwo();
            },500);
          }else{
            this.eChartsTypeTwo = false;
          }
        }else{
          // 无数据
          this.eChartsTypeTwo = false;
        }
      });
    },
    /** 学院风险统计图 */
    statisticsChartDept(){
      let self = this;
      statisticsChartDept({}).then(response => {
        let list = [
          {
            data:[],
            title:[]
          },
          {
            data:[],
            title:[]
          },
          {
            data:[],
            title:[]
          }
        ];
        if(response.data.halfList[0]){
          for(let i=0;i<response.data.halfList.length;i++){
            list[0].title.push(response.data.halfList[i].deptName);
            list[0].data.push(response.data.halfList[i].count);
          }
        }
        if(response.data.nearlyList[0]){
          for(let i=0;i<response.data.nearlyList.length;i++){
            list[1].title.push(response.data.nearlyList[i].deptName);
            list[1].data.push(response.data.nearlyList[i].count);
          }
        }
        if(response.data.threeList[0]){
          for(let i=0;i<response.data.threeList.length;i++){
            list[2].title.push(response.data.threeList[i].deptName);
            list[2].data.push(response.data.threeList[i].count);
          }
        }
        this.statisticsChartDepts = list;
        if(this.statisticsChartDepts[0].data[0]||this.statisticsChartDepts[1].data[0]||this.statisticsChartDepts[2].data[0]){
          if(this.statisticsChartDepts[0].data[0]){
            this.eChartsTypeThree = true;
            setTimeout(function(){
              self.eChartsThree();
            },500);
          }else{
            this.eChartsTypeThree = false;
          }
        }else{
          // 无数据
          this.eChartsTypeThree = false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除风险异常日志?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delLog(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('laboratory/log/export', {
        ...this.queryParams
      }, `laboratory_log.xlsx`)
    },
    //eCharts方法
    eChartsOne(){
      let self = this;
      let myChart = this.$echarts.init(document.getElementById('left-eCharts'));

      myChart.setOption(self.option);
    },
    //eCharts方法
    eChartsTwo(){
      let self = this;
      let myChart = this.$echarts.init(document.getElementById('right-top-eCharts'));
      let title = '风险数';
      let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
      let echartData = self.happenCharts[self.rightTopType];
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
      }
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1
      }, 0);

      let option = {
        color: color,
        tooltip: {
          trigger: 'item'
        },
        title: [{
          text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
          top: '138',
          left:'128',
          textStyle: {
            rich: {
              name: {
                fontSize: 18,
                fontWeight: 'normal',
                color: '#666666',
                align :'center',
                padding: [10, 0]
              },
              val: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333333',
                align :'center',
              }
            }
          }
        }],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '15%',
          top: '70',
          itemGap: 40,
          selectedMode: true,
          icon: 'rect',
          textStyle: {
            rich: {
              a: {
                color: '#000',
                width: 30
              },
              b0: {
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 80]
              },
              b1: {
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 80]
              },
              b2: {
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 80]
              },
              b3: {
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 80]
              },
              c0:{
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 10]
              },
              c1:{
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 10]
              },
              c2:{
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 10]
              },
              c3:{
                color: '#999',
                fontSize: 14,
                padding: [0, 10, 0, 10]
              }
            }
          },
          formatter: function(name) {
            let title = ''
            let total = echartData.reduce((a, b) => {
              return a + b.value * 1
            }, 0);
            var target;
            var index;
            var percentage;
            for (var i = 0, l = echartData.length; i < l; i++) {
              if (echartData[i].name == name) {
                target = echartData[i].value;
                title = echartData[i].label;
                percentage = ((echartData[i].value / total) * 100).toFixed(0);
                index = i < 6 ? i : 5;
              }
            }
            return `{a| ${name}}`+`{b${index}| ${percentage}%}`+`{a| 次数}`+`{c${index}| ${target}}`
          }

        },
        series: [{
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['160', '170'],
          data: echartData,
          hoverAnimation: true,
          itemStyle: {
            normal: {
              borderWidth: 0
            }
          },
          labelLine: {
            show:false,
          },
          label: {
            normal: {
              show:false,
            }
          },
        }]
      };
      myChart.on('legendselectchanged', (e) => {
        total=0;
        //循环取value值
        echartData.forEach(function(item) {
          //根据选中状态总和计算total
          for(let i in e.selected){
            if(e.selected[i]==true){
                if(item.name==i){
                  total+=item.value
                }
            }
          }
          //重新渲染title
          myChart.setOption({
            title: [{
              text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
            }],
          })
        })
      })
      myChart.setOption(option);
    },
    //eCharts方法
    eChartsThree(){
      let self = this;
      let myChart = this.$echarts.init(document.getElementById('right-bottom-eCharts'));
      let data = self.statisticsChartDepts[self.rightBottomType].data;
      let title = self.statisticsChartDepts[self.rightBottomType].title;
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              color: '#333333', //字体颜色
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0', //底线颜色
                width: 1,
              },
            },
            data: title,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333333', //字体颜色
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0', //底线颜色
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E0E0E0',
                width: 1,
                type: 'dashed',
              },
            },
          }
        ],
        series: [
          {
            name: '风险发生数',
            type: 'bar',
            barWidth: '15',
            itemStyle:{
              color:'#0183FA',
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
    },
  }
};
</script>

<style lang="scss" scoped>
  .plan_log {
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow-y: scroll;
    p{
      margin:0;
    }
    .top-max-big-box{
      height: 499px;
      /*margin:11px 20px 20px;*/
      margin:11px 10px 20px;
      display: flex;
      .top-max-big-title{
        position: absolute;
        left:20px;
        top:20px;
        line-height: 16px;
        font-size: 16px;
      }
      .top-left-box{
        /*width:807px;*/
        flex:1;
        height:499px;
        border-radius:10px;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        margin-right:20px;
        position: relative;
        overflow: hidden;
        padding-bottom:20px;
        #left-eCharts{
          height:100%;
          width:100%;
        }
        img{
          position: absolute;
          top:50%;
          left:50%;
          width:276px;
          height:274px;
          margin-top:-180px;
          margin-left:-100px;
        }
        .null-p{
          text-align: center;
          color:#999;
          margin-top:360px;
        }
      }
      .top-right-box{
        .top-right-top-box{
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
          width:754px;
          height:291px;
          margin-bottom:20px;
          position: relative;
          #right-top-eCharts{
            height:100%;
            width:100%;
          }
          img{
            position: absolute;
            top:50%;
            left:50%;
            width:140px;
            height:140px;
            margin-top:-70px;
            margin-left:-52px;
          }
          .null-p{
            text-align: center;
            color:#999;
            margin-top:230px;
          }
          .title-button-box{
            display: flex;
            position: absolute;
            left:160px;
            top:13px;
            p{
              width:80px;
              line-height:30px;
              font-size:14px;
              text-align: center;
              color:#999;
              cursor:pointer;
            }
            p:nth-child(1){
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }
            p:nth-child(3){
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
            }
            .selected-p{
              border:1px solid #0183FA;
              color:#0183FA;
            }
            .left-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              border-left:1px solid #999;
              border-right:1px solid rgba(255,255,255,0);
              color:#999;
            }
            .left-p-one{
              border:1px solid #999;
              color:#999;
            }
            .center-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              color:#999;
            }
            .right-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              border-right:1px solid #999;
              border-left:1px solid rgba(255,255,255,0);
              color:#999;
            }
            .right-p-one{
              border:1px solid #999;
              color:#999;
            }
          }
        }
        .top-right-bottom-box{
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
          width:754px;
          height:188px;
          position: relative;
          #right-bottom-eCharts{
            height:100%;
            width:100%;
          }
          img{
            position: absolute;
            top:50%;
            left:50%;
            width:100px;
            height:100px;
            margin-top:-50px;
            margin-left:-36px;
          }
          .null-p{
            text-align: center;
            color:#999;
            margin-top:150px;
          }
          .title-button-box{
            display: flex;
            position: absolute;
            left:160px;
            top:13px;
            p{
              width:80px;
              line-height:30px;
              font-size:14px;
              text-align: center;
              color:#999;
              cursor:pointer;
            }
            p:nth-child(1){
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }
            p:nth-child(3){
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
            }
            .selected-p{
              border:1px solid #0183FA;
              color:#0183FA;
            }
            .left-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              border-left:1px solid #999;
              border-right:1px solid rgba(255,255,255,0);
              color:#999;
            }
            .left-p-one{
              border:1px solid #999;
              color:#999;
            }
            .center-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              color:#999;
            }
            .right-p{
              border-top:1px solid #999;
              border-bottom:1px solid #999;
              border-right:1px solid #999;
              border-left:1px solid rgba(255,255,255,0);
              color:#999;
            }
            .right-p-one{
              border:1px solid #999;
              color:#999;
            }
          }
        }
      }
    }
    .bottom-max-big-box{
      border-radius:10px;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      /*margin:0 20px 20px;*/
      margin:0 10px 20px;
      padding:20px 20px 20px!important;
      display: flex;
      flex:1;
      flex-direction: column;
      /*overflow: hidden;*/
    }
  }
</style>