This commit is contained in:
2026-01-29 17:45:42 +08:00
parent 62db6672f6
commit 39cf4b27f5
5 changed files with 54 additions and 23 deletions

View File

@ -39,7 +39,7 @@ const formSearch = ref({})
const changeRadio = (val) =>{
switch(val){
case 0: //日
formSearch.value.dateRange = [timeValidate(),timeValidate()]
formSearch.value.dateRange = [timeValidate(null,'ymd'),timeValidate(null,'ymd')]
break;
case 1: //月
formSearch.value.dateRange = timeSlotChange('本月')
@ -69,7 +69,7 @@ const handleSubmit = () => {
// 重置
const resetForm = () => {
radioTime.value = '';
formSearch.value = { ssbmdm: '', dateRange: null }
formSearch.value = {}
emit('change', formSearch.value)
}
@ -97,4 +97,13 @@ const resetForm = () => {
}
}
}
</style>
</style>
<style lang="scss">
.top-head {
.el-date-editor .el-range-separator{
color: #333 !important;
}
}
</style>

View File

@ -21,7 +21,7 @@ import XxhjCount from './xxhjCount.vue'
import QygktjCount from './qygktjCount.vue'
import { ref } from "vue";
const butList=ref(["情报统计分析","预警统计",'全域管控统计','信息汇聚统计'])
const qh = ref('情报统计分析')
const qh = ref('预警统计')
</script>
<style lang="scss" scoped>

View File

@ -16,11 +16,17 @@
<div class="right">
<div class="stat-row">
<span class="stat-label">环比</span>
<span class="stat-val up">{{ item.hb }} <el-icon><CaretTop /></el-icon></span>
<span class="stat-val up">
{{ item.hbsl }}
<img class="ml4" src="@/assets/images/icon-up.png" alt="">
</span>
</div>
<div class="stat-row">
<span class="stat-label">同比</span>
<span class="stat-val down">{{ item.tb }} <el-icon><CaretBottom /></el-icon></span>
<span class="stat-val down">
{{ item.tbsl }}
<img class="ml4" src="@/assets/images/icon-down.png" alt="">
</span>
</div>
</div>
</li>
@ -63,6 +69,7 @@
</template>
<script setup>
import { qcckGet } from '@/api/qcckApi'
import HeadLayout from './components/headLayout.vue'
import BqyjslCount from './components/bqyjslCount.vue'
import CzztCount from './components/czztCount.vue'
@ -76,10 +83,10 @@ const formSearch = ref({}) //查询条件
const activeTab = ref('县局')
const ketcount = ref(0)
const countList = ref([
{ label: '红色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-red.png') },
{ label: '橙色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-orange.png') },
{ label: '黄色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-yellow.png') },
{ label: '蓝色预警', value: '123,4', hb: '106,3', tb: '106,3', icon: require('@/assets/images/icon-blue.png') },
{ zddm:'01',label: '红色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-red.png') },
{ zddm:'02',label: '橙色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-orange.png') },
{ zddm:'03',label: '黄色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-yellow.png') },
{ zddm:'04',label: '蓝色预警', value: '123,4', hbsl: '106,3', tbsl: '106,3', icon: require('@/assets/images/icon-blue.png') },
])
const obj = reactive({
bqyjslList: [
@ -114,12 +121,37 @@ const obj = reactive({
})
onMounted(()=>{
tabHeightFn()
tabHeightFn();
init()
})
// 筛选
const handleChange = (val) => {
formSearch.value = val
formSearch.value = {...val }
formSearch.value.startTime = val.dateRange ? val.dateRange[0] : ''
formSearch.value.endTime = val.dateRange ? val.dateRange[1] : ''
init()
}
const init = () =>{
handle_yjfl()
}
// 预警分类统计 同比、环比
const handle_yjfl = async () =>{
let params = {...formSearch.value}
delete params.dateRange;
// let res = await qcckGet(params,'/mosty-gsxt/yjxx/tj/yjfltj');
// let list = res || [];
// countList.value = countList.value.map(item => {
// let obj = list.find(i => i.zddm === item.zddm)
// if(obj){
// item.value = obj.value || '0'
// item.hb = obj.hbsl || '0'
// item.tb = obj.tbsl || '0'
// }
// return item
// })
}
// 表格高度计算
@ -206,21 +238,11 @@ const tabHeightFn = () => {
font-weight: bold;
display: flex;
align-items: center;
&.up {
color: #F56C6C;
}
&.down {
color: #67C23A; // Green for down in Chinese stocks usually, but commonly Red is up/bad, Green is down/good or vice versa. Image shows Red Up, Green Down.
// Image: Top one (red arrow) is Red. Bottom one (green arrow) is Green.
// 106,3 Red Arrow Up.
// 106,3 Green Arrow Down.
color: #00CC99; // Using a teal/green color often used in designs. Or #67C23A (Element Success).
// Let's use #00C853 or similar.
}
.el-icon {
margin-left: 2px;
color: #00CC99;
}
}
}