Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
1f38d70f03
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 342 B |
|
|
@ -1,20 +1,46 @@
|
|||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
GetTrendData = '/api/DroneScreenDisplay/GetTrendData',
|
||||
GetTuBanSummary = '/api/DroneScreenDisplay/GetTuBanSummary',
|
||||
GetTotalAndAreaByType = '/api/DroneScreenDisplay/GetTotalAndAreaByType',
|
||||
GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea'
|
||||
GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea',
|
||||
GetAnalysisData = '/api/DroneScreenDisplay/GetAnalysisData',
|
||||
CaseOffenceEcharts = '/api/DroneScreenDisplay/CaseOffenceEcharts',
|
||||
GetTrendEchartsData = '/api/DroneScreenDisplay/GetTrendEchartsData',
|
||||
}
|
||||
export function GetTrendData(params:{countyid:string;type:string;datatype:number;begindate?:string;enddate?:string;}) {
|
||||
export function GetTrendData(params: {
|
||||
countyid: string;
|
||||
type: string;
|
||||
datatype: number;
|
||||
begindate?: string;
|
||||
enddate?: string;
|
||||
}) {
|
||||
// datatype 0按天统计，1按月统计
|
||||
return defHttp.get({ url: Api.GetTrendData, params });
|
||||
}
|
||||
export function GetTuBanSummary(params:{countyid:string;type:string;}) {
|
||||
export function GetTuBanSummary(params: { countyid: string; type: string }) {
|
||||
return defHttp.get({ url: Api.GetTuBanSummary, params });
|
||||
}
|
||||
export function GetTotalAndAreaByType(params:{countyid:string;type:string;}) {
|
||||
export function GetTotalAndAreaByType(params: { countyid: string; type: string }) {
|
||||
return defHttp.get({ url: Api.GetTotalAndAreaByType, params });
|
||||
}
|
||||
export function GetTotalAndArea(params:{countyid:string;type:string;}) {
|
||||
export function GetTotalAndArea(params: { countyid: string; type: string }) {
|
||||
return defHttp.get({ url: Api.GetTotalAndArea, params });
|
||||
}
|
||||
}
|
||||
export function getAnalysisData(params: { countyid: string; month: number }) {
|
||||
return defHttp.get({ url: Api.GetAnalysisData, params });
|
||||
}
|
||||
|
||||
export function caseOffenceEcharts(params: { type: number; month: number }) {
|
||||
return defHttp.get({ url: Api.CaseOffenceEcharts, params });
|
||||
}
|
||||
export function getTrendEchartsData(params: {
|
||||
type: number;
|
||||
month: number;
|
||||
datatype: number;
|
||||
begindate: string;
|
||||
enddate: string;
|
||||
}) {
|
||||
return defHttp.get({ url: Api.GetTrendEchartsData, params });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -355,6 +355,7 @@
|
|||
}
|
||||
:deep(.ant-image){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#process-form-container{
|
||||
width:50%;height:500px;background:red;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export const SchemeRoute: AppRouteRecordRaw = {
|
|||
export const SubjectRoute: AppRouteRecordRaw = {
|
||||
path: '/subject',
|
||||
name: 'subject',
|
||||
component: () => import('@/views/subject/index.vue'),
|
||||
component: () => import('@/views/subject/subject/index.vue'),
|
||||
meta: {
|
||||
title: '主题',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -138,3 +138,31 @@ export const nowStatusOptions = [
|
|||
{ label: '县级审核', value: '县级审核' },
|
||||
{ label: '已归档', value: '已归档' },
|
||||
];
|
||||
//获取近7个月的时间
|
||||
export const getMonth = () => {
|
||||
//创建现在的时间
|
||||
const data = new Date();
|
||||
//获取年
|
||||
let year = data.getFullYear();
|
||||
//获取月
|
||||
let mon = data.getMonth() + 1;
|
||||
let arry: any = [];
|
||||
for (let i = 0; i < 6; i++) {
|
||||
if (mon <= 0) {
|
||||
year = year - 1;
|
||||
mon = mon + 12;
|
||||
}
|
||||
arry.push({
|
||||
label: `${mon}月`,
|
||||
value: mon,
|
||||
});
|
||||
mon = mon - 1;
|
||||
}
|
||||
return arry.reverse();
|
||||
};
|
||||
export const monthOptions = getMonth();
|
||||
export const monthAllOptions = () => {
|
||||
let arr: any = getMonth();
|
||||
arr.reverse().unshift({ label: '全部', value: 0 });
|
||||
return arr;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@
|
|||
</template>
|
||||
<!-- 下发图斑·面积 -->
|
||||
<template v-if="column.key === 'xfmj'">
|
||||
<a @click="handlePreViewData(column, record, 1)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 1)"> -->
|
||||
{{ record.xfmj == 0 ? 0 : record.xfmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 下发图斑·耕地面积 -->
|
||||
<template v-if="column.key === 'xfgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 1)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 1)"> -->
|
||||
{{ record.xfgdmj == 0 ? 0 : record.xfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 合法·宗数 -->
|
||||
|
|
@ -35,15 +35,15 @@
|
|||
</template>
|
||||
<!-- 合法·面积 -->
|
||||
<template v-if="column.key === 'hfmj'">
|
||||
<a @click="handlePreViewData(column, record, 2)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 2)"> -->
|
||||
{{ record.hfmj == 0 ? 0 : record.hfmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 合法·耕地面积 -->
|
||||
<template v-if="column.key === 'hfgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 2)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 2)"> -->
|
||||
{{ record.hfgdmj == 0 ? 0 : record.hfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 违法·小计·宗数 -->
|
||||
|
|
@ -52,15 +52,15 @@
|
|||
</template>
|
||||
<!-- 违法·小计·面积 -->
|
||||
<template v-if="column.key === 'wfmj'">
|
||||
<a @click="handlePreViewData(column, record, 3)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 3)"> -->
|
||||
{{ record.wfmj == 0 ? 0 : record.wfmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 违法·小计·耕地面积 -->
|
||||
<template v-if="column.key === 'wfgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 3)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 3)"> -->
|
||||
{{ record.wfgdmj == 0 ? 0 : record.wfgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 违法·非农化·宗数 -->
|
||||
|
|
@ -69,15 +69,15 @@
|
|||
</template>
|
||||
<!-- 违法·非农化·面积 -->
|
||||
<template v-if="column.key === 'fnhmj'">
|
||||
<a @click="handlePreViewData(column, record, 10)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 10)"> -->
|
||||
{{ record.fnhmj == 0 ? 0 : record.fnhmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 违法·非农化·耕地面积 -->
|
||||
<template v-if="column.key === 'fnhgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 10)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 10)"> -->
|
||||
{{ record.fnhgdmj == 0 ? 0 : record.fnhgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 违法·非粮化·宗数 -->
|
||||
|
|
@ -86,15 +86,15 @@
|
|||
</template>
|
||||
<!-- 违法·非粮化·面积 -->
|
||||
<template v-if="column.key === 'flhmj'">
|
||||
<a @click="handlePreViewData(column, record, 5)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 5)"> -->
|
||||
{{ record.flhmj == 0 ? 0 : record.flhmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 违法·非粮化·耕地面积 -->
|
||||
<template v-if="column.key === 'flhgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 5)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 5)"> -->
|
||||
{{ record.flhgdmj == 0 ? 0 : record.flhgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 其他·宗数 -->
|
||||
|
|
@ -103,15 +103,15 @@
|
|||
</template>
|
||||
<!-- 其他·面积 -->
|
||||
<template v-if="column.key === 'qtmj'">
|
||||
<a @click="handlePreViewData(column, record, 4)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 4)"> -->
|
||||
{{ record.qtmj == 0 ? 0 : record.qtmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 其他·耕地面积 -->
|
||||
<template v-if="column.key === 'qtgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 4)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 4)"> -->
|
||||
{{ record.qtgdmj == 0 ? 0 : record.qtgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 整改情况·补办手续·宗数 -->
|
||||
|
|
@ -120,15 +120,15 @@
|
|||
</template>
|
||||
<!-- 整改情况·补办手续·面积 -->
|
||||
<template v-if="column.key === 'bbsxmj'">
|
||||
<a @click="handlePreViewData(column, record, 6)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 6)"> -->
|
||||
{{ record.bbsxmj == 0 ? 0 : record.bbsxmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 整改情况·补办手续·耕地面积 -->
|
||||
<template v-if="column.key === 'bbsxgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 6)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 6)"> -->
|
||||
{{ record.bbsxgdmj == 0 ? 0 : record.bbsxgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 整改情况·拆除复耕·宗数 -->
|
||||
<template v-if="column.key === 'cczs'">
|
||||
|
|
@ -136,15 +136,15 @@
|
|||
</template>
|
||||
<!-- 整改情况·拆除复耕·面积 -->
|
||||
<template v-if="column.key === 'ccmj'">
|
||||
<a @click="handlePreViewData(column, record, 7)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 7)"> -->
|
||||
{{ record.ccmj == 0 ? 0 : record.ccmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 整改情况·拆除复耕·耕地面积 -->
|
||||
<template v-if="column.key === 'ccgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 7)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 7)"> -->
|
||||
{{ record.ccgdmj == 0 ? 0 : record.ccgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
|
||||
<!-- 新增违法占用耕地情况·核实后新增违法耕地·宗数 -->
|
||||
|
|
@ -153,9 +153,9 @@
|
|||
</template>
|
||||
<!-- 新增违法占用耕地情况·核实后新增违法耕地·耕地面积 -->
|
||||
<template v-if="column.key === 'hshxzwfgdgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 8)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 8)"> -->
|
||||
{{ record.hshxzwfgdgdmj == 0 ? 0 : record.hshxzwfgdgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·宗数 -->
|
||||
<template v-if="column.key === 'zghsywfgdzs'">
|
||||
|
|
@ -163,9 +163,9 @@
|
|||
</template>
|
||||
<!-- 新增违法占用耕地情况·整改后剩余违法耕地·耕地面积 -->
|
||||
<template v-if="column.key === 'zghsywfgdgdmj'">
|
||||
<a @click="handlePreViewData(column, record, 9)">
|
||||
<!-- <a @click="handlePreViewData(column, record, 9)"> -->
|
||||
{{ record.zghsywfgdgdmj == 0 ? 0 : record.zghsywfgdgdmj.toFixed(2) }}
|
||||
</a>
|
||||
<!-- </a> -->
|
||||
</template>
|
||||
<!-- 面积只取小数点后两位 -->
|
||||
<!-- <template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
|
||||
|
|
|
|||
|
|
@ -534,13 +534,14 @@
|
|||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 330px;
|
||||
max-height: 200px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
.detail-container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.detail-container::after {
|
||||
content: '';
|
||||
|
|
@ -551,12 +552,13 @@
|
|||
}
|
||||
.map-container {
|
||||
float: left;
|
||||
width: 50vw;
|
||||
width: 45vw;
|
||||
height: calc(100vh - 100px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-left){
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -901,11 +901,12 @@
|
|||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 330px;
|
||||
max-height: 200px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-right){
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -39,9 +39,10 @@
|
|||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'enabledMark'">
|
||||
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||
<a-tag v-else color="error">停用</a-tag>
|
||||
<template v-if="column.key == 'overlayList'">
|
||||
<div v-for="tag in record.overlayList" :key="tag">
|
||||
<a-tag>{{ tag }}</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
|
|
|||
|
|
@ -2,61 +2,51 @@ export const columns = [
|
|||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
resizable: true,
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '图层',
|
||||
dataIndex: 'layer',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数据表',
|
||||
dataIndex: 'tableName',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '叠加图层',
|
||||
dataIndex: 'overlayList',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '是否分类',
|
||||
dataIndex: 'isClass',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '分类字段',
|
||||
dataIndex: 'classField',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'className',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '选择面积计算字段',
|
||||
dataIndex: 'areaField',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '是否合计',
|
||||
dataIndex: 'isSum',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div>
|
||||
<BasicTable
|
||||
class="w-4/4 xl:w-5/5"
|
||||
@register="registerTable"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</template>
|
||||
</BasicTable>
|
||||
<Modal @register="registerModal" @submit="submit" />
|
||||
</PageWrapper>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
:title="getTitle"
|
||||
:useWrapper="true"
|
||||
:width="900"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<div class="box-container">
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
// 是否是标准化
|
||||
const isBasic = ref(false);
|
||||
const tableName: any = ref('');
|
||||
const getTitle: any = ref('');
|
||||
const tableColumns: any = ref([]);
|
||||
const codesTypeArr: any = ref([
|
||||
{ label: 'varchar', value: 'varchar' },
|
||||
|
|
@ -118,12 +120,14 @@
|
|||
|
||||
// 新增
|
||||
if (!data.record) {
|
||||
getTitle.value = '新增';
|
||||
tableName.value = null;
|
||||
setTableData([]);
|
||||
handleAdd();
|
||||
reload();
|
||||
} else {
|
||||
// 编辑、详情
|
||||
getTitle.value = '详情';
|
||||
tableName.value = data.record.tableName;
|
||||
const lines = data.record.columnJson.split(':');
|
||||
let arr: any = [];
|
||||
|
|
@ -223,13 +227,13 @@
|
|||
}
|
||||
// 提交
|
||||
async function handleOk() {
|
||||
// 删除两端空格、制表符和换行符
|
||||
tableName.value = tableName.value.trim();
|
||||
// 检测：表名
|
||||
if (!tableName.value) {
|
||||
createMessage.warn('表名是必填项!');
|
||||
return;
|
||||
}
|
||||
// 删除两端空格、制表符和换行符
|
||||
tableName.value = tableName.value.trim();
|
||||
// 检测：数据库表名的命名规则
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName.value)) {
|
||||
createMessage.warn('表名不符合数据库表名的命名规则!');
|
||||
|
|
@ -361,6 +365,7 @@
|
|||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCodesTypeArr();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -534,13 +534,14 @@
|
|||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 330px;
|
||||
max-height: 200px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
.detail-container {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.detail-container::after {
|
||||
content: '';
|
||||
|
|
@ -551,12 +552,13 @@
|
|||
}
|
||||
.map-container {
|
||||
float: left;
|
||||
width: 50vw;
|
||||
width: 45vw;
|
||||
height: calc(100vh - 100px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-left){
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -901,11 +901,12 @@
|
|||
<style lang="scss" scoped>
|
||||
.image-div {
|
||||
width: 330px;
|
||||
max-height: 200px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
:deep(.ant-image){
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(.ant-image-preview-switch-right){
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,15 @@
|
|||
{{ t('sys.subject.header_title') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subject_header_currentTime">
|
||||
<span class="subject_header_currentTime_date">
|
||||
{{ currentTime_date }}
|
||||
</span>
|
||||
<div class="subject_header_currentTime_div">
|
||||
<div> {{ currentTime_week }} </div>
|
||||
<div> {{ currentTime_year }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject_header_adminAndLogout">
|
||||
<img src="/subject/subject_header_admin.png" />
|
||||
<span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
|
||||
|
|
@ -187,12 +196,13 @@
|
|||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getSpecialData } from '@/api/demo/system';
|
||||
import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue';
|
||||
import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const {
|
||||
VITE_GLOB_API_URL,
|
||||
|
|
@ -356,10 +366,29 @@
|
|||
return viewportWidth.value / referenceWidth;
|
||||
});
|
||||
|
||||
// 时间和天气
|
||||
const currentTime_year = ref(dayjs().locale('zh-cn').format('YYYY年M月D日'));
|
||||
const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
|
||||
const currentTime_date = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
|
||||
|
||||
function updateTime() {
|
||||
currentTime_year.value = dayjs().locale('zh-cn').format('YYYY年M月D日');
|
||||
currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
|
||||
currentTime_date.value = dayjs().locale('zh-cn').format('HH:mm:ss');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize(); // 初始化视口尺寸
|
||||
updateTime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -398,6 +427,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
&_currentTime {
|
||||
position: absolute;
|
||||
left: 87px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&_date {
|
||||
font-family: DIN;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 26px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&_div {
|
||||
position: relative;
|
||||
top: -7px;
|
||||
width: 100px;
|
||||
height: 12px;
|
||||
font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
display: block;
|
||||
|
||||
div {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_adminAndLogout {
|
||||
position: absolute;
|
||||
right: 87px;
|
||||
|
|
@ -0,0 +1,725 @@
|
|||
<template>
|
||||
<div class="subject">
|
||||
<div class="subject_header">
|
||||
<img
|
||||
class="subject_header_img"
|
||||
src="/subject/subject_header.png"
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: `${82 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="subject_header_title"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${-85 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${42 * bi}px`,
|
||||
height: `${82 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="/subject/subject_logo.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${4 * bi}px`,
|
||||
width: `${78 * bi}px`,
|
||||
height: `${70 * bi}px`,
|
||||
marginRight: `${5 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
{{ t('sys.subject.header_title') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subject_header_currentTime">
|
||||
<span class="subject_header_currentTime_date">
|
||||
{{ currentTime_date }}
|
||||
</span>
|
||||
<div class="subject_header_currentTime_div">
|
||||
<div> {{ currentTime_week }} </div>
|
||||
<div> {{ currentTime_year }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject_header_adminAndLogout">
|
||||
<img src="/subject/subject_header_admin.png" />
|
||||
<span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
|
||||
|
||||
<img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
|
||||
<span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject_box">
|
||||
<div
|
||||
class="subject_box_btn"
|
||||
ref="contentArea"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${getBoxBtnAttribute()[0]}px`,
|
||||
left: `${getBoxBtnAttribute()[1] * bi}px`,
|
||||
height: `${getBoxBtnAttribute()[2] * bi}px`,
|
||||
width: `${getBoxBtnAttribute()[3] * bi}px`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
class="subject_box_btn_div"
|
||||
@click="getHome(item)"
|
||||
:style="{
|
||||
marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
|
||||
marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
|
||||
marginBottom: `${20 * bi}px`,
|
||||
height: `${325 * bi}px`,
|
||||
width: `${225 * bi}px`,
|
||||
'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
|
||||
'background-size': `${100}%`,
|
||||
'background-repeat': 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
class="subject_box_btn_div_url"
|
||||
:src="getImageUrl(item.imgUrl)"
|
||||
:style="{
|
||||
left: `${21 * bi}px`,
|
||||
width: `${191 * bi}px`,
|
||||
height: `${191 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="subject_box_btn_div_span"
|
||||
v-html="renderedTitle(item.title)"
|
||||
:style="{
|
||||
fontSize: `${fotSize * bi}px`,
|
||||
left: `${22 * bi}px`,
|
||||
width: `${190 * bi}px`,
|
||||
height: `${(fotSize * spanWrap + 7) * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
class="subject_box_btn_div_line"
|
||||
src="/subject/subject_line.png"
|
||||
:style="{
|
||||
top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
|
||||
left: `${52 * bi}px`,
|
||||
width: `${128 * bi}px`,
|
||||
height: `${7 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc1"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc2"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc3"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc4"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="subject_box_overflow">
|
||||
<Icon
|
||||
style="font-size: 31px"
|
||||
class="subject_box_overflow_icon1"
|
||||
icon="ant-design:up-outlined"
|
||||
@click="scrollToElement('top')"
|
||||
/>
|
||||
<Icon
|
||||
style="font-size: 31px"
|
||||
class="subject_box_overflow_icon2"
|
||||
icon="ant-design:down-outlined"
|
||||
@click="scrollToElement('bottom')"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="subject_bottom">
|
||||
<!-- <span>
|
||||
{{ t('sys.subject.bottom_copyright') }}
|
||||
|
|
||||
{{ t('sys.subject.bottom_support') }}
|
||||
|
|
||||
{{ t('sys.subject.bottom_version') }}
|
||||
</span> -->
|
||||
<span>
|
||||
{{
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
? VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
: t('sys.subject.bottom_copyright')
|
||||
}}
|
||||
|
|
||||
{{
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
? VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
: t('sys.subject.bottom_support')
|
||||
}}
|
||||
|
|
||||
{{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getSpecialData } from '@/api/demo/system';
|
||||
import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const {
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT,
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT,
|
||||
VITE_GLOB_APP_VERSIONS,
|
||||
} = getAppEnvConfig();
|
||||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||||
const { t } = useI18n();
|
||||
|
||||
const loginUser: any = ref('');
|
||||
const contentArea = ref<HTMLElement | null>(null);
|
||||
const list: any = ref([]);
|
||||
const userStore = useUserStore();
|
||||
const spanWrap = ref(1);
|
||||
|
||||
async function getData() {
|
||||
const res: any = await getSpecialData();
|
||||
// 最大标题文字行数
|
||||
res?.forEach((item) => {
|
||||
if (Math.ceil(item.title.length / 6) > spanWrap.value) {
|
||||
spanWrap.value = Math.ceil(item.title.length / 6);
|
||||
}
|
||||
});
|
||||
list.value = res;
|
||||
loginUser.value = localStorage.getItem('fireUserLoginName');
|
||||
// cardRotationLoop();
|
||||
}
|
||||
// 旋转动画
|
||||
async function cardRotationLoop() {
|
||||
nextTick(() => {
|
||||
list.value.forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
const element: any = document.getElementById(item.id);
|
||||
element.classList.remove('cardRotationState');
|
||||
element.classList.add('cardRotation');
|
||||
setTimeout(() => {
|
||||
element.classList.add('cardRotationState');
|
||||
}, 5000);
|
||||
if (index == list.value.length - 1) {
|
||||
setTimeout(() => {
|
||||
cardRotationLoop();
|
||||
}, 8000);
|
||||
}
|
||||
}, index * 8000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 按键控制滚动条
|
||||
const scrollToElement = async (type) => {
|
||||
if (contentArea.value) {
|
||||
if (type == 'top' && contentArea.value.scrollTop != 0) {
|
||||
contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
|
||||
}
|
||||
if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
|
||||
contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 跳转
|
||||
async function getHome(item) {
|
||||
console.log(window.innerWidth);
|
||||
if (!item.isDevelop) {
|
||||
message.warn(item.title + '系统暂未开放！');
|
||||
return;
|
||||
}
|
||||
if (item.isExternal) {
|
||||
if (item.linkOrApi) {
|
||||
window.location.href = item.linkOrApi;
|
||||
} else {
|
||||
message.warn('系统外部链接未配置！');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!item.linkOrApi) {
|
||||
item.linkOrApi = PageEnum.WELCOME_HOME;
|
||||
}
|
||||
userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
|
||||
}
|
||||
}
|
||||
// 获取图片地址
|
||||
function getImageUrl(imgUrl) {
|
||||
if (imgUrl) {
|
||||
return VITE_GLOB_API_URL_VAR.value + imgUrl;
|
||||
} else {
|
||||
return '/subject/subject_default.png';
|
||||
}
|
||||
}
|
||||
// 标题换行
|
||||
function renderedTitle(name) {
|
||||
return `${name.replace(/\s/g, '<br />')}`;
|
||||
}
|
||||
// 标题的行数
|
||||
function getWrap(name) {
|
||||
return Math.ceil(name.length / 6);
|
||||
}
|
||||
// 退出系统
|
||||
function handleLoginOut() {
|
||||
userStore.confirmLoginOut();
|
||||
}
|
||||
// 分辨率
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
const viewportHeight = ref(window.innerHeight);
|
||||
const referenceWidth = 1920;
|
||||
const referenceHeight = 1080;
|
||||
const fotSize = ref(28);
|
||||
|
||||
// 计算不同数量的选项卡的布局属性
|
||||
function getBoxBtnAttribute() {
|
||||
let box: any = [];
|
||||
box[0] = 80;
|
||||
box[1] = 85;
|
||||
box[2] = 700;
|
||||
box[3] = 1750;
|
||||
box[4] = 12;
|
||||
// if (list.value.length <= 7) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 12;
|
||||
// }
|
||||
// if (list.value.length == 8) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 185;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1550;
|
||||
// box[4] = 50;
|
||||
// }
|
||||
// if (list.value.length == 9 || list.value.length == 10) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 135;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1650;
|
||||
// box[4] = 50;
|
||||
// }
|
||||
// if (list.value.length == 11 || list.value.length == 12) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 30;
|
||||
// }
|
||||
// if (list.value.length == 13 || list.value.length == 14) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 12;
|
||||
// }
|
||||
return box;
|
||||
}
|
||||
|
||||
const updateWindowSize = () => {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
viewportHeight.value = window.innerHeight;
|
||||
};
|
||||
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth;
|
||||
});
|
||||
|
||||
// 时间和天气
|
||||
const currentTime_year = ref(dayjs().locale('zh-cn').format('YYYY年M月D日'));
|
||||
const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
|
||||
const currentTime_date = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
|
||||
|
||||
function updateTime() {
|
||||
currentTime_year.value = dayjs().locale('zh-cn').format('YYYY年M月D日');
|
||||
currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
|
||||
currentTime_date.value = dayjs().locale('zh-cn').format('HH:mm:ss');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize(); // 初始化视口尺寸
|
||||
updateTime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.subject {
|
||||
background-image: url('/subject/subject_bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
&_header {
|
||||
&_title {
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-family: 068-SSZhengYaTi;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-weight: 900 !important;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&_currentTime {
|
||||
position: absolute;
|
||||
left: 87px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&_date {
|
||||
font-family: DIN;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 26px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&_div {
|
||||
position: relative;
|
||||
top: -7px;
|
||||
width: 100px;
|
||||
height: 12px;
|
||||
font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
display: block;
|
||||
|
||||
div {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_adminAndLogout {
|
||||
position: absolute;
|
||||
right: 87px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
height: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #006cff;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_box {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: -82px;
|
||||
|
||||
&_btn {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
// 隐藏滚动条
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
&_div {
|
||||
// 弹性子元素（flex item）的弹性行为
|
||||
flex: 0 0 auto;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定义旋转
|
||||
// 设置透视距离
|
||||
perspective: 1000px;
|
||||
// 添加过渡效果
|
||||
transition: transform 1s;
|
||||
// 定义旋转动画
|
||||
// animation: cardRotation 5s linear infinite;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(150%);
|
||||
cursor: pointer;
|
||||
box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
// 定义旋转
|
||||
// 暂停动画
|
||||
animation-play-state: paused;
|
||||
// 过渡效果
|
||||
transition: transform 1s ease;
|
||||
// 立即回到正面
|
||||
transform: rotateY(0deg) !important;
|
||||
}
|
||||
|
||||
&_bg {
|
||||
height: 324px;
|
||||
}
|
||||
|
||||
&_url {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 11px;
|
||||
width: 191px;
|
||||
height: 191px;
|
||||
}
|
||||
|
||||
&_span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top: -300px;
|
||||
left: 12px;
|
||||
width: 190px;
|
||||
// 字体样式
|
||||
font-size: 28px;
|
||||
|
||||
font-family: 'Microsoft YaHei';
|
||||
color: #ffffff;
|
||||
background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
&_line {
|
||||
position: relative;
|
||||
left: 42px;
|
||||
width: 128px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &_overflow {
|
||||
// position: absolute;
|
||||
// top: 220px;
|
||||
// right: -110px;
|
||||
// height: 300px;
|
||||
// width: 110px;
|
||||
|
||||
// &_icon1 {
|
||||
// color: #006cff;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// top: 100px;
|
||||
// right: 85px;
|
||||
// }
|
||||
|
||||
// &_icon2 {
|
||||
// color: #006cff;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// top: 200px;
|
||||
// right: 115px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
&_bottom {
|
||||
span {
|
||||
width: 902px;
|
||||
height: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #5eb2ff;
|
||||
}
|
||||
position: absolute;
|
||||
top: 95%;
|
||||
left: calc(50% - 902px / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 四条旋转的弧线
|
||||
.circle {
|
||||
transform-origin: 50% 50%;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 3px solid #276fff;
|
||||
}
|
||||
|
||||
.arc1 {
|
||||
position: relative;
|
||||
// top: -142px;
|
||||
left: 108px;
|
||||
clip-path: inset(0 55% 55% 0);
|
||||
animation: rotateArc1 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc2 {
|
||||
position: relative;
|
||||
top: -268px;
|
||||
left: 108px;
|
||||
clip-path: inset(55% 0 0 55%);
|
||||
transform: rotate(90deg);
|
||||
animation: rotateArc2 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc3 {
|
||||
position: relative;
|
||||
top: -394px;
|
||||
left: 108px;
|
||||
clip-path: inset(0 55% 55% 0);
|
||||
transform: rotate(180deg);
|
||||
animation: rotateArc3 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc4 {
|
||||
position: relative;
|
||||
top: -520px;
|
||||
left: 108px;
|
||||
clip-path: inset(55% 0 0 55%);
|
||||
transform: rotate(270deg);
|
||||
animation: rotateArc4 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateArc1 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc2 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(450deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc3 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(540deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc4 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(630deg);
|
||||
}
|
||||
}
|
||||
// 开启旋转动画
|
||||
.cardRotation {
|
||||
animation: cardRotation 5s linear infinite;
|
||||
}
|
||||
// 关闭旋转动画
|
||||
.cardRotationState {
|
||||
animation-play-state: paused;
|
||||
transition: transform 3s ease;
|
||||
transform: rotateY(0deg) !important;
|
||||
}
|
||||
// 定义旋转动画
|
||||
@keyframes cardRotation {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(-360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,6 +33,7 @@ import {ref,onMounted,defineExpose,defineEmits,watch} from "vue";
|
|||
import {CaretDownOutlined,CaretUpOutlined} from "@ant-design/icons-vue";
|
||||
import axios from 'axios'
|
||||
import { getLoadDroneCaseInfoDetail,getPolygonCenter } from '@/api/tiankongdi/index.ts';
|
||||
import { loadCaseInfoTuBanList } from '@/api/demo/system';
|
||||
const emits = defineEmits(["toPosition","handlerFilter"])
|
||||
import { WktToGeojson } from "@/components/MapboxMaps/src/WktGeojsonTransform";
|
||||
async function toPosition(item){
|
||||
|
|
@ -121,8 +122,8 @@ const keyword = ref("");
|
|||
|
||||
async function searchArea() {
|
||||
|
||||
if(keyword.value.match(/^-?\d+$/)){
|
||||
let res = await getLoadDroneCaseInfoDetail({caseNo:keyword.value,page:1,limit:10});
|
||||
if(keyword.value.match(/^[0-9A-Z]+$/)){
|
||||
let res = await loadCaseInfoTuBanList({caseNo:keyword.value,page:1,limit:10});
|
||||
searchResult.value = [];
|
||||
res?.items?.forEach((item,index)=>{
|
||||
let obj = {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const initMap = () => {
|
|||
},
|
||||
],
|
||||
},
|
||||
maxZoom:18,
|
||||
maxZoom:17,
|
||||
minZoom:1,
|
||||
zoom: 10,
|
||||
pitch:0,
|
||||
|
|
@ -489,7 +489,7 @@ function handlerLoadMaskLayer(){
|
|||
},
|
||||
paint: {
|
||||
'fill-color': '#ffffff',
|
||||
'fill-opacity': 1 /* 透明度 */,
|
||||
'fill-opacity': 0.8 /* 透明度 */,
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
|
|
@ -586,8 +586,8 @@ defineExpose({
|
|||
position:absolute;
|
||||
width:330px;
|
||||
height:40px;
|
||||
top:90px;
|
||||
left:88px;
|
||||
top:72px;
|
||||
left:73px;
|
||||
z-index:9999;
|
||||
}
|
||||
::v-deep .mapboxgl-ctrl-logo{
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@ function handlerLoadMaskLayer(){
|
|||
},
|
||||
paint: {
|
||||
'fill-color': '#ffffff',
|
||||
'fill-opacity': 1 /* 透明度 */,
|
||||
'fill-opacity': 0.8 /* 透明度 */,
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
|
|
|
|||
|
|
@ -1,54 +1,64 @@
|
|||
<template>
|
||||
<div class="screen-header-container">
|
||||
<div class="screen-title"><img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
|
||||
<span class="screen-currentTime">
|
||||
<span class="time">{{ currentTime }}</span>
|
||||
<span class="separator"></span>
|
||||
<span class="weather">{{ Weather }}</span>
|
||||
</span>
|
||||
<div class="left-category-container">
|
||||
<div class="category-item" v-for="(item,index) in left_categorys"
|
||||
:style="{left:-index*26+'px'}"
|
||||
@click="getHome(item)"
|
||||
>{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_category-container" >
|
||||
<div class="category-item" v-for="(item,index) in right_categorys"
|
||||
:style="{left:-index*26+'px'}"
|
||||
@click="getHome(item)"
|
||||
>{{item.title}}</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span style="color:#325E95;">{{fireUserLoginName}}</span>
|
||||
|
||||
<span style="color:#ddd" @click="logout">退出</span>
|
||||
</div>
|
||||
<div class="screen-header-container">
|
||||
<div class="screen-title">
|
||||
<img src="/public/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
|
||||
</div>
|
||||
<span class="screen-currentTime">
|
||||
<span class="time">{{ currentTime }}</span>
|
||||
<span class="separator"></span>
|
||||
<span class="weather">{{ Weather }}</span>
|
||||
</span>
|
||||
<div class="left-category-container">
|
||||
<div
|
||||
class="category-item"
|
||||
v-for="(item, index) in left_categorys"
|
||||
:key="index"
|
||||
:style="{ left: -index * 26 + 'px' }"
|
||||
@click="getHome(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_category-container">
|
||||
<div
|
||||
v-for="(item, index) in right_categorys"
|
||||
:key="item.id"
|
||||
class="category-item"
|
||||
:style="{
|
||||
left: `${-(index * 26)}px`,
|
||||
'background-image': item.hovered
|
||||
? `url(/public/statistical/category-right-active.png)`
|
||||
: `url(/public/statistical/category-right.png)`,
|
||||
}"
|
||||
v-for="(item, index) in right_categorys"
|
||||
:key="index"
|
||||
:style="{ left: -index * 26 + 'px' }"
|
||||
@click="getHome(item)"
|
||||
@mouseover="handleMouseOver('right', item)"
|
||||
@mouseout="handleMouseOut('right', item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span style="color: #325e95">{{ fireUserLoginName }}</span>
|
||||
|
||||
|
||||
<span style="color: #ddd" @click="logout">退出</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right_category-container">
|
||||
<div
|
||||
v-for="(item, index) in right_categorys"
|
||||
:key="item.id"
|
||||
class="category-item"
|
||||
:style="{
|
||||
left: `${-(index * 26)}px`,
|
||||
'background-image': item.hovered
|
||||
? `url(/public/statistical/category-right-active.png)`
|
||||
: `url(/public/statistical/category-right.png)`,
|
||||
}"
|
||||
@click="getHome(item)"
|
||||
@mouseover="handleMouseOver('right', item)"
|
||||
@mouseout="handleMouseOut('right', item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span style="color: #325e95">{{ fireUserLoginName }}</span>
|
||||
|
||||
<span style="color: #ddd" @click="logout">退出</span>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, onMounted, onUnmounted, watchEffect, h } from 'vue';
|
||||
|
|
@ -161,16 +171,31 @@
|
|||
// 时间和天气
|
||||
const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
|
||||
const Weather = ref('');
|
||||
function getWeather() {
|
||||
// http://www.tianqiapi.com/index/doc?version=v63
|
||||
// 若次数试用用尽，注册账号后，切换appid和appsecret即可
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
}).then((res) => {
|
||||
Weather.value = res.data.wea;
|
||||
});
|
||||
async function getWeather() {
|
||||
try {
|
||||
// 百度国内天气查询API
|
||||
const response = await axios.get('https://api.map.baidu.com/weather/v1/', {
|
||||
params: {
|
||||
district_id: 371300,
|
||||
data_type: 'all',
|
||||
ak: 'qbMvuMbWe1fJnOBNLJFsjoeHC3wfWkoB',
|
||||
},
|
||||
timeout: 15000,
|
||||
});
|
||||
Weather.value = response?.result?.now?.text;
|
||||
} catch (error) {
|
||||
// 备用
|
||||
// http://www.tianqiapi.com/index/doc?version=v63
|
||||
// 若次数试用用尽，注册账号后，切换appid和appsecret即可
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
}).then((res) => {
|
||||
Weather.value = res.data.wea;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateTime() {
|
||||
currentTime.value = dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm');
|
||||
}
|
||||
|
|
@ -193,7 +218,6 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.screen-header-container {
|
||||
width: 100%;
|
||||
|
|
@ -224,78 +248,78 @@
|
|||
}
|
||||
|
||||
.screen-currentTime {
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: -60px;
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: -60px;
|
||||
|
||||
width: 344px;
|
||||
height: 14px;
|
||||
font-family: DengXian;
|
||||
font-weight: 400;
|
||||
width: 344px;
|
||||
height: 14px;
|
||||
font-family: DengXian;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #8bd8ff;
|
||||
line-height: 3px;
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time,
|
||||
.weather {
|
||||
display: inline-block;
|
||||
}
|
||||
.separator {
|
||||
margin: 0 50px;
|
||||
}
|
||||
.left-category-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
transform: translate(calc(-50% - 570px), 0);
|
||||
.category-item {
|
||||
float: left;
|
||||
width: 138px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
color: #8BD8FF;
|
||||
line-height: 3px;
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-image: url('/public/statistical/category-left.png');
|
||||
background-size: 138px 32px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time,
|
||||
.weather {
|
||||
display: inline-block;
|
||||
}
|
||||
.separator {
|
||||
margin: 0 50px;
|
||||
}
|
||||
.left-category-container{
|
||||
position:absolute;
|
||||
top:50px;
|
||||
left:50%;
|
||||
transform: translate( calc( -50% - 570px),0);
|
||||
.category-item{
|
||||
float:left;
|
||||
width:138px;
|
||||
height:32px;
|
||||
font-size:14px;
|
||||
line-height:32px;
|
||||
text-align: center;
|
||||
background-image:url("/public/statistical/category-left.png");
|
||||
background-size:138px 32px;
|
||||
color:#fff;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
.right_category-container{
|
||||
position:absolute;
|
||||
top:50px;
|
||||
right:50%;
|
||||
transform: translate( calc( 50% + 570px),0);
|
||||
.category-item{
|
||||
float:left;
|
||||
width:138px;
|
||||
height:32px;
|
||||
font-size:14px;
|
||||
line-height:32px;
|
||||
text-align: center;
|
||||
background-image:url("/public/statistical/category-right.png");
|
||||
background-size:138px 32px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
.right_category-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50%;
|
||||
transform: translate(calc(50% + 570px), 0);
|
||||
.category-item {
|
||||
float: left;
|
||||
width: 138px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-image: url('/public/statistical/category-right.png');
|
||||
background-size: 138px 32px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
width:120px;
|
||||
color:#e1e1e1;
|
||||
position:absolute;
|
||||
top:48px;
|
||||
right:20px;
|
||||
font-size:14px;
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
color:#8BE5EE;
|
||||
}
|
||||
.user-info {
|
||||
width: 120px;
|
||||
color: #e1e1e1;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 20px;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #8be5ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,381 @@
|
|||
<template>
|
||||
<div class="brokenline-container">
|
||||
<!-- brokenline 下发图斑趋势 折线图 -->
|
||||
<div class="brokenline-title">
|
||||
<div class="title">{{ props.typeName }}趋势</div>
|
||||
<div class="month">
|
||||
<div class="month-list">
|
||||
<div
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@click="monthClick(item.value)"
|
||||
:class="item.value == monthVal ? 'active' : ''"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
</div>
|
||||
<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" />
|
||||
<img src="/statistical/down.png" alt="" v-else />
|
||||
</div>
|
||||
<div class="filter-item-container" v-if="showFilterOptions">
|
||||
<div
|
||||
v-for="(item, index) in props.countyList"
|
||||
:class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
|
||||
:key="index"
|
||||
@click="handlerCheckedFilter(item)"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brokenline-content">
|
||||
<div id="brokenline" style="height: 30vh"> </div>
|
||||
<span class="brokenline-unit">单位：</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { getTrendEchartsData } from '@/api/statistical/index';
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
name: '天',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '月',
|
||||
value: 1,
|
||||
},
|
||||
]);
|
||||
const monthVal = ref(0);
|
||||
|
||||
function monthClick(val) {
|
||||
monthVal.value = val;
|
||||
getData();
|
||||
}
|
||||
|
||||
const showFilterOptions = ref(false);
|
||||
const currentFilter = ref();
|
||||
const currentFilterName = ref();
|
||||
|
||||
function handlerChangeFilterOptions() {
|
||||
showFilterOptions.value = !showFilterOptions.value;
|
||||
}
|
||||
|
||||
function handlerCheckedFilter(item) {
|
||||
currentFilter.value = item.id;
|
||||
currentFilterName.value = item.name;
|
||||
showFilterOptions.value = false;
|
||||
getData();
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
typeName: {
|
||||
type: String,
|
||||
default: '下发图斑',
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
countyList: Object,
|
||||
});
|
||||
watch(
|
||||
() => props.countyList,
|
||||
(val) => {
|
||||
currentFilter.value = props.countyList[0].id;
|
||||
currentFilterName.value = props.countyList[0].name;
|
||||
getData();
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.type,
|
||||
(val) => {
|
||||
getData();
|
||||
},
|
||||
);
|
||||
const timeList: any = ref([]);
|
||||
const tbAreaList: any = ref([]);
|
||||
const gdAreaList: any = ref([]);
|
||||
const ntAreaList: any = ref([]);
|
||||
const xfAreaList: any = ref([]);
|
||||
function getData() {
|
||||
timeList.value = [];
|
||||
tbAreaList.value = [];
|
||||
gdAreaList.value = [];
|
||||
ntAreaList.value = [];
|
||||
xfAreaList.value = [];
|
||||
const querys = {
|
||||
type: props.type,
|
||||
countyid: currentFilter.value,
|
||||
datatype: monthVal.value,
|
||||
};
|
||||
getTrendEchartsData(querys).then((res) => {
|
||||
res.forEach((element) => {
|
||||
timeList.value.push(element.time);
|
||||
tbAreaList.value.push(element.tnmj);
|
||||
gdAreaList.value.push(element.gdmj);
|
||||
ntAreaList.value.push(element.yjjbntmj);
|
||||
xfAreaList.value.push(element.tbzs);
|
||||
});
|
||||
chartData();
|
||||
});
|
||||
}
|
||||
|
||||
function chartData() {
|
||||
var chartDom = document.getElementById('brokenline');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option = {
|
||||
legend: {
|
||||
data: ['基本农田面积', '图斑面积', '耕地面积', '数量'],
|
||||
top: '4%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: timeList.value,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff', //X轴文字颜色
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 0,
|
||||
// rotate: 30,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#396A87',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 0.5,
|
||||
color: '#3d5269',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
color: '#396A87',
|
||||
fontSize: 14,
|
||||
},
|
||||
position: 'right',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#396A87',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
color: ['#0C725D', '#069EC3', '#3249CD'],
|
||||
series: [
|
||||
{
|
||||
name: '基本农田面积',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: ntAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '图斑面积',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: tbAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '耕地面积',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: gdAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '数量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||
showAllSymbol: true, //显示所有图形。
|
||||
symbol: 'circle', //标记的图形为实心圆
|
||||
symbolSize: 6, //标记的大小
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: '#FF9C5D',
|
||||
borderColor: '#FF9C5D',
|
||||
width: 2,
|
||||
shadowColor: '#FF9C5D',
|
||||
shadowBlur: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FF9C5D',
|
||||
width: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
data: xfAreaList.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
chartData();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.brokenline-container {
|
||||
z-index: 10;
|
||||
}
|
||||
.brokenline-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
align-items: center;
|
||||
.title {
|
||||
padding-left: 10px;
|
||||
width: 258px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-image: url('/statistical/right-title-bg.png');
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.brokenline-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.brokenline-unit {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 16px;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
}
|
||||
.month {
|
||||
display: flex;
|
||||
.month-list {
|
||||
display: flex;
|
||||
div {
|
||||
width: 61px;
|
||||
height: 27px;
|
||||
background: #22293d;
|
||||
border-radius: 3px 0px 0px 3px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
||||
box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-container {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
width: 104px;
|
||||
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;
|
||||
img {
|
||||
width: 10px;
|
||||
}
|
||||
.filter-name {
|
||||
width: 70px;
|
||||
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 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: rgba(11, 39, 68, 0.8);
|
||||
border: 1px solid #0a62c6;
|
||||
top: 36px;
|
||||
left: 0px;
|
||||
height: 140px;
|
||||
overflow: auto;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<div class="circulation-container">
|
||||
<!-- circulation 下发图斑趋势 折线图 -->
|
||||
<div class="circulation-title">
|
||||
<div class="title">数据分析</div>
|
||||
<div class="month">
|
||||
<div class="month-list">
|
||||
<div
|
||||
v-for="item in monthOptions"
|
||||
:key="item.value"
|
||||
@click="monthClick(item.value)"
|
||||
:class="item.value == monthVal ? 'active' : ''"
|
||||
>{{ item.label }}</div
|
||||
>
|
||||
</div>
|
||||
<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" />
|
||||
<img src="/statistical/down.png" alt="" v-else />
|
||||
</div>
|
||||
<div class="filter-item-container" v-if="showFilterOptions">
|
||||
<div
|
||||
v-for="(item, index) in props.countyList"
|
||||
:key="index"
|
||||
:class="item.id == currentFilter ? 'filter-item active' : 'filter-item'"
|
||||
@click="handlerCheckedFilter(item)"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circulation-content">
|
||||
<div class="circulation-left">
|
||||
<div class="circulation-left-left">
|
||||
<div class="circulation-content-title">下发图斑</div>
|
||||
<div class="circulation-content-number">
|
||||
<div>
|
||||
<span>下发图斑(宗数)</span>
|
||||
<span>{{ data.xftb }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>耕地面积(亩)</span>
|
||||
<span>{{ data.gdmj }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circulation-content-compare">
|
||||
<div class="compare-title">环比</div>
|
||||
<div>
|
||||
<img src="/statistical/go-up.png" alt="" v-if="data.xftbhb > 0" />
|
||||
<img src="/statistical/decline.png" alt="" v-else />
|
||||
<span> {{ data.xftbhb }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/statistical/go-up.png" alt="" v-if="data.gdmjhb > 0" />
|
||||
<img src="/statistical/decline.png" alt="" v-else />
|
||||
<span> {{ data.gdmjhb }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circulation-right">
|
||||
<div class="circulation-left-left">
|
||||
<div class="circulation-content-title">新增违法</div>
|
||||
<div class="circulation-content-number">
|
||||
<div>
|
||||
<span>下发图斑(宗数)</span>
|
||||
<span>{{ data.xzwf }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>耕地面积(亩)</span>
|
||||
<span>{{ data.xzwfmj }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circulation-content-compare">
|
||||
<div class="compare-title">环比</div>
|
||||
<div>
|
||||
<img src="/statistical/go-up.png" alt="" v-if="data.wftbhb > 0" />
|
||||
<img src="/statistical/decline.png" alt="" v-else />
|
||||
<span> {{ data.wftbhb }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/statistical/go-up.png" alt="" v-if="data.xzwfgdmjhb > 0" />
|
||||
<img src="/statistical/decline.png" alt="" v-else />
|
||||
<span> {{ data.xzwfgdmjhb }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { monthOptions } from '@/utils/global';
|
||||
import { getAnalysisData } from '@/api/statistical/index';
|
||||
|
||||
const props = defineProps({
|
||||
countyList: Object,
|
||||
});
|
||||
watch(
|
||||
() => props.countyList,
|
||||
(val) => {
|
||||
currentFilter.value = props.countyList[0].id;
|
||||
currentFilterName.value = props.countyList[0].name;
|
||||
getCount();
|
||||
},
|
||||
);
|
||||
|
||||
const monthVal = ref(monthOptions[monthOptions.length - 1].value);
|
||||
const data: any = ref({});
|
||||
function monthClick(val) {
|
||||
monthVal.value = val;
|
||||
getCount();
|
||||
}
|
||||
const showFilterOptions = ref(false);
|
||||
const currentFilter = ref();
|
||||
const currentFilterName = ref();
|
||||
|
||||
function handlerChangeFilterOptions() {
|
||||
showFilterOptions.value = !showFilterOptions.value;
|
||||
}
|
||||
|
||||
function handlerCheckedFilter(item) {
|
||||
currentFilter.value = item.id;
|
||||
currentFilterName.value = item.name;
|
||||
showFilterOptions.value = false;
|
||||
getCount();
|
||||
}
|
||||
function getCount() {
|
||||
const querys = {
|
||||
month: monthVal.value,
|
||||
countyid: currentFilter.value,
|
||||
};
|
||||
getAnalysisData(querys).then((res) => {
|
||||
data.value = res;
|
||||
});
|
||||
}
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.circulation-container {
|
||||
z-index: 10;
|
||||
}
|
||||
.circulation-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
.title {
|
||||
padding-left: 10px;
|
||||
width: 258px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-image: url('/statistical/right-title-bg.png');
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.month {
|
||||
display: flex;
|
||||
.month-list {
|
||||
display: flex;
|
||||
div {
|
||||
width: 61px;
|
||||
height: 27px;
|
||||
background: #22293d;
|
||||
border-radius: 3px 0px 0px 3px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
||||
box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.circulation-content {
|
||||
color: #7ebbff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.circulation-content-title {
|
||||
width: 28px;
|
||||
height: 106px;
|
||||
padding: 10px 0;
|
||||
background-image: url('/statistical/data-analysis-title-bg.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circulation-left-left {
|
||||
display: flex;
|
||||
}
|
||||
.circulation-content-number {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 18px;
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:last-child {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.circulation-content-compare {
|
||||
border: 1px solid rgb(42, 137, 218, 0.39);
|
||||
width: 240px;
|
||||
margin-left: 32px;
|
||||
.compare-title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background-image: url('/statistical/huanbi.webp');
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
margin: 10px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
.filter-container {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
width: 104px;
|
||||
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;
|
||||
img {
|
||||
width: 10px;
|
||||
}
|
||||
.filter-name {
|
||||
width: 70px;
|
||||
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 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: rgba(11, 39, 68, 0.8);
|
||||
border: 1px solid #0a62c6;
|
||||
top: 36px;
|
||||
left: 0px;
|
||||
height: 140px;
|
||||
overflow: auto;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
<template>
|
||||
<div class="columnar-container">
|
||||
<!-- columnar 下发图斑 柱状图 -->
|
||||
<div class="columnar-title">
|
||||
<div class="title">{{ props.typeName }}</div>
|
||||
<div class="month">
|
||||
<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" />
|
||||
<img src="/statistical/down.png" alt="" v-else />
|
||||
</div>
|
||||
<div class="filter-item-container" v-if="showFilterOptions">
|
||||
<div
|
||||
v-for="(item, index) in filters"
|
||||
:key="index"
|
||||
:class="item.value === currentFilter ? 'filter-item active' : 'filter-item'"
|
||||
@click="handlerCheckedFilter(item)"
|
||||
>{{ item.label }}</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columnar-content">
|
||||
<div id="columnar" style="height: 30vh"> </div>
|
||||
<span class="columnar-unit">单位：</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { monthAllOptions } from '@/utils/global';
|
||||
import { caseOffenceEcharts } from '@/api/statistical/index';
|
||||
|
||||
const filters = monthAllOptions();
|
||||
const showFilterOptions = ref(false);
|
||||
const currentFilter = ref(0);
|
||||
const currentFilterName = ref('全部');
|
||||
|
||||
function handlerChangeFilterOptions() {
|
||||
showFilterOptions.value = !showFilterOptions.value;
|
||||
}
|
||||
|
||||
function handlerCheckedFilter(item) {
|
||||
currentFilter.value = item.value;
|
||||
currentFilterName.value = item.label;
|
||||
showFilterOptions.value = false;
|
||||
getData();
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
typeName: {
|
||||
type: String,
|
||||
default: '下发图斑',
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.type,
|
||||
(val) => {
|
||||
getData();
|
||||
},
|
||||
);
|
||||
const countyList: any = ref([]);
|
||||
const tbAreaList: any = ref([]);
|
||||
const gdAreaList: any = ref([]);
|
||||
const ntAreaList: any = ref([]);
|
||||
const xfAreaList: any = ref([]);
|
||||
function getData() {
|
||||
countyList.value = [];
|
||||
tbAreaList.value = [];
|
||||
gdAreaList.value = [];
|
||||
ntAreaList.value = [];
|
||||
xfAreaList.value = [];
|
||||
const querys = {
|
||||
type: props.type,
|
||||
month: currentFilter.value,
|
||||
};
|
||||
caseOffenceEcharts(querys).then((res) => {
|
||||
res.forEach((element) => {
|
||||
countyList.value.push(element.countyname);
|
||||
tbAreaList.value.push(element.tbmj);
|
||||
gdAreaList.value.push(element.gdmj);
|
||||
ntAreaList.value.push(element.yjjbntmj);
|
||||
xfAreaList.value.push(element.tbzs);
|
||||
});
|
||||
chartData();
|
||||
});
|
||||
}
|
||||
function chartData() {
|
||||
var chartDom = document.getElementById('columnar');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
top: '18%',
|
||||
right: '5%',
|
||||
bottom: '22%',
|
||||
},
|
||||
legend: {
|
||||
data: ['图斑面积', '耕地面积', '永久基本农田面积', '下发个数'],
|
||||
top: '4%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: countyList.value,
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: '#3d5269',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true, //隐藏X轴刻度
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff', //X轴文字颜色
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 0,
|
||||
// rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
color: '#396A87',
|
||||
fontSize: 14,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 0.5,
|
||||
color: '#3d5269',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#396A87',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
color: '#396A87',
|
||||
fontSize: 14,
|
||||
},
|
||||
position: 'right',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#396A87',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '图斑面积',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#E5410E',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#172830',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: tbAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '耕地面积',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#E5A10E',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#172830',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: gdAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '永久基本农田面积',
|
||||
type: 'bar',
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00D532',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#172830',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: ntAreaList.value,
|
||||
},
|
||||
{
|
||||
name: '下发个数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||
showAllSymbol: true, //显示所有图形。
|
||||
symbol: 'circle', //标记的图形为实心圆
|
||||
symbolSize: 6, //标记的大小
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: '#FF9C5D',
|
||||
borderColor: '#FF9C5D',
|
||||
width: 2,
|
||||
shadowColor: '#FF9C5D',
|
||||
shadowBlur: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
position: 'top',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FF9C5D',
|
||||
width: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
data: xfAreaList.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
getData();
|
||||
// chartData();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.columnar-container {
|
||||
z-index: 10;
|
||||
}
|
||||
.columnar-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
align-items: center;
|
||||
.title {
|
||||
padding-left: 10px;
|
||||
width: 258px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-image: url('/statistical/right-title-bg.png');
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.columnar-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.columnar-unit {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 16px;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
}
|
||||
.filter-container {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
width: 104px;
|
||||
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;
|
||||
img {
|
||||
width: 10px;
|
||||
}
|
||||
.filter-name {
|
||||
width: 70px;
|
||||
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 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background: rgba(11, 39, 68, 0.8);
|
||||
border: 1px solid #0a62c6;
|
||||
top: 36px;
|
||||
left: 0px;
|
||||
height: 140px;
|
||||
overflow: auto;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div style="background: rgba(0, 0, 0, 0.8)">
|
||||
<a-segmented
|
||||
v-model:value="type"
|
||||
:options="data"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 37px;
|
||||
border-radius: 19px;
|
||||
background: #102649;
|
||||
margin-bottom: 23px;
|
||||
border-top: 1px solid #4bb8f4;
|
||||
border-top: 1px solid #4bb8f4;
|
||||
border-left: 1px solid #4bb8f4;
|
||||
"
|
||||
@change="changeType"
|
||||
/>
|
||||
<!-- columnar 下发图斑 柱状图 -->
|
||||
<Columnar :type="type" :typeName="typeName" />
|
||||
<!-- brokenline 下发图斑趋势 折线图 -->
|
||||
<Brokenline :type="type" :typeName="typeName" :countyList="list" />
|
||||
<!-- circulation 数据分析 环比 -->
|
||||
<Circulation :countyList="list" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Columnar, Brokenline, Circulation } from './page';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getUserOrgs } from '@/api/tiankongdi';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
|
||||
const type: any = ref(1);
|
||||
const typeName: any = ref('下发图斑');
|
||||
const data = ref([
|
||||
{
|
||||
label: '下发图斑',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '核实后新增违法',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '整改后剩余违法',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
function changeType(val) {
|
||||
console.log(val);
|
||||
type.value = val;
|
||||
typeName.value = data.value.find((item) => item.value == val)?.label;
|
||||
}
|
||||
// 初始数据
|
||||
const list = ref();
|
||||
async function getOptions() {
|
||||
const data = await getChildrenTree({
|
||||
parentId: 371300,
|
||||
});
|
||||
data.forEach((item) => {
|
||||
item.isClick = false;
|
||||
});
|
||||
list.value = data;
|
||||
let linyishi = {
|
||||
id: '',
|
||||
name: '临沂市',
|
||||
};
|
||||
list.value.unshift(linyishi);
|
||||
}
|
||||
// 获取用户可以访问的机构信息
|
||||
async function handlerGetOrgs() {
|
||||
let orgs = await getUserOrgs({});
|
||||
let isLevel = orgs.find((item, index) => {
|
||||
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
|
||||
});
|
||||
if (isLevel) {
|
||||
// 市级
|
||||
getOptions();
|
||||
} else {
|
||||
// 县区级
|
||||
let levesl = orgs.filter((item, index) => {
|
||||
return item.parentName == '临沂市' || item.parentId == 371300;
|
||||
});
|
||||
list.value = levesl;
|
||||
}
|
||||
}
|
||||
onMounted(async () => {
|
||||
await handlerGetOrgs();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-segmented-thumb) {
|
||||
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
||||
border-radius: 19px;
|
||||
}
|
||||
:deep(.ant-segmented-item) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 19px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
:deep(.ant-segmented-group) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-segmented-item-selected) {
|
||||
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
||||
box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as Columnar } from './columnar/index.vue';
|
||||
export { default as Brokenline } from './brokenline/index.vue';
|
||||
export { default as Circulation } from './circulation/index.vue';
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<LoginFormTitle class="login_title" />
|
||||
<Form
|
||||
<a-form
|
||||
class="p-4 enter-x"
|
||||
:model="formData"
|
||||
:rules="getFormRules"
|
||||
|
|
@ -35,7 +35,11 @@
|
|||
|
||||
<ARow>
|
||||
<ACol :span="12">
|
||||
<FormItem>
|
||||
<FormItem
|
||||
:style="{
|
||||
'text-align': 'left',
|
||||
}"
|
||||
>
|
||||
<Checkbox v-model:checked="rememberMe" size="small">
|
||||
{{ t('sys.login.rememberMe') }}
|
||||
</Checkbox>
|
||||
|
|
@ -54,12 +58,12 @@
|
|||
</ACol>
|
||||
</ARow>
|
||||
|
||||
<FormItem>
|
||||
<Button size="large" block @click="handleLogin" :loading="loading" class="logon">
|
||||
<a-form-item>
|
||||
<a-button size="large" block @click="handleLogin" :loading="loading" class="logon">
|
||||
立即登录
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="bottom" v-if="getShow">
|
||||
<Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
<template #icon>
|
||||
|
|
@ -183,7 +187,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue