扬尘Vue

zmc

2023-08-31 013ed9283200da41902835f9fd679df13299d436

扬尘Vue

 src/sfc/DustLineChart.vue

@@ -5,7 +5,10 @@

 -->
 <template>
    <div  id="main" class="line-chart"></div>

       <div  id="main" class="line-chart-exception"></div>

   
  </template>
  
  <script>
@@ -38,8 +41,6 @@
    },
    watch: {
      option(){
        // this.chart.dispose;
        // this.initChart();
        // this.chart.clear
        // 不与之前的option进行合并
        this.chart.setOption(this.option,true)
@@ -48,11 +49,11 @@
        window.addEventListener('resize', this.resizeChart);
      },
    },
    beforeUnmount() {
      if (this.chart) {
        this.chart.dispose;
      }
    },
    // beforeUnmount() {
    //   if (this.chart) {
    //     this.chart.dispose;
    //   }
    // },
    methods: {
      initChart() {
        // 创建echarts实例
@@ -98,19 +99,23 @@
  
      // 跟页面响应式变化
      resizeChart() {
        this.chart.resize();
        this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
      }
    }
  };
  </script>
  
  
  <style>
  .line-chart {
    width:920px;
  <style scoped>
  .line-chart-exception {
    width: 700px;
    height: 250px;
    margin-bottom: 20px;
    min-width: 600px;
    min-width: 500px;
  }
  </style>
  

 src/views/exception/FlightInspection.vue

@@ -15,8 +15,11 @@
import dayjs from 'dayjs';
export default {
  components: {
    ExceptionType,
    InputSearch,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart,
    AreaAndmonitorType
  },
  data() {
@@ -100,8 +103,6 @@
        afterButton: false,
        // 折线图
        lineChart: false,
        // 异常站点名子文本
        text:false
        
      },

@@ -1357,11 +1358,24 @@
          <el-form-item >
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="0"
              @submit-value="(n) => (form.name = n)"
              @submit-site-Nums="(n) => (siteTotal = n)"
            >
            </InputSearch>
          </el-form-item>

          <el-form-item>
            <ExceptionType
              @submit-value="(n) => form.exceptionName = n"
            ></ExceptionType>
          </el-form-item>

          <el-form-item>
            <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
          </el-form-item>

        </div>

        <div class="head-container-search">
@@ -1431,7 +1445,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text" >
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1439,7 +1453,7 @@
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"
                    @subloading="(n)=>loading.text=n"

                    v-for="(item, index) in exception.exception4"
                    :key="item"
                    >{{ item.name }}
@@ -1498,7 +1512,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1565,7 +1579,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1594,7 +1608,7 @@
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">变化趋势异常</span>
                <span class="card-header-text">滑动平均值异常</span>
              </div>

              <div class="card-content-text">
@@ -1632,7 +1646,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1703,7 +1717,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1731,7 +1745,7 @@
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">数据缺失异常</span>
                <span class="card-header-text">断电或断网</span>
              </div>

              <div class="card-content-text">
@@ -1765,7 +1779,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1827,7 +1841,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1958,7 +1972,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom"   v-loading="loading.text">
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1989,6 +2003,241 @@
    </el-col>
  </el-row>

  <el-row>
    <el-col v-show="!isNoData">
      <el-table
        ref="table"
        :data="displayData"
        :height="tableHeight"
        highlight-current-row="true"
        size="default"
        v-loading="loading.tableLoading"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column
          prop="mnCode"
          label="设备编号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="exception"
          label="异常类型"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="region"
          label="区域"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="beginTime"
          label="开始时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="endTime"
          label="结束时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="typename"
          label="场景"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dutyCompany"
          label="运维商"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              class="table-button"
              @click="showDialog(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        ref="h4"
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-col>
  </el-row>

  <el-empty v-show="isNoData" :image-size="200" />

  <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
    <!-- 头 -->
    <template #header>
      <div class="diag-head">
        <div class="diag-head-text">
          <div>
          <span class="diag-head-text1">站点名称：</span
          >{{ tableCurrentRowData.name }}
          </div>

          <div>
          <span class="diag-head-text1">异常类型：</span>
          <span v-if="tableCurrentRowData.exceptionType == '0'"
            >断电或断网</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '1'"
            >数据超低</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '2'">超标</span>
          <span v-else-if="tableCurrentRowData.exceptionType == '3'"
            >数据长时间无波动</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '4'"
            >量级突变异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '5'"
            >临近超标异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '6'"
            >单日超标次数临界异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '7'"
            >滑动平均值异常</span
          >
        </div>

          <div>
            <span class="diag-head-text1">异常时间段：</span
            >{{ tableCurrentRowData.beginTime }} ~
            {{ tableCurrentRowData.endTime }}
          </div>
        </div>

        <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
            :disabled="dialog.isPreCantouch || flag.banTouch"
            @click="getPreviousRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getNextRowData"
            >下条异常</el-button
          >
        </div>
      </div>
    </template>

    <!-- :option="dialog.option" -->

    <!-- 图形 -->
    <DustLineChart
      :option="dialog.option"
      :is-open-dialog="dialogTableVisible"
      v-loading="loading.lineChart"
    ></DustLineChart>

    <!-- 表格 -->
    <div>
      <el-table :data="dialog.historyData" size="default" height="200" border>
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column
          fixed
          prop="name"
          label="站点名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mnCode"
          label="设备编号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dutyCompany"
          label="运维商"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="lst"
          label="采集时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dustValue"
          label="颗粒物浓度(mg/m³)"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <template #footer>
      <el-tag type="success" class="mx-1" effect="dark" round
        ><span
          class="table-line-lable"
          v-show="tableCurrentRowData.exceptionType == '0'"
          >缺失数据：
        </span>
        <span
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4' 
          "
          >异常数据：</span
        >
        <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
        <span
          v-show="
            tableCurrentRowData.exceptionType === '0'
          "
        >
          (逻辑计算)</span
        >
      </el-tag>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
@@ -2086,6 +2335,7 @@
/* 查看详情对话框模块的样式 */
:deep(.el-dialog) {
  // 对话框高度

}
.diag-head {
  // 对话框头部区域
@@ -2113,18 +2363,13 @@
.chart-jump-button {
  // ‘上一条’，‘下一条’ 按钮
  // border: 1px solid #fdc2db;
  min-height: 30px;
  width: 200px;
  float: right;
  // min-height: 30px;
  // width: 200px;
  // float: right;
  display: flex;
  justify-content: right;
}

.line-chart {
  // 异常折线图
  width: 920px;
  height: 300px;
  margin-bottom: 20px;
  min-width: 600px;
}
.mx-1 {
  position: absolute;
  left: 10px;

 src/views/line_graph/DataRiskModel.vue

@@ -4,16 +4,16 @@
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';

// import DustRadarChart from './components/DustRadarChart.vue';
import DustRadarChart from './components/DustRadarChart.vue';
import exceptionApi from '@/api/exceptionApi.js';
import { useWindowSize } from '@vueuse/core';

import LineChart from './components/LineChart.vue'


const DustRadarChart = defineAsyncComponent(() =>
  import('./components/DustRadarChart.vue')
)
// const DustRadarChart = defineAsyncComponent(() =>
//   import('./components/DustRadarChart.vue')
// )

import dayjs from 'dayjs';
export default {
@@ -381,20 +381,20 @@

        <div class="time-text">数据统计时段：{{ begin}} ~ {{ end }}</div>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="16" >
         
        <el-card
              shadow="never"
            >
        <el-row :gutter="20">

          <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
           
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
           
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
            style="width: 200px;min-width: 200px;"
            >
              <template #header><span class="title-16">风险详情</span></template>
              <el-form >
@@ -432,10 +432,11 @@
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
            
              
            style="width:200px; min-width: 200px;"
            >
              <template #header>
                <span class="title-16">风险等级</span>
@@ -459,7 +460,7 @@
            </el-card>
          </el-col>
        </el-row>
      </el-card>



        <el-row :gutter="24">
@@ -586,4 +587,6 @@
  font-size: 16px;
  font-weight: bold;
}
.el-row {
}
</style>

 src/views/line_graph/components/DustRadarChart.vue

@@ -32,6 +32,7 @@
  },
  mounted() {
    this.initRadarChart();
    window.addEventListener('resize', this.resizeChart);
  },
  methods: {
    initRadarChart() {
@@ -45,14 +46,6 @@
        },
        tooltip: {},
        radar: {
          // 轴
          //         axisLine: {
          //           show:true,
          //           lineStyle: {
          //             color: '#F53F3F' ,// 设置边框线的颜色为黑色
          //             type:'dashed',
          //           }
          // },

          // 边框颜色
          splitLine: {
@@ -95,20 +88,37 @@
                  (this.yData[3] / 100).toFixed(4),
                  (this.yData[4] / 100).toFixed(4)
                ],
                // value: [
                //   this.yData[0],
                //   this.yData[1],
                //   this.yData[2],
                //   this.yData[3] ,
                //   this.yData[4] 
                // ],
                name: '异常分析'
              }
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
                
                return params.value*100+'%';
              }
            }
          }
        ]
      };
      this.chart.setOption(option);
    }
    },
        // 跟页面响应式变化
        resizeChart() {
          // this.chart.resize();
          this.$nextTick(() => {
            if (this.chart) {
              this.chart.resize();
            }
          });
      }
  }
};
</script>