zhouhui
/
lcny-vue3-antd-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

new-map
H 2022-11-11 16:45:11 +08:00
parent 777cca7944
commit 538ab49bed
16 changed files with 279 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/utils/index.ts
View File

@ -135,32 +135,46 @@ export function getTreeData(
return arr return arr
} }
// 获取近一周的时间 // 获取近7的时间
export function getWeek() { export function getWeek() {
const date = new Date() let toData = new Date(new Date().toLocaleDateString()).getTime()
const year = date.getFullYear() //今天
const month = date.getMonth() let todayStart = toData
const day = date.getDate() //昨天
const week = date.getDay() let yesterdayStart = toData - 3600 * 24 * 1000
//开始时间 let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD') //最近7天
// 结束时间 let past7daysStart = todayStart - 7 * 3600 * 24 * 1000
let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD') // const date = new Date()
// const year = date.getFullYear()
// const month = date.getMonth()
// const day = date.getDate()
// const week = date.getDay()
// //开始时间
// let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
// // 结束时间
// let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
return { return {
WeekStartDate, WeekStartDate: dayjs(past7daysStart).format('YYYY-MM-DD'),
WeekEndDate, WeekEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
} }
} }
// 获取近一月的数据 // 获取近一月的数据
export function getMonth() { export function getMonth() {
const date = new Date() let toData = new Date(new Date().toLocaleDateString()).getTime()
const year = date.getFullYear() //昨天
const month = date.getMonth() let yesterdayStart = toData - 3600 * 24 * 1000
let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD') let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD') //最近30天
let past30daysStart = toData - 30 * 3600 * 24 * 1000
// const date = new Date()
// const year = date.getFullYear()
// const month = date.getMonth()
// let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
// let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
return { return {
MonthStartDate, MonthStartDate: dayjs(past30daysStart).format('YYYY-MM-DD'),
MonthEndDate, MonthEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
} }
} }

2
src/views/main/meteorological/components/AirHumidity.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
smooth: true, smooth: true,

2
src/views/main/meteorological/components/AirTemperature.vue
View File

@ -85,7 +85,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
smooth: true, smooth: true,

2
src/views/main/meteorological/components/CO2.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
data: Object.values(e), data: Object.values(e),

2
src/views/main/meteorological/components/LightIntensity.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
symbolSize: 20, symbolSize: 20,

2
src/views/main/meteorological/components/Noise.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
data: Object.values(e), data: Object.values(e),

2
src/views/main/meteorological/components/PM10.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
data: Object.values(e), data: Object.values(e),

2
src/views/main/meteorological/components/PM25.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
data: Object.values(e), data: Object.values(e),

2
src/views/main/meteorological/components/Pressure.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
data: Object.values(e), data: Object.values(e),

2
src/views/main/meteorological/components/Rainfall.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
symbolSize: 20, symbolSize: 20,

2
src/views/main/meteorological/components/WindDirection.vue
View File

@ -84,7 +84,7 @@
}, },
}, },
], ],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
symbolSize: 20, symbolSize: 20,

2
src/views/main/meteorological/components/WindSpeed.vue
View File

