ÎļþÃû´Ó src/views/line_graph/SiteComprehensiveRskRanking.vue ÐÞ¸Ä |
| | |
| | | <script> |
| | | import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' |
| | | import exceptionApi from '@/api/exceptionApi.js' |
| | | import { useCommonFunction } from '../../utils/common.js' |
| | | import index from '@/utils/risk_estimate_common_function/index.js' |
| | | import dayjs from 'dayjs' |
| | | import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue' |
| | | import ButtonClick from '@/sfc/ButtonClick.vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import MonthSelect from '@/sfc/MonthSelect.vue'; |
| | | import SiteDetail from '@/views/line_graph/components/SiteDetail.vue' |
| | | import { useLoadingStore } from '@/stores/loadingStore'; |
| | | import { mapStores } from 'pinia'; |
| | | import riskApi from '@/api/risk/riskApi.js'; |
| | | import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'; |
| | | import MonthSelect from '@/sfc/MonthSelect.vue' |
| | | import { useLoadingStore } from '@/stores/loadingStore' |
| | | import { mapStores } from 'pinia' |
| | | import riskApi from '@/api/risk/riskApi.js' |
| | | import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' |
| | | export default { |
| | | components: { |
| | | AreaAndmonitorType, |
| | | ButtonExportExcel, |
| | | ButtonClick, |
| | | MonthSelect, |
| | | SiteDetail, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | endTime: '', |
| | | |
| | | // éæ©çæä»½ |
| | | month:'' |
| | | month: '' |
| | | }, |
| | | bill: { |
| | | min: '', |
| | |
| | | table: [], |
| | | // è¡¨æ ¼é«åº¦ |
| | | tableHeight: 600, |
| | | currentRow:[] |
| | | currentRow: [] |
| | | } |
| | | }, |
| | | setup() { |
| | |
| | | const { exportToExcel } = useCommonFunction() |
| | | return { exportToExcel } |
| | | }, |
| | | computed: { |
| | | ...mapStores(useLoadingStore), |
| | | computed: { |
| | | ...mapStores(useLoadingStore) |
| | | }, |
| | | mounted(){ |
| | | // |
| | | mounted() { |
| | | // |
| | | this.fetch() |
| | | this.calTableHeight() |
| | | }, |
| | | methods: { |
| | | |
| | | /** |
| | | * å°ä¸å½æ åæ¶é´è½¬ä¸ºæå®æ ¼å¼ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | giveMonth(val){ |
| | | giveMonth(val) { |
| | | //å°ä¸å½æ åæ¶é´è½¬ä¸ºæå®æ ¼å¼(该ç»ä»¶è¿åçæ åæ¶é´çæ ¼å¼ï¼æä»¥å¿
é¡»çå è¿ä¸ªå½æ°) |
| | | this.form.month = dayjs(val).format('YYYY-MM-DD'); |
| | | // åæ¶æ´æ°å¼å§åç»ææ¶é´ |
| | | this.form.month = dayjs(val).format('YYYY-MM-DD') |
| | | // åæ¶æ´æ°å¼å§åç»ææ¶é´ |
| | | this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss') |
| | | this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | console.log(this.form.beginTime,this.form.endTime); |
| | | console.log(this.form.beginTime, this.form.endTime) |
| | | }, |
| | | |
| | | }, |
| | | |
| | | // åè½ï¼æ¹åè¡¨æ ¼æä¸ªåå
æ ¼çé¢è² |
| | | tableCellClassName({ row, columnIndex }) { |
| | | // å¹³åå¼ä¸æ»¡è¶³æ åæ¶ |
| | | if (columnIndex == 4) { |
| | | if (row.riskValue >= 0.8) { |
| | | return 'warning-row'; |
| | | return 'warning-row' |
| | | } |
| | | } |
| | | |
| | | |
| | | }, |
| | | // åè½ï¼è¡¨æ ¼é«åº¦æ ¹æ®å
容èªéåº |
| | | calTableHeight() { |
| | |
| | | // å
¶ä¸ä¸ä¸ª40æ¯çåçæ»å¤è¾¹è· |
| | | this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2` |
| | | }, |
| | | |
| | | // ç¹å»é£é©æåæé® |
| | | // fetchData() { |
| | | // this.loading = true |
| | | // this.queryButton = true |
| | | // exceptionApi |
| | | // .analysisdataByType(this.form.month, 'month') |
| | | // .then((response) => { |
| | | // this.chartData = response.data.data |
| | | // this.queryButton = false |
| | | // this.isNoData = false |
| | | |
| | | // if (response.data.data.length == 0) { |
| | | // this.isNoData = true |
| | | // return |
| | | // } |
| | | |
| | | // exceptionApi |
| | | // .exceptiondata1({ |
| | | // siteName: '', |
| | | // beginTime: this.form.beginTime, |
| | | // endTime: this.form.endTime |
| | | // }) |
| | | // .then((res) => { |
| | | // this.isNoData = false |
| | | |
| | | // this.table = index.merge( |
| | | // this.chartData, |
| | | // res.data.data, |
| | | // this.form.beginTime, |
| | | // this.form.endTime |
| | | // ) |
| | | // this.loading = false |
| | | |
| | | // this.$nextTick(()=>{ |
| | | // this.$refs.table.sort('riskValue','descending') |
| | | |
| | | // }) |
| | | |
| | | // }) |
| | | |
| | | // }) |
| | | // }, |
| | | |
| | | // ç¹å»é£é©æåæé® |
| | | fetchData() { |
| | | fetchData() { |
| | | this.loading = true |
| | | this.queryButton = true |
| | | riskApi |
| | | .queryRiskValue('',this.form.month, 'month') |
| | | .then((response) => { |
| | | if (response.data.data.length == 0) { |
| | | this.isNoData = true |
| | | return |
| | | } |
| | | riskApi.queryRiskValue('', this.form.month, 'month').then((response) => { |
| | | if (response.data.data.length == 0) { |
| | | this.isNoData = true |
| | | return |
| | | } |
| | | |
| | | this.table = riskValue.calMonthlyRiskValue(response.data.data) |
| | | this.queryButton = false |
| | | this.isNoData = false |
| | | this.$nextTick(()=>{ |
| | | this.$refs.table.sort('riskValue','descending') |
| | | |
| | | this.table = riskValue.backComprehensiveRiskTableData(response.data.data) |
| | | console.log('表', this.table) |
| | | this.queryButton = false |
| | | this.isNoData = false |
| | | this.loading = false |
| | | |
| | | this.$nextTick(() => { |
| | | this.$refs.table.sort('riskValue', 'descending') |
| | | }) |
| | | }) |
| | | }, |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * åå§å è½½å½æ° |
| | |
| | | this.fetchData() |
| | | // å¼å¸¸æ°æ® |
| | | // this.exceptiondataCount() |
| | | }, |
| | | |
| | | // åå
æ ¼å
容æ¢è¡ |
| | | wrapIndex(index) { |
| | | return index.replace(/\n/g, '<br/>') |
| | | }, |
| | | |
| | | /** |
| | |
| | | ElMessage('æ æ°æ®éè¦å¯¼åº') |
| | | } |
| | | }, |
| | | openDetail(row){ |
| | | const encodedSiteName = encodeURIComponent(row.siteName); |
| | | openDetail(row) { |
| | | const encodedSiteName = encodeURIComponent(row.siteName) |
| | | this.$router.push(`/detail/${encodedSiteName}/${this.form.month}`) |
| | | |
| | | // this.$router.push(`/detail/${row.siteName}/${this.form.month}`) |
| | | } |
| | | } |
| | | } |
| | |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <MonthSelect @submit-value="giveMonth"></MonthSelect> |
| | | <MonthSelect @submit-value="giveMonth"></MonthSelect> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | |
| | | type="index" |
| | | prop="name" |
| | | label="åºå·" |
| | | :index="indexMethod" |
| | | fixed |
| | | align="center" |
| | | width="55" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="siteName" label="ç«ç¹åç§°" align="center" show-overflow-tooltip > |
| | | <el-table-column prop="siteName" label="ç«ç¹åç§°" align="center" show-overflow-tooltip> |
| | | <template #default="{ row }"> |
| | | <el-button type="primary" text class="table-button" @click="openDetail(row)" |
| | | >{{row.siteName}}</el-button |
| | | > |
| | | <el-button type="primary" text class="table-button" @click="openDetail(row)">{{ |
| | | row.siteName |
| | | }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column prop="region" label="åºå" align="center" width="80" show-overflow-tooltip /> |
| | | <el-table-column prop="monitorType" label="æ£æµç±»å" align="center" width="80" show-overflow-tooltip /> |
| | | <el-table-column |
| | | prop="monitorType" |
| | | label="æ£æµç±»å" |
| | | align="center" |
| | | width="80" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="riskValue" |
| | | label="é£é©å¼" |
| | |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="riskGrage" label="é£é©ç级" align="center" width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="riskAdvice" label="ç®¡æ§æªæ½" align="center" show-overflow-tooltip /> |
| | | <el-table-column |
| | | prop="riskGrade" |
| | | label="é£é©ç级" |
| | | align="center" |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="riskAdvice" label="ç®¡æ§æªæ½" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <div v-html="wrapIndex(scope.row.riskAdvice)"></div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="beginTime" |
| | | label="å¼å§æ¥æ" |
| | |
| | | /> |
| | | </el-table> |
| | | <el-empty v-show="isNoData" :image-size="200" /> |
| | | |
| | | |
| | | |
| | | </template> |
| | | |
| | | <style scoped> |
| | |
| | | margin: 10px 0px 0px 10px; |
| | | } |
| | | |
| | | :deep(.el-table__row .warning-row){ |
| | | :deep(.el-table__row .warning-row) { |
| | | background-color: red; |
| | | /* color: rgb(241, 236, 236); */ |
| | | } |
| | |
| | | text-decoration: underline; |
| | | border-radius: 0px; |
| | | } |
| | | |
| | | .el-table { |
| | | color: #333333; |
| | | } |
| | | </style> |