HC_YFZX
/
CaiYuanYiTiHua
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏日期组件更新

dianlixunjian
徐景良 2025-01-02 16:19:01 +08:00
parent 52a44f42bb
commit 7c4d8acedb
8 changed files with 506 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored
View File

@ -3,5 +3,8 @@
"src/locales",
"src/locales/lang",
"public/resource/tinymce/langs"
]
],
"files.associations": {
"stdlib.h": "c"
}
}

2
src/components/MapboxMaps/src/config.ts
View File

@ -1,5 +1,5 @@
export enum MapboxConfig {
ACCESS_TOKEN = 'pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q',
ACCESS_TOKEN = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2wwM2E4a2drMDVrZjNrcGRucHIxOHo0cyJ9.0ecG5KGQE6R-SmhxvLvhHg',
// ACCESS_TOKEN = "1234",
TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
// add more config options here

184
src/views/sys/exception/ChartsContainer/left_charts_container.vue
View File

@ -5,19 +5,35 @@
<span>下发图斑</span>
<div class="month">
<div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ currentFilterName['issued'] }}</div>
<div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
<CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />
<div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
<img src="/statistical/down.png" alt="" v-else />
</div>
<div class="filter-item-container" v-if="showFilterOptions['issued']">
<div
v-for="(item, index) in filters"
:key="index"
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
@click="handlerCheckedFilter('issued',item)"
>{{ item.label }}</div
>
<div class="date-select-contaienr">
<div class="year-select-container">
<div class="last-year" @click="handlerMinusYear('issued')" >
<DoubleLeftOutlined/>
</div>
<div class="current-year">
{{yearSelect['issued']}}年
</div>
<div class="next-year" @click="handlerAddYear('issued')">
<DoubleRightOutlined/>
</div>
</div>
<div class="month-select-container">
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
{{ item }}月
</div>
</div>
</div>
</div>
</div>
</div>
@ -39,19 +55,32 @@
<span>核实后新增违法耕地</span>
<div class="month">
<div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions('verify')">{{ currentFilterName['verify'] }}</div>
<div class="filter-name" @click="handlerChangeFilterOptions('verify')">{{ monthSelect['verify'] != 0 ? yearSelect['verify']+"年"+monthSelect['verify']+"月" : '全部' }}</div>
<CloseCircleOutlined v-show="monthSelect['verify'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('verify')" />
<div class="filter-icon" @click="handlerChangeFilterOptions('verify')">
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['verify']" />
<img src="/statistical/down.png" alt="" v-else />
</div>
<div class="filter-item-container" v-if="showFilterOptions['verify']">
<div
v-for="(item, index) in filters"
:key="index"
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
@click="handlerCheckedFilter('verify',item)"
>{{ item.label }}</div
>
<div class="date-select-contaienr">
<div class="year-select-container">
<div class="last-year" @click="handlerMinusYear('verify')" >
<DoubleLeftOutlined/>
</div>
<div class="current-year">
{{yearSelect['verify']}}年
</div>
<div class="next-year" @click="handlerAddYear('verify')">
<DoubleRightOutlined/>
</div>
</div>
<div class="month-select-container">
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('verify',item)">
{{ item }}月
</div>
</div>
</div>
</div>
</div>
</div>
@ -73,19 +102,32 @@
<span>整改后剩余新增违法耕地</span>
<div class="month">
<div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ currentFilterName['rectification'] }}</div>
<div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ monthSelect['rectification'] != 0 ? yearSelect['rectification']+"年"+monthSelect['rectification']+"月" : '全部' }}</div>
<CloseCircleOutlined v-show="monthSelect['rectification'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('rectification')" />
<div class="filter-icon" @click="handlerChangeFilterOptions('rectification')">
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['rectification']" />
<img src="/statistical/down.png" alt="" v-else />
</div>
<div class="filter-item-container" v-if="showFilterOptions['rectification']">
<div
v-for="(item, index) in filters"
:key="index"
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
@click="handlerCheckedFilter('rectification',item)"
>{{ item.label }}</div
>
<div class="date-select-contaienr">
<div class="year-select-container">
<div class="last-year" @click="handlerMinusYear('rectification')" >
<DoubleLeftOutlined/>
</div>
<div class="current-year">
{{yearSelect['rectification']}}年
</div>
<div class="next-year" @click="handlerAddYear('rectification')">
<DoubleRightOutlined/>
</div>
</div>
<div class="month-select-container">
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('rectification',item)">
{{ item }}月
</div>
</div>
</div>
</div>
</div>
</div>
@ -109,6 +151,7 @@ import { monthAllOptions } from '@/utils/global';
import {ref,onMounted} from 'vue';
import * as echarts from 'echarts';
import {getIssuedStatitical,getVerifyStatitical,getRectificationStatitical} from '@/api/tiankongdi/index'
import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
const filters = monthAllOptions();
// const showFilterOptions = ref(false);
@ -134,19 +177,54 @@ function handlerChangeFilterOptions(type) {
showFilterOptions.value[type] = !showFilterOptions.value[type];
}
const yearSelect = ref({
issued:parseInt(new Date().getFullYear()),
verify:parseInt(new Date().getFullYear()),
rectification:parseInt(new Date().getFullYear()),
})
const monthSelect = ref({
issued:parseInt(new Date().getMonth()),
verify:parseInt(new Date().getMonth()),
rectification:parseInt(new Date().getMonth()),
})
function handlerAddYear(type){
yearSelect.value[type] = yearSelect.value[type]+1;
// handlerCheckedFilter(type,1);
}
function handlerMinusYear(type){
yearSelect.value[type] = yearSelect.value[type]-1;
// handlerCheckedFilter(type,0);
}
function handlerMonth(type,item){
monthSelect.value[type] = item;
handlerCheckedFilter(type,item);
}
function handlerGetAllDate(type){
monthSelect.value[type] = 0;
handlerCheckedFilter(type,0);
}
function handlerCheckedFilter(type,item) {
currentFilter.value[type] = item.value;
currentFilterName.value[type] = item.label;
currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
showFilterOptions.value[type] = false;
switch(type){
case "issued":
handlerGetIssuedStatitical(item.value)
handlerGetIssuedStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
break;
case "verify":
handlerGetVerifyStatitical(item.value);
handlerGetVerifyStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
break;
case "rectification":
handlerGetRectificationStatitical(item.value);
handlerGetRectificationStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
break;
}
}
@ -1041,7 +1119,7 @@ window.addEventListener('resize', function () {
.filter-container {
z-index: 10;
position: relative;
width: 104px;
width: 124px;
border-radius: 6px;
height: 29px;
background-image: url('/statistical/select-bg.png');
@ -1057,7 +1135,7 @@ window.addEventListener('resize', function () {
width: 10px;
}
.filter-name {
width: 70px;
width: 80px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
@ -1068,13 +1146,11 @@ window.addEventListener('resize', function () {
margin-left: 4px;
}
.filter-item-container {
width: 100%;
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
left: 0px;
height: 140px;
right: 0px;
overflow: auto;
&::-webkit-scrollbar {
display: none;
@ -1096,6 +1172,48 @@ window.addEventListener('resize', function () {
background: #086953;
color: #fff;
}
.date-select-contaienr{
width:240px;
.year-select-container{
width:100%;
height:40px;
border-bottom:1px solid #0a62c6;
display: flex;
line-height:40px;
.next-year{
width:40px;
height:40px;
flex:1;
text-align: center;
}
.current-year{
flex:auto;
text-align: center;
}
.last-year{
width:40px;
text-align: center;
height:40px;
flex:1;
}
}
.month-select-container{
width:100%;
display:flex;
flex-wrap: wrap;
.month-item{
flex: 1 1 33%;
box-sizing: border-box;
text-align:center;
line-height:40px;
&:hover {
background:#035341;
}
}
}
}
}
}
</style>

2
src/views/sys/exception/Converge/config.ts
View File

@ -1,4 +1,4 @@
export const MAPBOX_TOKEN = "pk.eyJ1IjoiZXZvbGxlcnMiLCJhIjoiY2p5dGV3M2RwMDNlcDNub2E4a2tsejBzcSJ9.qzdwDmfnX-gH68U77Sxzlg";
export const MAPBOX_TOKEN = "pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q";
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";

1
src/views/sys/exception/VideoSupervision.vue
View File

@ -41,7 +41,6 @@
</div>
<!-- monitor -->
<!-- <Monitor :currentMonitor="monitorInfo" @register="registerModal" /> -->
<!-- TCVideo -->
<div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
<div class="close-button" @click="showTCLPlayer = false;">

2
src/views/sys/exception/VideoSupervision/map/src/config.ts
View File

@ -1,5 +1,5 @@
export enum MapboxConfig {
ACCESS_TOKEN = 'pk.eyJ1IjoiZXZvbGxlcnMiLCJhIjoiY2p5dGV3M2RwMDNlcDNub2E4a2tsejBzcSJ9.qzdwDmfnX-gH68U77Sxzlg',
ACCESS_TOKEN = 'pk.eyJ1IjoiYWlvb2lvbyIsImEiOiJjbHdhNHhxbTIwNjBiMmlxdGVpeDdnZzM4In0.vHK5bpeCj4sSK2POMI4y4Q',
// ACCESS_TOKEN = "1234",
TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
// add more config options here

189
src/views/sys/exception/rightDataScreen/circulation/index.vue
View File

@ -6,6 +6,7 @@
<div class="month">
<div class="month-list">
<div
v-if="false"
v-for="item in monthOptions"
:key="item.value"
@click="monthClick(item.value)"
@ -13,6 +14,40 @@
>{{ item.label }}</div
>
</div>
<div class="filter-container-date">
<div class="filter-name" @click="handlerChangeFilterOptionsDate('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
<!-- <CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" /> -->
<div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
<img src="/statistical/up.png" alt="" v-if="showFilterOptionsDate['issued']" />
<img src="/statistical/down.png" alt="" v-else />
</div>
<div class="filter-item-container" v-if="showFilterOptionsDate['issued']">
<div class="date-select-contaienr">
<div class="year-select-container">
<div class="last-year" @click="handlerMinusYear('issued')" >
<DoubleLeftOutlined/>
</div>
<div class="current-year">
{{yearSelect['issued']}}年
</div>
<div class="next-year" @click="handlerAddYear('issued')">
<DoubleRightOutlined/>
</div>
</div>
<div class="month-select-container">
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
{{ item }}月
</div>
</div>
</div>
</div>
</div>
<div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
<div class="filter-icon" @click="handlerChangeFilterOptions">
@ -29,6 +64,7 @@
>
</div>
</div>
</div>
</div>
<div class="circulation-content">
@ -95,7 +131,7 @@
import { onMounted, ref, watch } from 'vue';
import { monthOptions } from '@/utils/global';
import { getAnalysisData } from '@/api/statistical/index';
import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
const props = defineProps({
countyList: Object,
});
@ -122,15 +158,66 @@
showFilterOptions.value = !showFilterOptions.value;
}
const showFilterOptionsDate = ref({
issued:false,
verify:false,
rectification:false,
})
function handlerChangeFilterOptionsDate(type) {
showFilterOptionsDate.value[type] = !showFilterOptionsDate.value[type];
}
const yearSelect = ref({
issued:parseInt(new Date().getFullYear()),
verify:parseInt(new Date().getFullYear()),
rectification:parseInt(new Date().getFullYear()),
})
const monthSelect = ref({
issued:parseInt(new Date().getMonth()+1),
verify:parseInt(new Date().getMonth()+1),
rectification:parseInt(new Date().getMonth()+1),
})
function handlerAddYear(type){
yearSelect.value[type] = yearSelect.value[type]+1;
// handlerCheckedFilter(type,1);
}
function handlerMinusYear(type){
yearSelect.value[type] = yearSelect.value[type]-1;
// handlerCheckedFilter(type,0);
}
function handlerMonth(type,item){
monthSelect.value[type] = item;
handlerCheckedFilterDate(type,item);
}
function handlerGetAllDate(type){
monthSelect.value[type] = 0;
handlerCheckedFilterDate(type,0);
}
function handlerCheckedFilterDate(type,iitem) {
showFilterOptionsDate.value[type]= false;
getCount();
}
function handlerCheckedFilter(item) {
currentFilter.value = item.id;
currentFilterName.value = item.name;
showFilterOptions.value = false;
getCount();
}
function getCount() {
const querys = {
month: monthVal.value,
// month: monthVal.value,
month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
countyid: currentFilter.value,
};
getAnalysisData(querys).then((res) => {
@ -297,4 +384,102 @@
}
}
}
.filter-container-date {
z-index: 10;
position: relative;
width: 124px;
border-radius: 6px;
height: 29px;
background-image: url('/statistical/select-bg.png');
line-height: 29px;
color: #fff;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 10px;
text-indent: 0px;
img {
width: 10px;
}
.filter-name {
width: 80px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 4px;
}
.filter-item-container {
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
right: 0px;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.filter-item {
height: 36px;
text-align: center;
&:hover {
cursor: pointer;
background: #054234;
}
}
.filter-item.active {
background: #054234;
color: #e1ecf8;
}
.filter-item {
background: #086953;
color: #fff;
}
.date-select-contaienr{
width:240px;
.year-select-container{
width:100%;
height:40px;
border-bottom:1px solid #0a62c6;
display: flex;
line-height:40px;
.next-year{
width:40px;
height:40px;
flex:1;
text-align: center;
}
.current-year{
flex:auto;
text-align: center;
}
.last-year{
width:40px;
text-align: center;
height:40px;
flex:1;
}
}
.month-select-container{
width:100%;
display:flex;
flex-wrap: wrap;
.month-item{
flex: 1 1 33%;
box-sizing: border-box;
text-align:center;
line-height:40px;
&:hover {
background:#035341;
}
}
}
}
}
}
</style>

164
src/views/sys/exception/rightDataScreen/columnar/index.vue
View File

@ -4,7 +4,7 @@
<div class="columnar-title">
<div class="title">{{ props.typeName }}</div>
<div class="month">
<div class="filter-container">
<!-- <div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions">{{ currentFilterName }}</div>
<div class="filter-icon" @click="handlerChangeFilterOptions">
<img src="/statistical/up.png" alt="" v-if="showFilterOptions" />
@ -19,6 +19,39 @@
>{{ item.label }}</div
>
</div>
</div> -->
<div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
<CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />
<div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
<img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
<img src="/statistical/down.png" alt="" v-else />
</div>
<div class="filter-item-container" v-if="showFilterOptions['issued']">
<div class="date-select-contaienr">
<div class="year-select-container">
<div class="last-year" @click="handlerMinusYear('issued')" >
<DoubleLeftOutlined/>
</div>
<div class="current-year">
{{yearSelect['issued']}}年
</div>
<div class="next-year" @click="handlerAddYear('issued')">
<DoubleRightOutlined/>
</div>
</div>
<div class="month-select-container">
<div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
{{ item }}月
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -33,23 +66,79 @@
import * as echarts from 'echarts';
import { monthAllOptions } from '@/utils/global';
import { caseOffenceEcharts } from '@/api/statistical/index';
import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'
const filters = monthAllOptions();
const showFilterOptions = ref(false);
const currentFilter = ref(0);
const currentFilterName = ref('全部');
const showFilterOptions = ref({
issued:false,
verify:false,
rectification:false,
})
const currentFilter = ref({
issued:0,
verify:0,
rectification:0,
});
function handlerChangeFilterOptions() {
showFilterOptions.value = !showFilterOptions.value;
const currentFilterName = ref({
issued:"全部",
verify:"全部",
rectification:"全部",
});
function handlerChangeFilterOptions(type) {
showFilterOptions.value[type] = !showFilterOptions.value[type];
}
function handlerCheckedFilter(item) {
currentFilter.value = item.value;
currentFilterName.value = item.label;
showFilterOptions.value = false;
const yearSelect = ref({
issued:parseInt(new Date().getFullYear()),
verify:parseInt(new Date().getFullYear()),
rectification:parseInt(new Date().getFullYear()),
})
const monthSelect = ref({
issued:parseInt(new Date().getMonth()),
verify:parseInt(new Date().getMonth()),
rectification:parseInt(new Date().getMonth()),
})
function handlerAddYear(type){
yearSelect.value[type] = yearSelect.value[type]+1;
// handlerCheckedFilter(type,1);
}
function handlerMinusYear(type){
yearSelect.value[type] = yearSelect.value[type]-1;
// handlerCheckedFilter(type,0);
}
function handlerMonth(type,item){
monthSelect.value[type] = item;
handlerCheckedFilter(type,item);
}
function handlerGetAllDate(type){
monthSelect.value[type] = 0;
handlerCheckedFilter(type,0);
}
// function handlerCheckedFilter(item) {
// currentFilter.value = item.value;
// currentFilterName.value = item.label;
// showFilterOptions.value = false;
// }
function handlerCheckedFilter(type,item) {
currentFilter.value[type] = item.value;
currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
showFilterOptions.value[type] = false;
getData();
}
const props = defineProps({
typeName: {
type: String,
@ -79,7 +168,8 @@
xfAreaList.value = [];
const querys = {
type: props.type,
month: currentFilter.value,
month:monthSelect.value["issued"]>0?yearSelect.value["issued"]+"-"+monthSelect.value["issued"] : null,
// month: yearSelect.value['issued']+"-"+monthSelect.value["issued"],
};
caseOffenceEcharts(querys).then((res) => {
@ -345,7 +435,7 @@
.filter-container {
z-index: 10;
position: relative;
width: 104px;
width: 124px;
border-radius: 6px;
height: 29px;
background-image: url('/statistical/select-bg.png');
@ -356,11 +446,12 @@
align-items: center;
justify-content: center;
margin-left: 10px;
text-indent: 0px;
img {
width: 10px;
}
.filter-name {
width: 70px;
width: 80px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
@ -371,17 +462,16 @@
margin-left: 4px;
}
.filter-item-container {
width: 100%;
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
left: 0px;
height: 140px;
right: 0px;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.filter-item {
height: 36px;
text-align: center;
@ -398,6 +488,46 @@
background: #086953;
color: #fff;
}
.date-select-contaienr{
width:240px;
.year-select-container{
width:100%;
height:40px;
border-bottom:1px solid #0a62c6;
display: flex;
line-height:40px;
.next-year{
width:40px;
height:40px;
flex:1;
text-align: center;
}
.current-year{
flex:auto;
text-align: center;
}
.last-year{
width:40px;
text-align: center;
height:40px;
flex:1;
}
}
.month-select-container{
width:100%;
display:flex;
flex-wrap: wrap;
.month-item{
flex: 1 1 33%;
box-sizing: border-box;
text-align:center;
line-height:40px;
&:hover {
background:#035341;
}
}
}
}
}
}
</style>