FE-V2-PC/src/views/medicUniversity-3_1/indexHome.vue

<!--首页-->
<template>
    <div class="app-container indexHome scrollbar-box">
      <div class="top-max-big-box">
        <div class="top-for-max-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpkysl.png">
          <div>
            <p>化学品可用数量</p>
            <p class="font-color-1">{{chemicalUsageCountData.chemicalUsableNum}}</p>
          </div>
        </div>
        <div class="top-for-max-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpgsl.png">
          <div>
            <p>化学品柜数量</p>
            <p class="font-color-2">{{chemicalUsageCountData.cabinetNum}}</p>
          </div>
        </div>
        <div class="top-for-max-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpyjsl.png">
          <div>
            <p>化学品用结数量</p>
            <p class="font-color-3">{{chemicalUsageCountData.chemicalOutNum}}</p>
          </div>
        </div>
        <div class="top-for-max-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpzfsl.png">
          <div>
            <p>化学品作废数量</p>
            <p class="font-color-4">{{chemicalUsageCountData.chemicalCancelNum}}</p>
          </div>
        </div>
        <div class="top-for-max-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpjjgq.png">
          <div>
            <p>化学品即将过期</p>
            <p class="font-color-5">{{chemicalUsageCountData.overdueTime}}</p>
          </div>
        </div>
      </div>
      <div class="center-max-big-box">
        <div class="center-left-max-box">
          <p class="min-box-title-p">化学品特别提示</p>
          <div class="center-left-min-box">
            <div>
              <p>待归还数：</p>
              <p style="color:#FF6200;">{{chemicalUnusualCountData.toBeReturned}}</p>
            </div>
            <div>
              <p>超时未归还数：</p>
              <p style="color:#FF2D2D;">{{chemicalUnusualCountData.overtimeReturn}}</p>
            </div>
          </div>
          <div class="center-left-min-box">
            <div>
              <p>今日领用数：</p>
              <p>{{chemicalUnusualCountData.todayCollect}}</p>
            </div>
            <div>
              <p>今日归还数：</p>
              <p>{{chemicalUnusualCountData.todayReturn}}</p>
            </div>
          </div>
          <div class="center-left-min-box">
            <div>
              <p>今日用结数：</p>
              <p>{{chemicalUnusualCountData.todayOutNum}}</p>
            </div>
            <div>
              <p>今日作废数：</p>
              <p>{{chemicalUnusualCountData.todayCancelNum}}</p>
            </div>
          </div>
        </div>
        <div class="center-center-max-box">
          <p class="min-box-title-p">化学品使用量TOP6</p>
          <div class="center-center-for-box" v-for="(item,index) in chemicalUsagesCountData" :key="index">
            <p :class="item.classifyLevel == 1?'for-color-p-1':(item.classifyLevel == 2?'for-color-p-2':'')">{{item.classifyLevel=='1'?'危险':(item.classifyLevel=='2'?'普通':'')}}</p>
            <p>{{item.chemicalUsages}}</p>
            <p>{{item.adminUser}}</p>
          </div>
          <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!chemicalUsagesCountData[0]">暂无数据</p>
          <p class="position-min-button" @click="goPage('usageRecord')" v-hasPermi="['chemical:hxpUserecord:list']">更多</p>
        </div>
        <div class="center-right-max-box">
          <p class="min-box-title-p">化学品属性占比</p>
          <div class="center-right-big-box">
            <div id="eCharts-box-1">

            </div>
            <div class="eCharts-right-list-box">
              <div v-for="(item,index) in chemicalClassifyMixList">
                <p :style="'background:'+eChartsListColor[index]+';'"></p>
                <p>{{item.classifyAttribute}}</p>
                <p>{{item.chemicalMix}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-max-big-box">
        <div class="bottom-left-max-box">
          <p class="min-box-title-p" style="margin-bottom:24px;">报警通知</p>
          <div class="bottom-left-for-max-box">
            <div class="bottom-left-for-box" :class="{anim:animate==true}" ref="con1"
                 v-for="(item,index) in alarmList" :key="index" v-if="index<6" @click="lockInfo(item)">
              <p>{{item.alarmTime}}</p>
              <p>{{item.alarmContent}}</p>
              <!--<p v-if="!item.alarmContent">{{item.alarmContent}}</p>-->
              <!--<el-tooltip class="item" effect="dark" :content="item.alarmContent" placement="top" v-else>-->
                <!--<p style="overflow: hidden;height:24px;">{{item.alarmContent}}</p>-->
              <!--</el-tooltip>-->
              <p>{{item.alarmMode}}</p>
              <p>{{item.liableUserName}}</p>
              <!--<p v-if="!item.liableUserName">{{item.liableUserName}}</p>-->
              <!--<el-tooltip class="item" effect="dark" :content="item.liableUserName" placement="top" v-else>-->
                <!--<p>{{item.liableUserName}}</p>-->
              <!--</el-tooltip>-->
            </div>
            <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!alarmList[0]">暂无数据</p>
          </div>
          <p class="position-min-button" @click="goPage('alarmRecord')" v-hasPermi="['chemical:hxpAlarmRecord:list']">更多</p>
        </div>
        <div class="bottom-right-max-box">
          <div class="title-button-box">
            <p :class="buttonType == 1?'button-color-1':(buttonType == 2?'button-color-2':'')" @click="libraryButton(1)">入库数量</p>
            <p :class="buttonType == 2?'button-color-1':(buttonType == 1?'button-color-2':'')" @click="libraryButton(2)">出库数量</p>
          </div>
          <div id="bottom-right-eCharts-box">

          </div>
          <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 1 && goPageTypeOne">更多</p>
          <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 2 && goPageTypeTwo">更多</p>
        </div>
      </div>
      <!--报警信息查看-->
      <el-dialog title="报警信息" :visible.sync="homeDialogType" v-if="homeDialogType" @close="homeDialogOff" width="700px" append-to-body class="index-home-dialog-box">
        <div class="index-home-dialog-big-box">
          <p>报警时间：</p>
          <p>{{homeDialogData.alarmTime}}</p>
        </div>
        <div class="index-home-dialog-big-box">
          <p>报警内容：</p>
          <p>{{homeDialogData.alarmContent}}</p>
          <!--<el-input-->
            <!--disabled-->
            <!--resize="none"-->
            <!--type="textarea"-->
            <!--:autosize="{ minRows: 2, maxRows: 4}"-->
            <!--placeholder="请输入内容"-->
            <!--v-model="homeDialogData.liableUserName">-->
          <!--</el-input>-->
        </div>
        <div class="index-home-dialog-big-box-one">
          <div class="index-home-dialog-min-box">
            <p>负责人：</p>
            <p>{{homeDialogData.adminNames[0]}}</p>
          </div>
          <div class="index-home-dialog-min-box">
            <p>联系方式：</p>
            <p>{{homeDialogData.adminNames[1]}}</p>
          </div>
        </div>
        <div class="index-home-dialog-big-box-one">
          <div class="index-home-dialog-min-box">
            <p>学院：</p>
            <p>{{homeDialogData.alarmDeptName}}</p>
          </div>
          <div class="index-home-dialog-min-box">
            <p>实验室：</p>
            <p>{{homeDialogData.subName}}</p>
          </div>
        </div>
        <div class="index-home-dialog-big-box-one">
          <div class="index-home-dialog-min-box">
            <p>安全责任人：</p>
            <p>
              <span v-for="(item,index) in homeDialogData.adminUserList">{{item}}<span v-if="index+1!=homeDialogData.adminUserList.length">、</span></span>
            </p>
          </div>
          <div class="index-home-dialog-min-box">
            <p>联系方式：</p>
            <p>
              <span v-for="(item,index) in homeDialogData.adminPhoneList">{{item}}<span v-if="index+1!=homeDialogData.adminPhoneList.length">、</span></span>
            </p>
          </div>
        </div>
        <div class="index-home-dialog-big-box-one">
          <div class="index-home-dialog-min-box">
            <p>报警方式：</p>
            <p>{{homeDialogData.alarmMode}}</p>
          </div>
          <div class="index-home-dialog-min-box">
            <p>处理状态：</p>
            <p v-if="homeDialogData.alarmModeStatus==3&&homeDialogData.buttonType == 1"
               class="buttonTypeTwo" @click="handle">待处理</p>
            <p v-else :class="homeDialogData.handlingStatus == 1?'buttonTypeOne':(homeDialogData.handlingStatus == 2?'buttonType':'')">
              {{homeDialogData.handlingStatus == 1?'待处理':(homeDialogData.handlingStatus == 2?'已处理':'')}}</p>
          </div>
        </div>
        <div slot="footer" class="teacher-import-dialog-button-box">
          <p class="inquire-button-one" @click="homeDialogOff">确定</p>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { chemicalUsageCount,chemicalUnusualCount,chemicalUsagesCount,chemicalClassifyMix,alarmRecordList,joinOutCount,stockTotal,handle } from "@/api/medicUniversity-3_1/index";
  import echarts from 'echarts'
    export default {
      name: "indexHome",
      data() {
        return {
          goPageTypeOne:this.hasPermiDom(['chemical:hxpStock:listJoin']),
          goPageTypeTwo:this.hasPermiDom(['chemical:hxpStock:listOut']),
          //化学品总量
          maxNum:0,
          //化学品数量
          chemicalUsageCountData:{},
          //化学品特表提示
          chemicalUnusualCountData:{},
          //化学品使用量TOP6
          chemicalUsagesCountData:[],
          //化学品分类统计
          chemicalClassifyMixList:[],
          chemicalClassifyMixData:[],
          //出库入库统计
          joinOutCountTime:[],
          joinOutCountData:[],
          //报警通知列表
          alarmList:[],
          alarmListData:[],
          buttonType:1,
          eChartsListColor : ["#009DFF", "#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4"],
          eChartsList:[],
          //定时滚动
          timer:{},
          animate:false,
          //报警详情弹窗
          homeDialogType:false,
          homeDialogData:{},
        };
      },
      created() {
      },
      mounted(){
        this.chemicalUsageCount();
        this.chemicalUnusualCount();
        this.chemicalUsagesCount();
        this.stockTotal();
        // this.chemicalClassifyMix();
        this.alarmRecordList(1);
        this.joinOutCount(1);
      },
      methods: {
        //查看详情
        lockInfo(item){
          console.log(item);
          this.$set(this,'homeDialogData',item);
          this.$set(this.homeDialogData,'adminNames',item.adminNames.split(' '));
          let list = item.safeUserNames.split('、')
          let userList = [];
          let phoneList = [];
          for(let i=0;i<list.length;i++){
            let newList = list[i].split(' ');
            userList.push(newList[0])
            phoneList.push(newList[1])
          }
          this.$set(this.homeDialogData,'adminUserList',userList);
          this.$set(this.homeDialogData,'adminPhoneList',phoneList);
          this.homeDialogType = true;
        },
        homeDialogOff(){
          this.homeDialogType = false;
          this.$set(this,'homeDialogData',{});
        },
        //处理报警记录
        handle(){
          let self = this;
          this.$confirm('确定要处理吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            handle({id:self.homeDialogData.id}).then(response => {
              self.msgSuccess(response.msg);
              for(let i=0;i<self.alarmList.length;i++){
                if(self.homeDialogData.id == self.alarmList[i].id){
                  self.$set(self.homeDialogData,'handlingStatus',2);
                  self.$set(self.homeDialogData,'buttonType',2);
                  self.alarmRecordList();
                }
              }
              self.$forceUpdate();
            })
          }).then(() => {
          }).catch(() => {});
        },
        //出库/入库切换方法
        libraryButton(type){
          if(this.buttonType != type){
            this.buttonType = type;
            this.joinOutCount(type);
          }
        },
        //跳转方法
        goPage(type){
          if(type == 'usageRecord'){
            //使用记录
            this.$router.push({
              path: `/chemicalLibrary/usageRecord`,
            })
          }else if(type == 'alarmRecord'){
            //报警通知
            this.$router.push({
              path: `/chemicalLibrary/alarmRecord`,
            })
          }else if(type == 'library'){
            if(this.buttonType == 1){
              //入库
              this.$router.push({
                path: `/chemicalLibrary/InventoryManagement/warehousingRecord`,
              });
            }else if(this.buttonType == 2){
              //出库
              this.$router.push({
                path: `/chemicalLibrary/InventoryManagement/OutboundRecord`,
              });
            }
          }
        },
        //化学品数量
        chemicalUsageCount(){
          chemicalUsageCount().then(response => {
            this.chemicalUsageCountData = response.data;
            // this.chemicalClassifyMix();
          })
        },
        //化学品特别提示
        chemicalUnusualCount(){
          chemicalUnusualCount().then(response => {
            this.chemicalUnusualCountData = response.data;
          })
        },
        //化学品使用量排行top6
        chemicalUsagesCount(){
          chemicalUsagesCount().then(response => {
            this.chemicalUsagesCountData = response.data;
          })
        },
        //获取化学品总量接口
        stockTotal(){
          stockTotal().then(response => {
            this.maxNum = response.data;
            this.chemicalClassifyMix();
          })
        },
        //化学品分类统计
        chemicalClassifyMix(){
          chemicalClassifyMix().then(response => {
            let newList = [];
            for(let i=0;i<response.data.length;i++){
              if(i<6){
                newList.push(response.data[i]);
              }
            }
            this.chemicalClassifyMixList = JSON.parse(JSON.stringify(newList));
            let list = [];
            for(let i=0;i<newList.length;i++){
              let obj = {
                name:newList[i].classifyAttribute,
                value:newList[i].chemicalMix.replace('%','')
              }
              list.push(obj);
            }
            this.$set(this,'chemicalClassifyMixData',list)
            this.eChartsOne();
          })
        },
        //报警通知列表
        alarmRecordList(type){
          let self = this;
          alarmRecordList({pageNum:1,pageSize:100,handlingStatus:1,}).then(response => {
            let id = localStorage.getItem('userId')
            for(let i=0;i<response.rows.length;i++){
              response.rows[i].safeUserId = response.rows[i].safeUserId.split(",");
              for(let o=0;o<response.rows[i].safeUserId.length;o++){
                if(response.rows[i].safeUserId[o] == id){
                  response.rows[i].buttonType = 1;
                }
              }
            }
            this.alarmList = response.rows;
            if(type == 1){
              if(response.rows[6]){
                this.timer = setInterval(this.scroll,3000)
              }
            }

          })
        },
        //出库/入库数据
        joinOutCount(type){
          joinOutCount({status:type}).then(response => {
            let timeList = [];
            let dataList = [];
            for(let i=0;i<response.data.length;i++){
              timeList.push(response.data[i].nowData);
              dataList.push(response.data[i].stockNum);
            }
            this.$set(this,'joinOutCountTime',timeList);
            this.$set(this,'joinOutCountData',dataList);
            this.eChartsTwo();
          })
        },
        //eCharts方法
        eChartsOne(){
          let self = this;
          let myChart = this.$echarts.init(document.getElementById('eCharts-box-1'));
          let bgColor = "#fff";
          let title = "库存总量";
          let echartData = this.chemicalClassifyMixData;

          let formatNumber = function (num) {
            console.log("num",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 = {
            backgroundColor: bgColor,
            color: this.eChartsListColor,
            title: [
              {
                // text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
                text: "{name|" + title + "}\n{val|" + formatNumber(this.maxNum) + "}",
                top: "center",
                left: "center",
                type:false,
                textStyle: {
                  rich: {
                    name: {
                      fontSize: 18,
                      fontWeight: "normal",
                      color: "#333333",
                      padding: [10, 0],
                    },
                    val: {
                      fontSize: 18,
                      fontWeight: "normal",
                      color: "#333333",
                    },
                  },
                },
              },
            ],
            series: [
              {
                type: "pie",
                radius: ["50%", "70%"],
                center: ["50%", "50%"],
                data: echartData,
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    borderColor: bgColor,
                    borderWidth: 2,
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
        },
        //eCharts方法
        eChartsTwo(){
          let self = this;
          let myChart = this.$echarts.init(document.getElementById('bottom-right-eCharts-box'));
          let option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(203, 158, 255,1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(203, 158, 255,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(203, 158, 255,1)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            grid: {
              top: "15%",
              left: "10%",
              right: "5%",
              bottom: "15%",
              // containLabel: true
            },
            xAxis: [
              {
                type: "category",
                axisLine: {
                  show: false,
                },

                axisLabel: {
                  color: "#333",
                  width: 100,
                },
                splitLine: {
                  show: false,
                },
                boundaryGap: true,
                data: this.joinOutCountTime,
              },
            ],

            yAxis: [
              {
                type: "value",
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#666",
                    opacity: 0.23,
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#999",
                  },
                },
                axisLabel: {
                  show: true,
                  margin: 20,
                  textStyle: {
                    color: "#333",
                  },
                },
                axisTick: {
                  show: true,
                },
              },
            ],
            series: [
              {
                name: "数量",
                type: "line",
                showAllSymbol: false,
                symbol: "none",
                symbolSize: 10,
                lineStyle: {
                  normal: {
                    color: "#00AEFF",
                  },
                },
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    color: "#A582EA",
                  },
                },
                itemStyle: {
                  color: "#00AEFF",
                  borderColor: "#00AEFF",
                  borderWidth: 0,
                  show: false,
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(203,158,255,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(203,158,255,0)",
                        },
                      ],
                      false
                    ),
                  },
                },
                data: this.joinOutCountData,
              },
            ],
          };
          myChart.setOption(option);
        },
        //定时滚动
        scroll() {
          let self = this;
          self.$refs.con1[0].style.marginTop = '-48px';
          self.animate = !self.animate;
          setTimeout(function () {
            self.alarmList.push(self.alarmList[0]);
            self.alarmList.shift();
            self.$refs.con1[0].style.marginTop = '0px';
            self.animate = !self.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
          }, 500)
        },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
        console.log("beforeDestroy");
      },
      destroyed() {
        //清除定时器
        clearInterval(this.timer);
        console.log("destroyed");
      }
    }
