cpp/cpp-ui/src/views/largeScreen/index.vue

<template>
  <div class="largeScreen">
    <div class="app-title-bg">
      <span class="sys-time">{{ sysTime }}</span>
      <div class="top-right-style flex items-center">
        <div class="top-badge">
          <el-badge :value="badgeValue.alarm">
            <img src="../../assets/images/svg/remind.svg" width="30px" @click="openAlarm()"/>
          </el-badge>
        </div>

        <div class="cpp-btu-background home-jump-btu">
          <span @click="jumpRout">后台管理</span>
        </div>
      </div>

      <div class="titleBg">
        <span class="title-text">集 中 功 率 预 测</span>
      </div>
    </div>
    <div class="home-main-container">
      <echarts-map/>
      <!-- 上     -->
      <div class="float-container top-1 width-100 height-10r flex ">
        <div v-for="item of digitalDisk" class="width-20 flex-column items-center">
          <div>
            <div class="text-bg text-style">{{ item.name }}</div>
            <div class="flex items-center number-bg-style">
              <div v-for="num of item.num" class="flex items-center justify-center num-style number-bg ">{{ num }}</div>
              <span class="unit-style">MW</span>
            </div>
          </div>
        </div>
      </div>
      <!--  右    -->
      <div class="float-container right-1 top-default flex-column right-container-style">
        <div class="position-r border-style">
          <div class="position-a width-100 top-2  flex justify-center">
            <div class="right-top-style flex justify-between">
              <span>总场站数:{{ totality.number }}</span>
              <span>总容量:{{ totality.capacity }}MW</span>
            </div>
          </div>
          <div class="barTitleBg right-title-style">限电情况</div>
          <div id="gauge" class="chartStyle"/>
        </div>
        <div class="border-style" style="margin-top: 1%">
          <div class="barTitleBg right-title-style">功率曲线</div>
          <div id="line" class="chartStyle"/>
        </div>
      </div>
      <!--     左 -->
      <div class="float-container top-default flex-column justify-around left-container-style">
        <div class="flex">
          <img src="../../assets/images/dashboard/num3.png"/>
          <div class="flex-column justify-center items-center">
            <span>风速(m/s)</span>
            <span>{{ envData.ws }}</span>
          </div>
        </div>
        <div class="flex">
          <img src="../../assets/images/dashboard/num4.png"/>
          <div class="flex-column justify-center items-center">
            <span>辐照度(W/㎡)</span>
            <span>{{ envData.radiance }}</span>
          </div>
        </div>
        <div class="flex">
          <img src="../../assets/images/dashboard/num2.png"/>
          <div class="flex-column justify-center items-center">
            <span>限电比(%)</span>
            <span>{{ xdbl }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="app-container">

      <div class="dark-el-dialog">
        <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
          <div slot="title" class="dialog-title flex justify-between">
            <div>
              <el-button @click="acknowledgeAll()">全部确认</el-button>
              <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
              <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
              <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
              <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
              <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
              <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
              <el-button @click="getAlarmConfs()">不告警配置</el-button>
            </div>
            <div class="dialog-title-badge flex justify-between">
              <el-badge :value="this.badgeValue.alarm">
                <img src="../../assets/images/svg/remind.svg" width="20px"/>
              </el-badge>
              <!--            <el-badge :value="badgeValue.confirm">-->
              <!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
              <!--            </el-badge>-->
            </div>
          </div>
          <div>
            <el-table
              :data="tableDataAlarm"
              border max-height="300px"
              element-loading-background="rgba(8, 61, 92,1)"
              v-loading="loadingAlarm"
              style="width: 100%">
              <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
              <el-table-column
                prop="stationCode" align="center" :formatter="formatStation" :show-overflow-tooltip="true"
                label="场站名称"
              >
              </el-table-column>
              <el-table-column
                prop="startTime" align="center"
                label="报警开始时间" :formatter="formatStartDate"
              >
              </el-table-column>
              <el-table-column
                prop="endTime" align="center"
                label="报警结束时间" :formatter="formatEndDate"
              >
              </el-table-column>
              <el-table-column
                prop="msg" align="center" :show-overflow-tooltip="true"
                label="报警描述">
              </el-table-column>
              \
              <el-table-column
                prop="alarmType" align="center" :formatter="formatAlarmSource"
                label="报警来源">
              </el-table-column>
              <el-table-column
                prop="operate" align="center"
                label="操作" width="80">
                <template v-slot="{ row }">
                  <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
                  <!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
                </template>
              </el-table-column>
            </el-table>
            <div class="block flex" style="justify-content: end">
              <el-pagination
                popper-class="cpp-popper"
                @size-change="handleSizeChangeAlarm"
                @current-change="handleCurrentChangeAlarm"
                :current-page=this.alarmPage.currentPage
                :page-sizes="[10, 15, 30, 50]"
                :page-size=this.alarmPage.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.alarmPage.total>
              </el-pagination>
            </div>

            <el-dialog
              width="40%" style="top:20%"
              title="不告警配置"
              :visible.sync="innerVisible"
              append-to-body>
              <!--  TODO 移植v3        -->
              <div class="dark-el-dialog">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      popper-class="cpp-popper"
                      @click="handleAdd"
                    >新增
                    </el-button>
                  </el-col>
                  <el-col :span="1.5">
                    <el-button
                      type="success"
                      plain
                      icon="el-icon-edit"
                      size="mini"
                      popper-class="cpp-popper"
                      @click="handleUpdate"
                    >修改
                    </el-button>
                  </el-col>
                  <el-col :span="1.5">
                    <el-button
                      type="danger"
                      plain
                      icon="el-icon-delete"
                      size="mini"
                      popper-class="cpp-popper"
                      @click="handleDelete"
                    >删除
                    </el-button>
                  </el-col>
                </el-row>
                <div style="padding-top: 10px">
                  <vxe-table
                    ref="xTable"
                    align="center"
                    class="mytable-style"
                    auto-resize
                    border
                    resizable
                    export-config
                    highlight-current-row
                    show-overflow
                    :data="tableDataAlarmConf"
                    :radio-config="{trigger: 'row'}">
                    <vxe-column type="radio" width="60"/>
                    <vxe-table-column field="stationCode" title="场站编号"
                                      :formatter="alarmConfTypeStationFormat"></vxe-table-column>
                    <vxe-table-column field="keyword" title="关键词"></vxe-table-column>
                    <vxe-table-column field="type" title="类型" :formatter="alarmConfTypeFormat"></vxe-table-column>
                    <vxe-table-column field="expireTime" title="失效时间"></vxe-table-column>
                  </vxe-table>
                  <vxe-pager
                    background
                    :loading="loadingAlarmConf"
                    :current-page.sync="alarmConfPage.currentPage"
                    :page-size.sync="alarmConfPage.pageSize"
                    :total="alarmConfPage.total"
                    @page-change="handleSizeChangeAlarmConf"
                    :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
                  </vxe-pager>
                </div>

              </div>

              <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="850px"
                         height="600px" style="top:30%"
                         append-to-body>
                <div class="dark-el-dialog">
                  <el-form ref="form" :model="form" :rules="rules" width="830px" label-width="150px">
                    <el-row class="mb4">
                      <el-col :span="12">
                        <el-form-item label="场站" prop="stationCode">
                          <el-select v-model="form.stationCode" placeholder="请选择" style="width: 100%"
                                     popper-class="cpp-popper">
                            <el-option
                              v-for="item in this.stationSelect()"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="关键词" prop="keyword">
                          <el-input style="width: 100%" v-model="form.keyword" maxlength="50"
                                    popper-class="cpp-popper"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row class="mb4">
                      <el-col :span="12">
                        <el-form-item label="类型" prop="type">
                          <el-select v-model="form.type" placeholder="请选择" style="width: 100%"
                                     popper-class="cpp-popper">
                            <el-option
                              v-for="item in this.alarmConfType"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="失效时间" prop="expireTime">
                          <el-date-picker
                            :clearable="false"
                            v-model="form.expireTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择失效时间"
                            popper-class="cpp-popper">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="commitChannel">确 定</el-button>
                    <el-button @click="cancelChannel">取 消</el-button>
                  </div>
                </div>
              </el-dialog>
            </el-dialog>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>

import {formatToDateTime} from "../../utils/dateUtil";
import echartsMap from './echartsMap/index.vue'
import {gaugeOption, lineOption} from "./echarts-data";

export default {
  name: 'largeScreen',
  components: {echartsMap},
  data() {
    return {
      xdbl:0,
      // 限电场站数
      xdczs:0,
      // 总场站数
      zczs:0,
      realList: [],
      ableList: [],
      theoryList: [],
      cdqList: [],
      dqList: [],
      sysBizDataTimer: "",
      sysTime: '',
      sysInterval: null,
      outerVisible: false,
      innerVisible: false,
      tableDataAlarm: [],
      tableDataAlarmConf: [],
      loadingAlarm: false,
      loadingAlarmConf: false,
      tableDataAlarmBak: [],
      digitalDisk: [{
        name: '实际功率',
        num: '0'
      }, {
        name: '理论功率',
        num: '0'
      }, {
        name: '可用功率',
        num: '0'
      }, {
        name: '超短期预测功率',
        num: '0'
      }, {
        name: '短期预测功率',
        num: '0'
      }],
      totality: {
        number: 0,
        capacity: 0
      },
      envData: {
        ws: 0,
        radiance: 0,
      },
      // 告警统计值
      badgeValue: {
        alarm: 0,
        confirm: 0
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      alarmPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      alarmConfPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      stationList: [],
      alarmEnum: [],
      alarmType: '',
      form: {
        stationCode: '',
        keyword: '',
        type: 1,
        expireTime: undefined
      },
      // 表单校验
      rules: {
        stationCode: [
          {required: true, message: "场站编号不能为空", trigger: "blur"}
        ],
        keyword: [
          {required: true, message: "关键词", trigger: "blur"}
        ],
        type: [
          {required: true, message: "类型不能为空", trigger: "blur"}
        ],
        expireTime: [
          {required: true, message: "失效时间不能为空", trigger: "blur"}
        ],
      },
      title: '',
      open: false,
      alarmConfType: [
        {
          label: "等于",
          value: 1
        },
        {
          label: "包含",
          value: 0
        }
      ]
    }
  },
  mounted() {
    this.init()
    const _this = this
    this.sysInterval = setInterval(function () {
      _this.sysTime = formatToDateTime(new Date())
    }, 1000)
    if (this.sysBizDataTimer) {
      clearInterval(this.sysBizDataTimer);
    } else {
      this.sysBizDataTimer = setInterval(() => {
        this.getBizData(this);//再次加载数据,自己定义的方法
      }, 60000);//每隔60秒刷新一次
    }
  },
  destroyed() {
    clearInterval(this.sysInterval);
    clearInterval(this.sysBizDataTimer);
  },
  methods: {
    async getBizData() {
      await this.$axios({url: '/largeScreenController/getBizData', method: 'get'}).then(response => {
        // 顶部统计值
        let sumMap = response.data.sumMap
        this.digitalDisk[0].num = sumMap.realSum + ''
        this.digitalDisk[1].num = sumMap.theorySum + ''
        this.digitalDisk[2].num = sumMap.ableSum + ''
        this.digitalDisk[3].num = sumMap.cdqSum + ''
        this.digitalDisk[4].num = sumMap.dqSum + ''
        // 曲线图
        let curveMap = response.data.curveMap
        this.realList = curveMap.realList
        this.theoryList = curveMap.theoryList
        this.cdqList = curveMap.cdqList
        this.dqList = curveMap.dqList
        this.cdqList = curveMap.cdqList
        // 限电信息
        let xdMap = response.data.xdMap
        this.totality.number = xdMap.zczs
        this.totality.capacity = xdMap.totalCapacity
        this.xdczs = xdMap.xdczs
        this.zczs = xdMap.zczs
        this.xdbl = xdMap.xdbl
        // 风速、辐照度平均值
        let envDataMap = response.data.envDataMap
        this.envData.ws = envDataMap.wsAvg
        this.envData.radiance = envDataMap.fzdAvg

        this.drawChart()
      })
    },
    jumpRout() {
      this.$router.push({path: "/configManager/electricField"})
    },
    openAlarm() {
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.getAbnormalAlarms("")
      this.outerVisible = true
    },
    init() {
      this.getBizData()
      this.getStationCode()
      this.drawTable()
      // this.drawChart()
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
      })
      await this.$axios({url: '/enumSelect/alarmEnum', method: 'get'}).then(response => {
        this.alarmEnum = response.data
      })
    },
    drawTable() {
      // let data = [
      //   {name: 'xxx', date: 1728700191000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728613791000, describe: 'xxxx', operate: 1, type: 'tunnel'},
      //   {name: 'xxx', date: 1728440991000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728527391000, describe: 'xxxx', operate: 1, type: ''},
      //   {name: 'xxx', date: 1728354591000, describe: 'xxxx', operate: 0, type: ''}
      // ]
      // this.tableDataAlarmBak = data
      // this.tableDataAlarm = data
      // this.page.total = this.tableDataAlarm.length
      this.getAlarmSize()

      // this.badgeValue.confirm = this.tableDataAlarm.filter(w => w.operate === 0).length
      // this.badgeValue.alarm = this.tableDataAlarm.filter(w => w.operate === 1).length
    },
    getAlarmSize() {
      this.$axios.get('/abnormalAlarm/alarmCountStatus1').then(response => {
        this.badgeValue.alarm = response.data
      }).catch(() => {

      })
    },
    getAlarmConfs() {
      this.loadingAlarmConf = true

      let queryParams = {
        currentPage: this.alarmConfPage.currentPage,
        pageSize: this.alarmConfPage.pageSize,
        time: new Date().getTime()
      }
      this.innerVisible = true
      this.$axios.get('/alarmConf/pageByExpireTime', {params: queryParams}).then(response => {
        this.tableDataAlarmConf = response.data.records
        this.alarmConfPage.total = response.data.total
        this.loadingAlarmConf = false
      }).catch(() => {
        this.loadingAlarmConf = false
      })
    },
    getAbnormalAlarms(prop) {
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.alarmType = prop
      this.filterInfo()
    },
    filterInfo() {
      this.getAlarmSize()
      this.loadingAlarm = true
      let queryParams = {
        currentPage: this.alarmPage.currentPage,
        pageSize: this.alarmPage.pageSize,
        alarmType: this.alarmType
      }
      this.$axios.get('/abnormalAlarm/dashboard', {params: queryParams}).then(response => {
        this.tableDataAlarm = response.data.records
        this.alarmPage.total = response.data.total
        this.loadingAlarm = false
      }).catch(() => {
        this.loadingAlarm = false
      })

      // if (prop !== null) {
      //   this.tableDataAlarm  = this.tableDataAlarmBak.filter(w => w.type === prop)
      // } else {
      //   this.tableDataAlarm = JSON.parse(JSON.stringify(this.tableDataAlarmBak))
      // }

    },
    /*模拟数据*/
    mockData(num) {
      let data = []
      for (let i = 0; i <= 96; i++) {
        data.push(Math.floor(Math.round(Math.random() * 10) * num, 2))
      }
      return data
    },
    drawChart() {
      console.log(this.xdczs)
      gaugeOption.series[0].data[0].value = this.xdczs
      gaugeOption.series[1].data[0].value = this.xdczs
      gaugeOption.series[0].max = this.zczs
      gaugeOption.series[1].max = this.zczs
      var myChart = this.$echarts.init(document.getElementById('gauge'));
      myChart.setOption(gaugeOption, true)
      lineOption.series[0].data = this.realList
      lineOption.series[1].data = this.ableList
      lineOption.series[2].data = this.theoryList
      lineOption.series[3].data = this.dqList
      lineOption.series[4].data = this.cdqList

      var myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
      myChart1.setOption(lineOption, true)
      window.addEventListener("resize", function () {
        myChart.zhChart.resize();
        myChart1.zhChart.resize();
      });
    },
    formatStartDate(row) {
      return formatToDateTime(row.startTime)
    },
    formatEndDate(row) {
      if (row.endTime) {
        return formatToDateTime(row.startTime)
      } else {
        return "未结束"
      }
    },
    formatStation(row) {
      let name = '未知场站名称'
      this.stationList.forEach(s => {
        if (row.stationCode == s.value) {
          name = s.label
          return
        }
      })
      return name
    },
    formatAlarmSource(row) {
      let name = '未知场站名称'
      this.alarmEnum.forEach(s => {
        if (row.alarmType === s.value) {
          name = s.label
          return name
        }
      })
      return name
    },
    handleSizeChangeAlarm(val) {
      this.alarmPage.pageSize = val
      this.alarmPage.currentPage = 1
      this.filterInfo()

    },
    handleCurrentChangeAlarm(val) {
      this.alarmPage.currentPage = val
      this.filterInfo()
    },

    handleSizeChangeAlarmConf({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.getAlarmConfs();
    },
    acknowledgeAll() {
      this.$confirm('是否确认执行"所有场站告警全部确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/abnormalAlarm/acknowledgeAll').then(response => {
          this.filterInfo()
          this.$message.info("确认成功！")
        }).catch(() => {
          this.loading = false
        })
      })
    },
    acknowledge(row) {
      this.$confirm('是否对 【' + this.formatStation(row) + '：' + row.msg + '】进行"确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.status = 1
        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
          this.$message.info("【" + row.msg + "】 已确认！")
          this.filterInfo()
        }).catch(() => {
          this.loading = false
        })
      })
    },
    // 表单重置
    reset() {
      this.edit = false;
      this.form = {
        stationCode: '',
        name: '',
        electricFieldTypeEnum: '',
        capacity: '',
        longitude: '',
        latitude: '',
        provinceEnum: '',
        ftpChanelId: '',
        ftpUrl: '',
      },
        this.resetForm("form");
    },
    // 取消按钮
    cancelChannel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增场站信息";
      this.edit = false;
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.title = "修改场站信息";
      this.reset();
      const _selectData = this.$refs.xTable.getRadioRecord(true)
      if (_selectData == null) {
        this.$message({
          type: 'warning',
          message: '请选择记录!'
        });
        return
      }
      this.open = true;
      this.edit = true;
      this.form = JSON.parse(JSON.stringify(_selectData))
    },
    // 提交按钮
    commitChannel() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.form.id != undefined) {
            // 更新操作
            this.$axios.post('/alarmConf/updateById', this.form).then((res) => {
              this.$message.success('修改成功')
              this.open = false;
              this.getAlarmConfs()
            }).catch((error) => {
            })
          } else {
            // 新增操作
            this.$axios.post('/alarmConf/save', this.form).then((res) => {
              if (res == undefined) {
                this.$message.success('新增失败')
              } else {
                this.$message.success('新增成功')
                this.getAlarmConfs()
                this.open = false;
              }
            }).catch((error) => {
            })
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      const _selectData = this.$refs.xTable.getRadioRecord(true)
      if (_selectData == null) {
        this.$message({
          type: 'warning',
          message: '请选择记录!'
        });
        return
      }

      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(_selectData)
      }).catch(() => {
      });
    },
    /**
     * 删除提交
     */
    doDelete(row) {
      this.$axios.post('/alarmConf/remove', row).then((res) => {
        this.$message.success('删除成功！')
        this.getAlarmConfs()
      }).catch((error) => {
      })
      this.loading = false
    },
    stationSelect() {
      let a = [{label: '所有场站', value: 'all'}]
      this.stationList.forEach(s => {
        a.push(s)
      })
      return a
    },
    alarmConfTypeFormat({cellValue, row, column}) {
      let result = '未知类型'
      this.alarmConfType.forEach(a => {
        if (a.value == cellValue) {
          result = a.label
        }
      })
      return result
    },
    alarmConfTypeStationFormat({cellValue, row, column}) {
      let result = '未知'
      this.stationSelect().forEach(a => {
        if (a.value == cellValue) {
          result = a.label
        }
      })
      return result
    }

  }

}
</script>

