添加概况
parent
7631bd8fee
commit
92255d636a
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<view>
|
||||
<LiveVideo
|
||||
v-if="address"
|
||||
:key="address"
|
||||
:url="address"
|
||||
:type="type"
|
||||
></LiveVideo>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { http } from '@/api/index.js'
|
||||
import LiveVideo from '@/components/live-video/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
LiveVideo,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
address: '',
|
||||
type: '',
|
||||
expires: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
if (!this.id) return
|
||||
try {
|
||||
const { data } = await http.get(`/api/devices/${this.id}/live`)
|
||||
const resData = data.data
|
||||
const { address, type, expires } = resData
|
||||
this.address = address
|
||||
this.type = type
|
||||
this.expires = expires
|
||||
this.reinit()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//根据剩余秒数重新执行init
|
||||
reinit() {
|
||||
if (!this.expires) return
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, this.expires * 1000)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -229,6 +229,22 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
},{
|
||||
"path" : "pages/basics/profile",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "基地概况",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
},{
|
||||
"path" : "pages/basics/profile-detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "基地详情",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
},{
|
||||
"path" : "pages/crop/town-crop",
|
||||
"style" :
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
||||
>监控</view
|
||||
>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<view class="p-20rpx space-y-20rpx">
|
||||
<VideoComp
|
||||
v-for="(item, i) in list"
|
||||
:key="i"
|
||||
:id="item.id"
|
||||
></VideoComp>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { http } from '@/api/index.js'
|
||||
import VideoComp from '@/components/live-video/index1.vue'
|
||||
export default {
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VideoComp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
try {
|
||||
const { data } = await http.get('/api/devices', {
|
||||
params: {
|
||||
base_id: this.baseId,
|
||||
type: 1,
|
||||
status: 1,
|
||||
},
|
||||
})
|
||||
const resData = data.data
|
||||
this.list = resData
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx">{{
|
||||
name
|
||||
}}</view>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<qiun-data-charts
|
||||
:loadingType="loadingType"
|
||||
:type="type"
|
||||
:opts="opts"
|
||||
:chartData="chartData"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import { http } from '@/api/index.js'
|
||||
export default {
|
||||
name: 'BaseChat',
|
||||
props: {
|
||||
name: {
|
||||
type: [String],
|
||||
},
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
cropId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
type: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
components: { QiunDataCharts },
|
||||
data() {
|
||||
return {
|
||||
loadingType: 1,
|
||||
opts: {
|
||||
dataLabel: false, //显示数据
|
||||
padding: [20, 10, 0, 10],
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
},
|
||||
area: {
|
||||
type: 'curve',
|
||||
opacity: 0.9,
|
||||
addLine: true,
|
||||
gradient: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
chartData: {
|
||||
categories: [],
|
||||
series: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
http
|
||||
.get('/api/crop-yield-quarter-statics', {
|
||||
params: {
|
||||
crop_id: this.cropId,
|
||||
base_id: this.baseId,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
const resData = data.data
|
||||
const options = {
|
||||
categories: [],
|
||||
series: [],
|
||||
}
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
const obj = resData[key]
|
||||
options.categories = Object.keys(obj?.list ?? [])
|
||||
options.series.push({
|
||||
name: obj.name,
|
||||
type: this.type === 'area' ? 'line' : '',
|
||||
data: Object.values(obj.list),
|
||||
//测试
|
||||
// data: Object.values(obj.list).map(
|
||||
// (e, index) => index * Math.pow(0.9, index)
|
||||
// ),
|
||||
})
|
||||
}
|
||||
}
|
||||
this.chartData = options
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
||||
>气象数据</view
|
||||
>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<view class="p-20rpx">
|
||||
<view class="grid grid-cols-3 gap-20rpx">
|
||||
<view class="text-center shadow shadow-sm py-10rpx" v-for="item in list" :key="item.key">
|
||||
<view>{{ item.label }}</view>
|
||||
<view>
|
||||
<text class="text-34rpx">{{ item.value }}</text>
|
||||
<text class="ml-1">{{ item.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { http } from '@/api/index.js'
|
||||
const defaultList = [
|
||||
{
|
||||
label: '空气温度',
|
||||
value: 0,
|
||||
unit: '℃',
|
||||
key: 'air_temperature',
|
||||
},
|
||||
{
|
||||
label: '空气湿度',
|
||||
value: 0,
|
||||
unit: '%',
|
||||
key: 'air_humidity',
|
||||
},
|
||||
{
|
||||
label: '光照强度',
|
||||
value: 0,
|
||||
unit: 'lux',
|
||||
key: 'illumination',
|
||||
},
|
||||
{
|
||||
label: '降雨量',
|
||||
value: 0,
|
||||
unit: 'mm',
|
||||
key: 'current_rainfall',
|
||||
},
|
||||
{
|
||||
label: '风速',
|
||||
value: 0,
|
||||
unit: 'm/s',
|
||||
key: 'wind_speed',
|
||||
},
|
||||
{
|
||||
label: '大气压力',
|
||||
value: 0,
|
||||
unit: 'Kpa',
|
||||
key: 'air_pressure',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: defaultList,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
http
|
||||
.get('/api/devices', {
|
||||
params: {
|
||||
base_id: this.baseId,
|
||||
type: 4,
|
||||
status: 1,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
const resData = data.data
|
||||
if (resData.length) {
|
||||
this.getData(resData[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
async getData(device) {
|
||||
try {
|
||||
const { data } = await http.get('/api/device-data-statics', {
|
||||
params: {
|
||||
device_id: device.id,
|
||||
},
|
||||
})
|
||||
const resData = data?.data?.list ?? {}
|
||||
this.list.forEach(
|
||||
(e) => (e.value = parseFloat(resData[e.key]).toFixed(0) ?? 0)
|
||||
)
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
||||
>设备运行状态</view
|
||||
>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<view class="p-20rpx">
|
||||
<view class="grid grid-cols-2 gap-20rpx">
|
||||
<sbztItem v-for="(item, i) in list" :key="i" :data="item"></sbztItem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import sbztItem from './sbzt-item.vue'
|
||||
import { http } from '@/api/index.js'
|
||||
import d01 from '@/static/img/01.png'
|
||||
import d02 from '@/static/img/02.png'
|
||||
import d03 from '@/static/img/03.png'
|
||||
import d04 from '@/static/img/04.png'
|
||||
import d05 from '@/static/img/05.png'
|
||||
|
||||
const defaultDevice = [
|
||||
{
|
||||
name: 'AI智能监控',
|
||||
value: [0, 0, 0],
|
||||
img: d01,
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
name: '水质监测',
|
||||
value: [0, 0, 0],
|
||||
img: d02,
|
||||
key: 3,
|
||||
},
|
||||
{
|
||||
name: '土壤监测',
|
||||
value: [0, 0, 0],
|
||||
img: d03,
|
||||
key: 2,
|
||||
},
|
||||
{
|
||||
name: '气象监测',
|
||||
value: [0, 0, 0],
|
||||
img: d04,
|
||||
key: 4,
|
||||
},
|
||||
{
|
||||
name: '虫情监测',
|
||||
value: [0, 0, 0],
|
||||
img: d05,
|
||||
key: 5,
|
||||
},
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
components: {
|
||||
sbztItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: defaultDevice,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
http
|
||||
.get('/api/devices-num', {
|
||||
params: {
|
||||
base_id: this.baseId,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
const resData = data.data
|
||||
Object.keys(resData).map((e) => {
|
||||
const zindex = this.list.findIndex(({ key }) => key == e)
|
||||
|
||||
if (zindex >= 0) this.list[zindex].value = resData[e].slice(1)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="flex">
|
||||
<view>
|
||||
<image class="w-120rpx h-120rpx" src="@/static/img/01.png"></image>
|
||||
</view>
|
||||
<view class="ml-16rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="w-16rpx h-16rpx bg-hex-76E9F0"></view>
|
||||
<view class="ml-10rpx">在线</view>
|
||||
<view class="ml-10rpx text-32rpx">{{ data.value[0] }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="w-16rpx h-16rpx bg-hex-F7B379"></view>
|
||||
<view class="ml-10rpx">离线</view>
|
||||
<view class="ml-10rpx text-32rpx">{{ data.value[0] }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="w-16rpx h-16rpx bg-hex-EB313E"></view>
|
||||
<view class="ml-10rpx">故障</view>
|
||||
<view class="ml-10rpx text-32rpx">{{ data.value[0] }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-30rpx">{{ data.name }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
||||
>水质监测数据</view
|
||||
>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<view class="py-20rpx">
|
||||
<qiun-data-charts
|
||||
:loadingType="loadingType"
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chartData"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import { http } from '@/api/index.js'
|
||||
export default {
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
components: { QiunDataCharts },
|
||||
data() {
|
||||
return {
|
||||
loadingType: 1,
|
||||
opts: {
|
||||
dataLabel: false, //显示数据
|
||||
padding: [20, 10, 0, 10],
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
},
|
||||
area: {
|
||||
type: 'curve',
|
||||
opacity: 0.9,
|
||||
addLine: true,
|
||||
gradient: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
chartData: {
|
||||
categories: [],
|
||||
series: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
try {
|
||||
const { data } = await http.get('/api/device-base-data-statics', {
|
||||
params: {
|
||||
base_id: this.baseId,
|
||||
device_type: 3,
|
||||
},
|
||||
})
|
||||
const resData = data.data
|
||||
const arr = []
|
||||
const options = {
|
||||
categories: [],
|
||||
series: [],
|
||||
}
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
options.categories = Object.keys(resData[key]).map((e) =>
|
||||
this.$u.date(e, 'hh:MM')
|
||||
)
|
||||
options.series.push({
|
||||
name: key,
|
||||
type: 'line',
|
||||
data: Object.values(resData[key]).map((e) => e ?? 0),
|
||||
})
|
||||
}
|
||||
}
|
||||
this.chartData = options
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<view class="px-20rpx">
|
||||
<view class="bg-white">
|
||||
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
||||
>土壤监测数据</view
|
||||
>
|
||||
<view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<view class="py-20rpx">
|
||||
<qiun-data-charts
|
||||
:loadingType="loadingType"
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chartData"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import { http } from '@/api/index.js'
|
||||
const desList = [
|
||||
{
|
||||
key: 'temperature',
|
||||
unit: ' ℃',
|
||||
name: '温度',
|
||||
},
|
||||
{
|
||||
key: 'conductivity',
|
||||
unit: 'us/cm',
|
||||
name: '电导率 ',
|
||||
},
|
||||
{
|
||||
key: 'humidity',
|
||||
unit: '%',
|
||||
name: '湿度',
|
||||
},
|
||||
{
|
||||
key: 'n',
|
||||
unit: 'mg/kg',
|
||||
name: '氮',
|
||||
},
|
||||
{
|
||||
key: 'p',
|
||||
unit: 'mg/kg',
|
||||
name: '磷',
|
||||
},
|
||||
{
|
||||
key: 'k',
|
||||
unit: 'mg/kg',
|
||||
name: '钾',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
baseId: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
components: { QiunDataCharts },
|
||||
data() {
|
||||
return {
|
||||
loadingType: 1,
|
||||
opts: {
|
||||
dataLabel: false, //显示数据
|
||||
padding: [20, 10, 0, 10],
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
},
|
||||
area: {
|
||||
type: 'curve',
|
||||
opacity: 0.9,
|
||||
addLine: true,
|
||||
gradient: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
chartData: {
|
||||
categories: [],
|
||||
series: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
try {
|
||||
const { data } = await http.get('/api/device-base-data-statics', {
|
||||
params: {
|
||||
base_id: this.baseId,
|
||||
device_type: 2,
|
||||
},
|
||||
})
|
||||
const resData = data.data
|
||||
const arr = []
|
||||
const options = {
|
||||
categories: [],
|
||||
series: [],
|
||||
}
|
||||
for (const key in resData) {
|
||||
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
||||
options.categories = Object.keys(resData[key]).map((e) =>
|
||||
this.$u.date(e, 'hh:MM')
|
||||
)
|
||||
options.series.push({
|
||||
name: key,
|
||||
type: 'line',
|
||||
data: Object.values(resData[key]).map((e) => e ?? 0),
|
||||
})
|
||||
}
|
||||
}
|
||||
this.chartData = options
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<view>
|
||||
<Appbar :show="showAppbar" :title="title"> </Appbar>
|
||||
<view class="space-y-20rpx">
|
||||
<BaseChat
|
||||
:baseId="id"
|
||||
:cropId="item.id"
|
||||
v-for="(item, i) in crops"
|
||||
:key="item.id"
|
||||
:name="item.name"
|
||||
:type="i % 2 === 0 ? 'line' : 'column'"
|
||||
></BaseChat>
|
||||
<SBYXZT v-if="isSB" :baseId="id"></SBYXZT>
|
||||
<QXSJ v-if="isQX" :baseId="id"></QXSJ>
|
||||
<SZJC v-if="isSZ" :baseId="id"></SZJC>
|
||||
<TRJC v-if="isTR" :baseId="id"></TRJC>
|
||||
<JK v-if="isJK" :baseId="id"></JK>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Appbar from '@/components/Appbar'
|
||||
import { http } from '@/api/index.js'
|
||||
import BaseChat from './components/base-chat.vue'
|
||||
import SBYXZT from './components/sbyxzt.vue'
|
||||
import QXSJ from './components/qxsj.vue'
|
||||
import TRJC from './components/trjc.vue'
|
||||
import JK from './components/JK.vue'
|
||||
import SZJC from './components/szjc.vue'
|
||||
export default {
|
||||
components: {
|
||||
Appbar,
|
||||
BaseChat,
|
||||
SBYXZT,
|
||||
QXSJ,
|
||||
TRJC,
|
||||
SZJC,
|
||||
JK
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
devices: [],
|
||||
crops: [],
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isJK(){
|
||||
return this.devices.findIndex((e) => e.type == '监控设备') >= 0
|
||||
},
|
||||
isTR(){
|
||||
return this.devices.findIndex((e) => e.type == '土壤设备') >= 0
|
||||
},
|
||||
isQX(){
|
||||
return this.devices.findIndex((e) => e.type == '气象设备') >= 0
|
||||
},
|
||||
isSZ(){
|
||||
return this.devices.findIndex((e) => e.type == '水质设备') >= 0
|
||||
},
|
||||
isSB(){
|
||||
return this.devices.length > 0
|
||||
}
|
||||
},
|
||||
onLoad({ id }) {
|
||||
this.id = id
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.id) return
|
||||
http.get(`/api/agricultural-basic/${this.id}`).then(({ data }) => {
|
||||
const { crops, devices, name } = data.data
|
||||
this.title = name
|
||||
this.devices = devices
|
||||
console.log(this.devices);
|
||||
this.crops = crops
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<view>
|
||||
<Appbar :show="showAppbar" title="基地数据"> </Appbar>
|
||||
<u-sticky>
|
||||
<view class="bg-white">
|
||||
<SearchForm
|
||||
:schemas="searchFormSchema"
|
||||
@submit="handleSubmit"
|
||||
></SearchForm>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<mescroll-body
|
||||
@init="mescrollInit"
|
||||
@up="upCallback"
|
||||
:up="upOption"
|
||||
:down="downOption"
|
||||
>
|
||||
<view>
|
||||
<u-swipe-action
|
||||
v-for="(item, i) in dataList"
|
||||
:show="item.show"
|
||||
:index="i"
|
||||
:key="item.id"
|
||||
class="my-20rpx mx-30rpx rounded-md overflow-hidden"
|
||||
:options="options"
|
||||
@click="handleClick"
|
||||
@content-click="handleContentClick"
|
||||
>
|
||||
<view>
|
||||
<view class="bg-white p-20rpx">
|
||||
<view>基地名称：{{ item.name }} </view>
|
||||
<view>农业类型：{{ item.industry_label }}</view>
|
||||
<view class="my-12rpx">
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
|
||||
<view class="grid grid-cols-3">
|
||||
<view class="text-center">基地面积</view>
|
||||
<view class="text-center">种养殖面积</view>
|
||||
<view class="text-center">就业人数</view>
|
||||
</view>
|
||||
<view class="grid grid-cols-3">
|
||||
<view class="text-center">{{ item.areas }}</view>
|
||||
<view class="text-center">{{ item.cultivated }}</view>
|
||||
<view class="text-center">{{ item.workforce }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Appbar from '@/components/Appbar'
|
||||
import SearchForm from '@/components/search-form'
|
||||
import { http } from '@/api/index.js'
|
||||
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
|
||||
import cuPopup from '@/components/cu-popup/index.vue'
|
||||
import BaseTablePopup from '@/components/base-table/popup.vue'
|
||||
import BasicsEdit from './components/basics-edit.vue'
|
||||
import checkPermission from '@/utils/permission.js'
|
||||
const baseTableColums = [
|
||||
{
|
||||
title: '基地名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '农业类型',
|
||||
dataIndex: 'industry_label',
|
||||
},
|
||||
{
|
||||
title: '是否外部链接',
|
||||
dataIndex: 'is_blank',
|
||||
format: (text) => {
|
||||
return text ? '是' : '否'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '基地负责人',
|
||||
dataIndex: 'person',
|
||||
},
|
||||
{
|
||||
title: '基地农作物',
|
||||
dataIndex: 'crops',
|
||||
format: (arr) => {
|
||||
return arr?.map((e) => e.name).join(',') ?? ''
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '基地经度',
|
||||
dataIndex: 'address_lng',
|
||||
},
|
||||
{
|
||||
title: '基地纬度',
|
||||
dataIndex: 'address_lat',
|
||||
},
|
||||
{
|
||||
title: '基地地址',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '基地面积',
|
||||
dataIndex: 'areas',
|
||||
},
|
||||
{
|
||||
title: '种养殖面积',
|
||||
dataIndex: 'cultivated',
|
||||
},
|
||||
{
|
||||
title: '基地就业人数',
|
||||
dataIndex: 'workforce',
|
||||
},
|
||||
{
|
||||
title: '基地描述',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: {
|
||||
SearchForm,
|
||||
Appbar,
|
||||
cuPopup,
|
||||
BaseTablePopup,
|
||||
BasicsEdit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
baseTableColums,
|
||||
currentData: null,
|
||||
filterParmas: {},
|
||||
downOption: {
|
||||
use: false,
|
||||
},
|
||||
upOption: {
|
||||
auto: false,
|
||||
page: {
|
||||
size: 20,
|
||||
},
|
||||
},
|
||||
dataList: [],
|
||||
|
||||
formShow: false,
|
||||
baseShow: false,
|
||||
searchFormSchema: [
|
||||
{
|
||||
field: 'name',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
label: '农业类型',
|
||||
component: 'ApiSelect',
|
||||
componentProps: ({ formActionType }) => {
|
||||
return {
|
||||
api: async (e) => {
|
||||
const { data } = await http.get('/api/keywords-industry', {
|
||||
params: e,
|
||||
})
|
||||
return data.data
|
||||
},
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return [
|
||||
|
||||
].filter((e) => checkPermission(e.permission))
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
this.filterParmas = e
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
upCallback({ num, size }) {
|
||||
this.getData({
|
||||
...this.filterParmas,
|
||||
page: num,
|
||||
per_page: size,
|
||||
type: 1,
|
||||
})
|
||||
},
|
||||
async getData(e) {
|
||||
try {
|
||||
const { data } = await http.get(`/api/agricultural-basic`, {
|
||||
params: e,
|
||||
})
|
||||
if (e.page == 1) this.dataList = []
|
||||
const { data: list, meta } = data
|
||||
this.dataList = this.dataList.concat(
|
||||
list.map((e) => Object.assign({ show: false }, e))
|
||||
)
|
||||
this.mescroll.endByPage(list.length, meta.total)
|
||||
} catch (error) {
|
||||
this.mescroll.endErr()
|
||||
}
|
||||
},
|
||||
handleClick(index1, index) {
|
||||
const { opt } = this.options[index]
|
||||
const item = this.dataList[index1]
|
||||
this.currentData = item
|
||||
if (opt == 'edit') {
|
||||
this.handleEdit(item)
|
||||
} else if (opt == 'delete') {
|
||||
this.handleDel(item)
|
||||
}
|
||||
},
|
||||
handleContentClick(e) {
|
||||
this.currentData = this.dataList[e]
|
||||
uni.navigateTo({
|
||||
url: `/pages/basics/profile-detail?id=${this.currentData.id}`,
|
||||
})
|
||||
// this.baseShow = true
|
||||
},
|
||||
handleEdit(item) {
|
||||
this.currentData = item
|
||||
this.formShow = true
|
||||
this.baseShow = false
|
||||
},
|
||||
async handleDel(item) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否确定删除？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await this.$http.delete(`/api/agricultural-basic/${item.id}`)
|
||||
this.mescroll.resetUpScroll()
|
||||
this.baseShow = false
|
||||
} catch ({ data }) {
|
||||
this.$u.toast(data.message)
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
async handleCreate() {
|
||||
this.currentData = null
|
||||
this.formShow = true
|
||||
this.baseShow = false
|
||||
},
|
||||
handleEditConfirm() {
|
||||
this.mescroll.resetUpScroll()
|
||||
this.formShow = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -91,6 +91,11 @@ export default {
|
|||
url: '/pages/basics/basics-base',
|
||||
permission: 'endpoint.agricultural_basic.index',
|
||||
},
|
||||
{
|
||||
label: '基地概况',
|
||||
url: '/pages/basics/profile',
|
||||
permission: 'super',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -139,7 +139,8 @@
|
|||
<view class="video_cd">
|
||||
<!-- #ifdef H5 -->
|
||||
<!-- {{ video.video_url }} -->
|
||||
<LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
|
||||
<LiveVideo :id="video.id"></LiveVideo>
|
||||
<!-- <LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo> -->
|
||||
<!-- <videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
|
||||
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
|
||||
<!-- #endif -->
|
||||
|
|
@ -168,7 +169,8 @@
|
|||
>
|
||||
<view class="video_cd">
|
||||
<!-- #ifdef H5 -->
|
||||
<LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
|
||||
<LiveVideo :id="video.id"></LiveVideo>
|
||||
<!-- <LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo> -->
|
||||
<!-- <videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
|
||||
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
|
||||
<!-- #endif -->
|
||||
|
|
@ -203,7 +205,7 @@
|
|||
<script>
|
||||
import videoFlvH5 from '@/components/video-flv-h5/video-flv-h5.vue'
|
||||
import videoM3u8H5 from '@/components/video-m3u8-h5/video-m3u8-h5.vue'
|
||||
import LiveVideo from '@/components/live-video/index.vue'
|
||||
import LiveVideo from '@/components/live-video/index1.vue'
|
||||
import Request from '@/api/luch-request/index.js'
|
||||
const http = new Request()
|
||||
export default {
|
||||
|
|
@ -371,25 +373,25 @@ export default {
|
|||
.catch((err) => {})
|
||||
},
|
||||
async queryWebsocketIp() {
|
||||
let params = {
|
||||
_t: new Date().getTime(),
|
||||
}
|
||||
const { data } = await this.$http.get('/api/ffmpeg-websocket-ip', {
|
||||
params: params,
|
||||
})
|
||||
try {
|
||||
console.log(data, 'queryWebsocketIp')
|
||||
if (data.code == 200) {
|
||||
this.websocket = data.data
|
||||
let url = `${this.websocket.ssl?'wss':'ws'}://${this.websocket.host?this.websocket.host:this.websocket.ip+':'+this.websocket.port}`
|
||||
this.websocket.url = url
|
||||
// this.websocket.ip = 'lcny-rtsp.peidikeji.cn'
|
||||
// console.log(this.websocket);
|
||||
// this.websocket.id='lcny-rtsp.peidikeji.cn'
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
// let params = {
|
||||
// _t: new Date().getTime(),
|
||||
// }
|
||||
// const { data } = await this.$http.get('/api/ffmpeg-websocket-ip', {
|
||||
// params: params,
|
||||
// })
|
||||
// try {
|
||||
// console.log(data, 'queryWebsocketIp')
|
||||
// if (data.code == 200) {
|
||||
// this.websocket = data.data
|
||||
// let url = `${this.websocket.ssl?'wss':'ws'}://${this.websocket.host?this.websocket.host:this.websocket.ip+':'+this.websocket.port}`
|
||||
// this.websocket.url = url
|
||||
// // this.websocket.ip = 'lcny-rtsp.peidikeji.cn'
|
||||
// // console.log(this.websocket);
|
||||
// // this.websocket.id='lcny-rtsp.peidikeji.cn'
|
||||
// }
|
||||
// } catch (e) {
|
||||
// //TODO handle the exception
|
||||
// }
|
||||
this.queryDeviceBasics('init')
|
||||
},
|
||||
//查询监测
|
||||
|
|
@ -423,35 +425,34 @@ export default {
|
|||
if (type != 'more') {
|
||||
this.videoList = []
|
||||
}
|
||||
console.log(data, '监测视频')
|
||||
if (data.code == 200) {
|
||||
let list = data.data
|
||||
for (let item of list) {
|
||||
let url = item.extends.rtsp_url
|
||||
let { ip, port ,url:uri} = this.websocket
|
||||
// let url = item.extends.rtsp_url
|
||||
// let { ip, port ,url:uri} = this.websocket
|
||||
// ip='lcny-rtsp.peidikeji.cn'
|
||||
if (url) {
|
||||
item.video_url = `${uri}/rtsp?url=${window.btoa(
|
||||
url
|
||||
)}`
|
||||
}
|
||||
const { supplier, extends: extend, sn } = item
|
||||
// if (url) {
|
||||
// item.video_url = `${uri}/rtsp?url=${window.btoa(
|
||||
// url
|
||||
// )}`
|
||||
// }
|
||||
// const { supplier, extends: extend, sn } = item
|
||||
|
||||
if (item.supplier.id == 'device-supplier-biang') {
|
||||
const { data } = await http.get(
|
||||
'https://yun.bigdata5s.com/api/open-api/open/getSeedingLive',
|
||||
{
|
||||
params: {
|
||||
username: extend.username,
|
||||
password: extend.password,
|
||||
equipmentCode: sn,
|
||||
channelNo: extend.passage,
|
||||
},
|
||||
}
|
||||
)
|
||||
item.video_url = data.data
|
||||
item.video_type = 'm3u8'
|
||||
}
|
||||
// if (item.supplier.id == 'device-supplier-biang') {
|
||||
// const { data } = await http.get(
|
||||
// 'https://yun.bigdata5s.com/api/open-api/open/getSeedingLive',
|
||||
// {
|
||||
// params: {
|
||||
// username: extend.username,
|
||||
// password: extend.password,
|
||||
// equipmentCode: sn,
|
||||
// channelNo: extend.passage,
|
||||
// },
|
||||
// }
|
||||
// )
|
||||
// item.video_url = data.data
|
||||
// item.video_type = 'm3u8'
|
||||
// }
|
||||
|
||||
item.bl_recommend = item.is_recommend == 1 ? true : false
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Loading…
Reference in New Issue