</script>

<style scoped lang="scss">
  .indexHome{
    flex:1;
    display: flex;
    flex-direction: column;
    p{
      margin:0;
      padding:0;
      color:#333;
    }
    .anim{
      transition: all 0.5s;
    }
    .top-max-big-box{
      display: flex;
      padding:0 10px;
      .top-for-max-box{
        width:290px;
        height:120px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        margin:22px auto;
        display: flex;
        img{
          width:68px;
          height:68px;
          margin:26px 26px 26px 16px;
        }
        div{
          p:nth-child(1){
            line-height:68px;
            font-size:18px;
            font-weight:500;
          }
          p:nth-child(2){
            line-height:30px;
            font-size:30px;
          }
          .font-color-1{
            color:#0360FF;
          }
          .font-color-2{
            color:#742EFF;
          }
          .font-color-3{
            color:#0DDBDB;
          }
          .font-color-4{
            color:#FFA201;
          }
          .font-color-5{
            color:#FF4F4F;
          }
        }
      }
    }
    .center-max-big-box{
      display: flex;
      padding:0 20px;
      .center-left-max-box{
        flex:1;
        height:351px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        .center-left-min-box{
          display: flex;
          width:450px;
          margin:0 auto;
          font-size:16px;
          font-weight:500;
          div{
            flex:1;
            display: flex;
            p{
              line-height:94px;
            }
            p:nth-child(1){
              width:150px;
              text-align: right;
            }
            p:nth-child(2){
              flex:1;
              font-size:34px;
            }
          }
        }
      }
      .center-center-max-box{
        position: relative;
        width:500px;
        flex:1;
        height:351px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        margin:0 22px;
        .center-center-for-box{
          display: flex;
          margin-top:24px;
          p{
            line-height:24px;
            font-weight:500;
          }
          p:nth-child(1){
            width:50px;
            font-size:12px;
            color:#fff;
            margin-right:15px;
            margin-left:30px;
            text-align: center;
            border-radius:4px;
          }
          p:nth-child(2){
            flex:1;
            font-size:16px;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            margin-right:30px;

          }
          p:nth-child(3){
            margin-right:30px;
          }
          .for-color-p-1{
            background: #FC7F1A;
          }
          .for-color-p-2{
            background: #0183FA;
          }
        }
      }
      .center-right-max-box{
        flex:1;
        height:351px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        display: flex;
        flex-direction: column;
        .center-right-big-box{
          display: flex;
          flex:1;
          #eCharts-box-1{
            flex:1;
          }
          .eCharts-right-list-box{
            width:220px;
            padding-top:60px;
            div{
              display: flex;
              margin-bottom:15px;
              p{
                line-height: 20px;
                font-size:14px;
                font-weight:500;
              }
              p:nth-child(1){
                width:14px;
                height:14px;
                margin:3px 10px 3px 0;
              }
              p:nth-child(2){
                flex: 1;
              }
              p:nth-child(3){
                margin:0 20px 0 15px;
              }
            }
          }
        }
      }
    }
    .bottom-max-big-box{
      display: flex;
      padding:20px;
      .bottom-left-max-box{
        flex:1;
        width: 760px;
        height:347px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        position: relative;
        overflow: hidden;
        .bottom-left-for-max-box{
          overflow: hidden;
          .bottom-left-for-box{
            display: flex;
            margin-bottom:24px;
            cursor: pointer;
            p{
              font-size:16px;
              line-height:24px;
              font-weight:500;
            }
            p:nth-child(1){
              width:160px;
              margin-right:50px;
              margin-left:30px;
              text-align: center;
              border-radius:4px;
            }
            p:nth-child(2){
              flex:1;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
              margin-right:30px;

            }
            p:nth-child(3){
              margin-right:30px;
            }
            p:nth-child(4){
              text-align: right;
              width:160px;
              margin-right:30px;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
        }
      }
      .bottom-right-max-box{
        position: relative;
        margin-left:20px;
        flex:1;
        height:347px;
        border-radius:10px;
        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
        display: flex;
        flex-direction: column;
        .title-button-box{
          display: flex;
          margin:20px 0 0 28px;
          p{
            text-align: center;
            width:90px;
            height:38px;
            line-height:38px;
            cursor: pointer;
            font-size:18px;
            font-weight:500;
          }
          p:nth-child(1){
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
          }
          p:nth-child(2){
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
          }
          .button-color-1{
            color:#fff;
            background: #0183FA;
          }
          .button-color-2{
            color:#333333;
            background: #fff;
            border:1px solid #A2A2A2;
          }
        }
        #bottom-right-eCharts-box{
          flex:1;
        }
      }
    }
    .min-box-title-p{
      font-size:18px;
      font-weight:500;
      line-height:20px;
      margin-top:20px;
      margin-left:30px;
    }
    .position-min-button{
      position:absolute;
      right:20px;
      top:20px;
      font-weight: 500;
      font-size:16px;
      cursor: pointer;
    }
  }
</style>
<style lang="scss">
  .index-home-dialog-box{
    .index-home-dialog-big-box{
      display: flex;
      margin: 0 20px;
      p{
        font-size:14px;
        font-weight:500;
        line-height:20px;
      }
      p:nth-child(1){
        width:100px;
        text-align: right;
      }
      p:nth-child(2){
        flex:1;
      }
    }
    .index-home-dialog-big-box-one{
      display: flex;
      margin: 0 20px;
      .index-home-dialog-min-box{
        display: flex;
        flex:1;
        p{
          font-size:14px;
          font-weight:500;
          line-height:20px;
        }
        p:nth-child(1){
          width:100px;
          text-align: right;

        }
        p:nth-child(2){
          flex: 1;
        }
        .buttonType{
          font-weight: 700;
          color:#333;
        }
        .buttonTypeOne{
          font-weight: 700;
          color:#2765CD;
        }
        .buttonTypeTwo{
          width:60px;
          flex:none!important;
          text-align: center;
          font-weight: 700;
          background: #2765CD;
          color:#fff;
          border-radius:4px;
          cursor: pointer;
        }
      }
    }
  }
</style>