<style scoped lang="scss">
$top-container-height: 8rem;
.largeScreen {
  width: 100%;
  height: calc(100vh);
  color: white;
  background-color: #101C38;
  background-image: url('../../assets/images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-right-style {
  width: 15%;
  position: absolute !important;
  right: 15px;
  justify-content: end;
}

.top-badge {
  cursor: pointer;
  margin-right: 30px;
  padding-top: 2%;

  ::v-deep .el-badge__content.is-fixed {
    top: 5px;
    right: 5px;
  }
}

.home-jump-btu {
  width: 100px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

}

.chartStyle {
  width: 100%;
  height: calc(35vh);
}

.home-main-container {
  position: relative;
}

.float-container {
  position: absolute;
}

.right-container-style {
  width: 30%;
  height: calc(100% - 10rem);
}

.left-container-style {
  width: 12%;
  height: calc(50%);
  left: 4rem;
  font-size: large;
}

.border-style {
  border-radius: 5px;
  box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
}

.right-top-style {
  font-size: 20px;
  width: 50%;
}

.top-1 {
  top: 1rem;
}

.top-2 {
  top: 3rem;
}

.top-default {
  top: $top-container-height;
}

.right-1 {
  right: 1rem;
}

.width-100 {
  width: 100%;
}

.height-10r {
  height: $top-container-height;
}

.width-20 {
  width: 20%;
}

.text-style {
  width: 70%;
  height: 30px;
  padding: 1% 0 0 15%;
}

.unit-style {
  margin-left: 10px;
  font-size: 20px;
}

.num-style {
  width: 30px;
  height: 50px;
  font-size: 30px;
  margin-left: 10px;
}

.number-bg-style {
  margin-top: 10px;
}

.right-title-style {
  width: 90%;
  padding: 1% 0 0 10%;
  font-size: 18px;
  height: 35px;
}

.barTitleBg {
  background-image: url('../../assets/images/dashboard/barTitleBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


.text-bg {
  background-image: url('../../assets/images/dashboard/numTitle.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.number-bg {
  background-image: url('../../assets/images/dashboard/numBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dialog-title {
  width: 90%;
}

.dialog-title-badge {
  //width: 10%;

  ::v-deep .el-badge__content.is-fixed {
    top: 10px;
    right: 5px;
  }

  ::v-deep .el-badge__content {
    background-color: transparent;
    font-size: 14px;
    border: none;
  }
}
</style>