新修改添加页面

batman

2023-03-08 a39031776b70e546098701ec9b92fad171a7a360

 src/views/intellectInspect/inspectIndex2/index.vue

@@ -11,21 +11,22 @@
            <div class="chart-item">
              <div class="chart-tit">
                <span class="tit">异常区域设备统计</span>
                <el-switch
                    v-model="chartStatus"
                    class="ml-2"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                    active-text="区域"
                    inactive-text="设备"
                />
                <div class="filter-part">
                  <el-switch
                      v-model="chartStatus"
                      inline-prompt
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                      active-text="区域"
                      inactive-text="设备"
                  />
                </div>
              </div>
              <dv-active-ring-chart :config="conf" class="chart"/>
              <el-radio-group v-model="period" label="size control" size="small" height="250px" style="display: flex;justify-content: center;margin-top: 10px">
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="month">近30天</el-radio-button>
                <el-radio-button label="season">近90天</el-radio-button>
                <el-radio-button label="year">近一年</el-radio-button>
              <div class="chart" :id="sbtj"></div>
              <el-radio-group v-model="period" size="small">
                <el-radio border label="week">近7天</el-radio>
                <el-radio border label="month">近30天</el-radio>
                <el-radio border label="season">近90天</el-radio>
                <el-radio border label="year">近一年</el-radio>
              </el-radio-group>
            </div>
          </div>
@@ -205,7 +206,6 @@
    classGroupList: Array<classGroup>;
    quotaList: [];
    inspectPointAllList: [];
    conf:{};
    chartStatus:boolean;
    period: string
}
@@ -223,6 +223,7 @@
    setup() {
        const router = useRouter();
        const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
        const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 4,
@@ -302,39 +303,7 @@
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: [],
            conf:{
              radius: '75%',
              activeRadius: '80%',
              lineWidth: 24,
              digitalFlopStyle: {
                fontSize: 25,
                fill: '#000',
              },
              textColor: '#000',
              data: [
                {
                  name: '区域1',
                  value: 98,
                },
                {
                  name: '区域2',
                  value: 150,
                },
                {
                  name: '区域3',
                  value: 62,
                },
                {
                  name: '区域4',
                  value: 54,
                },
                {
                  name: '区域5',
                  value: 54,
                }
              ]
          }
            inspectPointAllList: []
        });
        const inspectRecordDialogRef = ref();
        const inspectListRef = ref();
@@ -352,6 +321,7 @@
            getDayData();
            getDepartmentData();
            initXjLine()
            initSbtj()
        });
        const checkAllRecord =()=>{
          inspectListRef.value.departmentList = state.departmentList
@@ -447,7 +417,60 @@
            myChart.resize();
          });
        }
        const initSbtj =()=>{
          let dom = document.getElementById(sbtj.value);
          let myChart = echarts.init(dom);
          let option: EChartsOption;
          option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 1,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data: [
                  { value: 1048, name: '区域1' },
                  { value: 735, name: '区域2' },
                  { value: 580, name: '区域3' },
                  { value: 484, name: '区域4' },
                  { value: 735, name: '区域5' }
                ]
              }
            ]
          }

          option && myChart.setOption(option);
          window.addEventListener("resize",function (){
            myChart.resize();
          });
        }
        // 分页获取工作时段列表
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
@@ -528,6 +551,7 @@
            Delete,
            Refresh,
            xjLine,
            sbtj,
            Plus,
            router,
            inspectRecordDialogRef,
@@ -564,51 +588,69 @@
    overflow: hidden;

    .topChart{
      height: calc((100% - 40px) / 3);
      width: 100%;
      background: #fff;
      height: calc((100% - 40px) / 3);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding: 20px 20px 90px;
      &:last-of-type{
        margin-bottom: 0;
      }

      .chart-item{
        width: 70%;
        height: 120%;
        padding-right: 10px;
        width: calc(60% - 20px);
        height: 100%;
        margin-right: 20px;
        position: relative;
        background: #fff;
        padding: 20px;

        &:last-of-type{
          width: 30%;
          height: 100%;
          padding-right: 0;
          padding-left: 10px;
          position: relative;
          width: 40%;
          margin-right: 0;
        }

        .chart-tit{
          width: 100%;
          display: flex;
          align-items: center;
          align-items: flex-start;
          justify-content: space-between;
          .tit{
            font-size: 20px;
            font-size: 1.33rem;
            font-weight: bolder;
          }
          :deep(.el-switch__core){
            width: 120px;
          .filter-part{
            display: flex;
            align-items: center;
            justify-content: right;
            width: 20%;
            .el-switch{
              width: 100% !important;
              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
        }
        .chart{
          width: 100%;
          height: 100%;
          height: 88%;
        }
        .el-radio-group{
          width: 100%;
          flex-wrap: nowrap;
          width: 20%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          right: 10px;
          top: 50%;
          transform: translateY(-30%);

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        }
        :deep(.active-ring-info){
          .active-ring-name{
@@ -652,7 +694,7 @@
            font-size: 14px;
            align-items: center;
            background: #ffeb87;
            padding: 4px 15px;
            padding: 4px 10px;
            margin-left: 20px;
            border-radius: 2px;
            border: 1px solid #ffae00;