新修改添加页面

batman

2023-03-15 07699d6d85a8f2458162f201039419d2b189fce8

 src/views/facilityManagement/facilityIndex/index.vue

@@ -16,6 +16,7 @@
      </div>
        <div class="topChart">
          <div class="chart-item" :class="zin==1?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">当前时间设备状态</span>
              <div class="filter-part filter-part2">
@@ -25,6 +26,7 @@
            <div class="chart" :id="sbzt"></div>
          </div>
          <div class="chart-item" :class="zin==2?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">设备异常趋势</span>
              <div class="filter-part filter-part2">
@@ -34,6 +36,7 @@
            <div class="chart" :id="ycqs"></div>
          </div>
          <div class="chart-item" :class="zin==3?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">关联作业排行</span>
              <div class="filter-part filter-part3">
@@ -68,6 +71,7 @@
        </div>
        <div class="topChart">
          <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">关联作业趋势图</span>
              <div class="filter-part filter-part2">
@@ -93,6 +97,7 @@
            </div>
          </div>
          <div class="chart-item chart-item2" :class="zin==5?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">其他数据分析</span>
              <div class="filter-part filter-part2">
@@ -126,6 +131,7 @@
import axios from 'axios';
import * as echarts from "echarts";
import screenfull from "screenfull";
import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'

// 定义接口来定义对象的类型
interface stateType {
@@ -365,28 +371,37 @@
          },
          series: [
            {
              name: 'Access From',
              name: '当前时间设备状态',
              type: 'pie',
              radius: '50%',
              center: ['50%','35%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
                borderWidth: 1
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
                show: true,
                position: 'outside',
                overflow: 'truncate',
                borderWidth: 0,
                color: state.themeColor
              },
              labelLine: {
                show: true
                show: true,    // 显示指示线
                lineStyle: {
                  color: '#ccc',
                  width: 1,
                  type: 'solid'
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              },
              data: [
                { value: 1048, name: '在用' },
@@ -416,7 +431,17 @@
            }
          },
          yAxis: {
            type: 'value'
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fafafa',
                width: 1,
                type: 'dashed'
              }
            },
            axisLabel:{
              color: '#ccc'
            }
          },
          grid: {
            top: '8%',
@@ -425,7 +450,10 @@
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
              type: 'line'
              type: 'line',
              label:{
                show: true
              }
            }
          ]
        }
@@ -464,9 +492,10 @@
          },
          series: [
            {
              name: 'Access From',
              name: '按期巡检率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
@@ -529,9 +558,10 @@
          },
          series: [
            {
              name: 'Access From',
              name: '按期保养率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
@@ -594,9 +624,10 @@
          },
          series: [
            {
              name: 'Access From',
              name: '隐患销号率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
@@ -792,7 +823,7 @@
      line-height: 34px;
      top: 80px;
      right: 20px;
      z-index: 99999;
      z-index: 9;
    }
    .demo-tabs {
        width: 100%;
@@ -1063,21 +1094,32 @@

  .full{
    position:fixed;
    background: #fff;
    border-radius: 17px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(54, 252, 252, .6);
    border-radius: 17px 1px 1px 17px;
    box-shadow: 3px 3px 12px rgba(0,0,0,.2);
    height: 34px;
    line-height: 34px;
    top: 0;
    right: 20px;
    height: 32px;
    line-height: 30px;
    top: 10px;
    right: 2px;
    display: flex;
    justify-content: center;
    backdrop-filter: blur(2px);
    z-index: 99999;
  }
  .topChart{
    .chart-item{
      border-radius: 4px;
      background: rgba(8, 109, 209, 0.2);
      border: 1px solid rgba(54, 252, 252, .6);
      backdrop-filter: blur(5px);
      .item-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .el-radio.is-bordered.is-checked{
        border-color: #11FEEE !important;