@ -85,7 +85,7 @@
}, },
}, },
], ],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [ series: [
{ {
smooth: true, smooth: true,

213
src/views/main/meteorological/index.vue
View File

@ -82,107 +82,114 @@
:rowProps="{ gutter: [16, 0] }" :rowProps="{ gutter: [16, 0] }"
:showActionButtonGroup="false" :showActionButtonGroup="false"
/> --> /> -->
<div class="md:flex enter-y flex-wrap -mr-4"> <template v-if="baseDate.length === 0">
<!-- 空气温度 --> <div class="h-500px flex items-center justify-center flex-col">
<AirTemperature <Empty></Empty>
:data="statisData.air_temperature" </div>
:extra="name" </template>
class="md:w-386px w-full !mr-4 !mb-4" <template v-else>
:loading="false" <div class="md:flex enter-y flex-wrap -mr-4">
:time="formState.time" <!-- 空气温度 -->
:company="formState.time_interval" <AirTemperature
/> :data="statisData.air_temperature"
<!-- 空气湿度 --> :extra="name"
<AirHumidity class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.air_humidity" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 空气湿度 -->
:company="formState.time_interval" <AirHumidity
/> :extra="name"
<!-- 光照强度 --> :data="statisData.air_humidity"
<LightIntensity class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.illumination" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 光照强度 -->
:company="formState.time_interval" <LightIntensity
/> :extra="name"
<!-- 降雨量 --> :data="statisData.illumination"
<Rainfall class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:time="formState.time" :time="formState.time"
:data="statisData.daily_rainfall" :company="formState.time_interval"
class="md:w-386px w-full !mr-4 !mb-4" />
:loading="false" <!-- 降雨量 -->
:company="formState.time_interval" <Rainfall
/> :extra="name"
<!-- 风速 --> :time="formState.time"
<WindSpeed :data="statisData.daily_rainfall"
:extra="name" class="md:w-386px w-full !mr-4 !mb-4"
:data="statisData.wind_speed" :loading="false"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 风速 -->
:company="formState.time_interval" <WindSpeed
/> :extra="name"
<!-- 风力 --> :data="statisData.wind_speed"
<Pressure class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.wind_degree" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 风力 -->
:company="formState.time_interval" <Pressure
/> :extra="name"
<!-- 风向 --> :data="statisData.wind_degree"
<WindDirection class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.wind_direction" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 风向 -->
:company="formState.time_interval" <WindDirection
/> :extra="name"
<!-- 噪声 --> :data="statisData.wind_direction"
<Noise class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.noise" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- 噪声 -->
:company="formState.time_interval" <Noise
/> :extra="name"
<!-- PM10 --> :data="statisData.noise"
<PM10 class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.pm10" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- PM10 -->
:company="formState.time_interval" <PM10
/> :extra="name"
<!-- PM25 --> :data="statisData.pm10"
<PM25 class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.pm25" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- PM25 -->
:company="formState.time_interval" <PM25
/> :extra="name"
<!-- CO2 --> :data="statisData.pm25"
<CO2 class="md:w-386px w-full !mr-4 !mb-4"
:extra="name" :loading="false"
:data="statisData.co2" :time="formState.time"
class="md:w-386px w-full !mr-4 !mb-4" :company="formState.time_interval"
:loading="false" />
:time="formState.time" <!-- CO2 -->
:company="formState.time_interval" <CO2
/> :extra="name"
</div> :data="statisData.co2"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
</div>
</template>
</Card> </Card>
</PageWrapper> </PageWrapper>
</template> </template>
@ -192,7 +199,7 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { PageWrapper } from '/@/components/Page' import { PageWrapper } from '/@/components/Page'
import { ref, reactive, onMounted, computed } from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker } from 'ant-design-vue' import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker, Empty } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue' import type { FormInstance } from 'ant-design-vue'
import AirTemperature from './components/AirTemperature.vue' import AirTemperature from './components/AirTemperature.vue'
import AirHumidity from './components/AirHumidity.vue' import AirHumidity from './components/AirHumidity.vue'
@ -230,12 +237,14 @@
// 获取基地数据 // 获取基地数据
const getBase = async () => { const getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 4 }) const res = await getGriculturalDeviceBasic({ device_type: 4 })
if (res.length == 0) return
baseDate.value = res baseDate.value = res
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
getPoint() getPoint()
} }
// 获取监控到数据 // 获取监控到数据
const getPoint = async () => { const getPoint = async () => {
if (baseDate.value.length == 0) return
const res = await getaGriculturalDevicePoint({ const res = await getaGriculturalDevicePoint({
device_type: 4, device_type: 4,
agricultural_basic: formState.base_id, agricultural_basic: formState.base_id,

86
src/views/main/soil-monitoring/index.vue
View File

@ -76,45 +76,52 @@
</Col> </Col>
</Row> </Row>
</Form> </Form>
<!-- --> <template v-if="baseDate.length === 0">
<div class="flex justify-between"> <div class="h-500px flex items-center justify-center flex-col">
<span class="text-xl">预警数据统计</span> <Empty></Empty>
<Button @click="handleSetting">设置</Button>
</div>
<div class="mt-20px flex">
<EarlyWarningItem
class="mr-16px last:mr-0"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
</div> </div>
</div> </template>
<div class="mt-20px"> <!-- -->
<LineCharts <template v-else>
:company="formState.time_interval" <div class="flex justify-between">
:extra="extra" <span class="text-xl">预警数据统计</span>
:loading="false" <Button @click="handleSetting">设置</Button>
:title="currentActiveLable" </div>
:data="chartData" <div class="mt-20px flex">
:time="formState.time" <EarlyWarningItem
/> class="mr-16px last:mr-0"
</div> v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
</div>
</div>
<div class="mt-20px">
<LineCharts
:company="formState.time_interval"
:extra="extra"
:loading="false"
:title="currentActiveLable"
:data="chartData"
:time="formState.time"
/>
</div>
</template>
</Card> </Card>
<FormDrawer @register="registerDrawer" @success="handleSuccess" /> <FormDrawer @register="registerDrawer" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
@ -149,6 +156,7 @@
RangePicker, RangePicker,
Button, Button,
message, message,
Empty,
} from 'ant-design-vue' } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue' import type { FormInstance } from 'ant-design-vue'
const RadioButton = Radio.Button const RadioButton = Radio.Button
@ -256,12 +264,14 @@
// 获取基地数据 // 获取基地数据
const getBase = async () => { const getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 2 }) const res = await getGriculturalDeviceBasic({ device_type: 2 })
if (res.length == 0) return
baseDate.value = res baseDate.value = res
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
getPoint() getPoint()
} }
// 获取监控点数据 // 获取监控点数据
const getPoint = async () => { const getPoint = async () => {
if (baseDate.value.length == 0) return
const res = await getaGriculturalDevicePoint({ const res = await getaGriculturalDevicePoint({
device_type: 2, device_type: 2,
agricultural_basic: formState.base_id, agricultural_basic: formState.base_id,

18
src/views/main/water-quality/components/FormDrawer.vue
View File

@ -45,20 +45,20 @@
import { editDeviceWarningRules } from '/@/api/sys/user' import { editDeviceWarningRules } from '/@/api/sys/user'
const emits = defineEmits(['success', 'register']) const emits = defineEmits(['success', 'register'])
const enumName = { const enumName = {
chlorine: '氯',
conductivity: '电导率', conductivity: '电导率',
humidity: '湿度', oxygen: '氧气',
ph: 'PH',
temperature: '温度', temperature: '温度',
k: '氮', turbidity: '浊度',
n: '磷',
p: '钾',
} }
const enumCompany = { const enumCompany = {
temperature: '℃', temperature: '℃',
conductivity: 'us/cm', conductivity: 'us/cm',
humidity: '%', turbidity: 'NTU',
k: 'mg/kg', chlorine: 'mg/L',
n: 'mg/kg', oxygen: 'mg/L',
p: 'mg/kg', ph: '',
} }
const enumName1 = { const enumName1 = {
1: 'Ⅰ级预警', 1: 'Ⅰ级预警',
@ -79,7 +79,7 @@
setDrawerProps({ confirmLoading: false }) setDrawerProps({ confirmLoading: false })
const res = await getDeviceWarningRules({}) const res = await getDeviceWarningRules({})
roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil') roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_waterquality')
}) })
const handleSubmit = async () => { const handleSubmit = async () => {

124
src/views/main/water-quality/index.vue
View File

@ -76,45 +76,52 @@
</Col> </Col>
</Row> </Row>
</Form> </Form>
<!-- --> <template v-if="baseDate.length === 0">
<div class="flex justify-between"> <div class="h-500px flex items-center justify-center flex-col">
<span class="text-xl">预警数据统计</span> <Empty></Empty>
<Button @click="handleSetting">设置</Button>
</div>
<div class="mt-20px flex">
<EarlyWarningItem
class="mr-16px last:mr-0"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
</div> </div>
</div> </template>
<div class="mt-20px"> <!-- -->
<LineCharts <template v-else>
:company="formState.time_interval" <div class="flex justify-between">
:extra="extra" <span class="text-xl">预警数据统计</span>
:loading="false" <Button @click="handleSetting">设置</Button>
:title="currentActiveLable" </div>
:data="chartData" <div class="mt-20px flex">
:time="formState.time" <EarlyWarningItem
/> class="mr-16px last:mr-0"
</div> v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
</div>
</div>
<div class="mt-20px">
<LineCharts
:company="formState.time_interval"
:extra="extra"
:loading="false"
:title="currentActiveLable"
:data="chartData"
:time="formState.time"
/>
</div>
</template>
</Card> </Card>
<FormDrawer @register="registerDrawer" @success="handleSuccess" /> <FormDrawer @register="registerDrawer" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
@ -149,6 +156,7 @@
RangePicker, RangePicker,
Button, Button,
message, message,
Empty,
} from 'ant-design-vue' } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue' import type { FormInstance } from 'ant-design-vue'
const RadioButton = Radio.Button const RadioButton = Radio.Button
@ -167,7 +175,7 @@
// 预警数量 // 预警数量
const earlyNums = ref<any>({}) const earlyNums = ref<any>({})
// 选中 // 选中
const activeKey = ref('conductivity') const activeKey = ref('chlorine')
interface EarlyWarningItem { interface EarlyWarningItem {
icon: String icon: String
title: String title: String
@ -211,6 +219,12 @@
return name1 + '-' + name2 return name1 + '-' + name2
}) })
const tagMenus = [ const tagMenus = [
{
lable: '氯',
value: 'chlorine',
icon: icon1,
icon1: uicon1,
},
{ {
lable: '电导率', lable: '电导率',
value: 'conductivity', value: 'conductivity',
@ -218,8 +232,14 @@
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '湿度', lable: '氧气',
value: 'humidity', value: 'oxygen',
icon: icon1,
icon1: uicon1,
},
{
lable: 'PH',
value: 'ph',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
@ -230,20 +250,8 @@
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '氮', lable: '浊度',
value: 'k', value: 'turbidity',
icon: icon1,
icon1: uicon1,
},
{
lable: '磷',
value: 'n',
icon: icon1,
icon1: uicon1,
},
{
lable: '钾',
value: 'p',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
@ -254,15 +262,17 @@
} }
// 获取基地数据 // 获取基地数据
const getBase = async () => { const getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 2 }) const res = await getGriculturalDeviceBasic({ device_type: 3 })
if (res.length == 0) return
baseDate.value = res baseDate.value = res
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
getPoint() getPoint()
} }
// 获取监控点数据 // 获取监控点数据
const getPoint = async () => { const getPoint = async () => {
if (baseDate.value.length == 0) return
const res = await getaGriculturalDevicePoint({ const res = await getaGriculturalDevicePoint({
device_type: 2, device_type: 3,
agricultural_basic: formState.base_id, agricultural_basic: formState.base_id,
}) })
pointDate.value = formatDataByObject(res) pointDate.value = formatDataByObject(res)