This commit is contained in:
parent
67be65ccde
commit
8bb3f21f7f
|
@ -1 +1,2 @@
|
||||||
VITE_BASE_URL = 'https://ceshi-suyuan-breed.lihaink.cn'
|
# VITE_BASE_URL = 'https://ceshi-suyuan-breed.lihaink.cn'
|
||||||
|
VITE_BASE_URL = 'https://suyuan-breed.lihaink.cn'
|
|
@ -29,9 +29,10 @@ export const useAppStore = defineStore('app', () => {
|
||||||
area.value = data;
|
area.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
const street = ref([]);
|
const street = ref(JSON.parse(localStorage.getItem('streetList')||'[]'));
|
||||||
const setStreet = (data) => {
|
const setStreet = (data) => {
|
||||||
street.value = data;
|
street.value = data;
|
||||||
|
localStorage.setItem('streetList', JSON.stringify(street.value));
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -21,8 +21,9 @@ const initDeviceCount = ()=>{
|
||||||
id: route.query.id || undefined
|
id: route.query.id || undefined
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
Object.keys(leftInfo.value).forEach(key=>{
|
Object.keys(leftInfo.value).forEach(key=>{
|
||||||
if(res.data[key]) leftInfo.value[key] = res.data[key];
|
if(res.data[key]) leftInfo.value[key] = +res.data[key];
|
||||||
})
|
})
|
||||||
|
leftInfo.value.alarmCount = Math.floor(leftInfo.value.alarmCount/100);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import { getFarmInfo } from "@/api/api.js"
|
import { getFarmInfo, getfarmCount } from "@/api/api.js";
|
||||||
import * as echarts from "echarts"
|
import * as echarts from "echarts";
|
||||||
import videoFlv from "@/components/videoFlv.vue";
|
import videoFlv from "@/components/videoFlv.vue";
|
||||||
import { useAppStore } from "@/store/app.js";
|
import { useAppStore } from "@/store/app.js";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
@ -10,9 +10,9 @@ const appStore = useAppStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
const circleRef = ref(null);
|
const circleRef = ref(null);
|
||||||
const initCircle = () => {
|
const initCircle = async () => {
|
||||||
const echart = echarts.init(circleRef.value);
|
const echart = echarts.init(circleRef.value);
|
||||||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
let color = ["#00A8FF", "#4B5FDB", "#00FFCB", "#5BDBF6"];
|
||||||
|
|
||||||
// let data = [
|
// let data = [
|
||||||
// { value: 400, name: '本地鸡' },
|
// { value: 400, name: '本地鸡' },
|
||||||
|
@ -20,29 +20,34 @@ const initCircle = () => {
|
||||||
// { value: 580, name: '鹅' },
|
// { value: 580, name: '鹅' },
|
||||||
// { value: 884, name: '猪' },
|
// { value: 884, name: '猪' },
|
||||||
// ]
|
// ]
|
||||||
let data = breedTypeRows.value.map(item=>{
|
|
||||||
|
|
||||||
|
let data = breedTypeRows.value.map((item) => {
|
||||||
|
let value = farmList.value.reduce((count, t) => {
|
||||||
|
return item.value == t.breed_type ? count + t.animal_count : count + 0;
|
||||||
|
}, 0);
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
value: item.animalCount
|
value: value,
|
||||||
}
|
};
|
||||||
});
|
});
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
backgroundColor: "rgba(0, 156, 255, 0.6)", //设置背景颜色
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: "#fff",
|
||||||
},
|
},
|
||||||
borderColor: "rgba(0, 156, 255, 1)",
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: "shadow",
|
||||||
shadowStyle: {
|
shadowStyle: {
|
||||||
color: 'rgba(255,255,255, .2)',
|
color: "rgba(255,255,255, .2)",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.data.name + ': ' + params.data.value;
|
return params.data.name + ": " + params.data.value;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
color: color,
|
color: color,
|
||||||
legend: {
|
legend: {
|
||||||
|
@ -52,57 +57,57 @@ const initCircle = () => {
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
bottom: "5%",
|
bottom: "5%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return '种类: ' + params;
|
return "种类: " + params;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Access From',
|
name: "Access From",
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
radius: ['40%', '70%'],
|
radius: ["40%", "70%"],
|
||||||
center: ['50%', '40%'], // 设置左半部分饼图的位置
|
center: ["50%", "40%"], // 设置左半部分饼图的位置
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: "center",
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
data: data
|
data: data,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
echart.setOption(option)
|
echart.setOption(option);
|
||||||
}
|
};
|
||||||
|
|
||||||
const chartRef = ref(null)
|
const chartRef = ref(null);
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
const echart = echarts.init(chartRef.value);
|
const echart = echarts.init(chartRef.value);
|
||||||
const basicColors = [
|
const basicColors = [
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB'],
|
["#00A8FF", "#2A7FEB"],
|
||||||
['#00A8FF', '#2A7FEB']
|
["#00A8FF", "#2A7FEB"],
|
||||||
]
|
];
|
||||||
// 生成渐变色
|
// 生成渐变色
|
||||||
function genLinearGradient (colors) {
|
function genLinearGradient(colors) {
|
||||||
const color = {
|
const color = {
|
||||||
type: 'linear',
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
x2: 1,
|
x2: 1,
|
||||||
|
@ -110,159 +115,166 @@ const initMap = () => {
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: colors[0] // 0%处的颜色
|
color: colors[0], // 0%处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: colors[1] // 100%处的颜色
|
color: colors[1], // 100%处的颜色
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
global: false
|
global: false,
|
||||||
}
|
};
|
||||||
return color
|
return color;
|
||||||
}
|
}
|
||||||
|
|
||||||
let dataText = [];
|
let dataText = [];
|
||||||
let dataValue = [];
|
let dataValue = [];
|
||||||
|
|
||||||
breedTypeRows.value.forEach(item=>{
|
breedTypeRows.value.forEach((item) => {
|
||||||
|
let value = farmList.value.reduce((count, t) => {
|
||||||
|
return item.value == t.breed_type ? count + t.animal_count : count + 0;
|
||||||
|
}, 0);
|
||||||
dataText.push(item.name);
|
dataText.push(item.name);
|
||||||
dataValue.push(item.animalCount);
|
dataValue.push(value);
|
||||||
})
|
});
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
grid: {
|
grid: {
|
||||||
left: '12%',
|
left: "12%",
|
||||||
top: '5%',
|
top: "5%",
|
||||||
bottom: '12%',
|
bottom: "12%",
|
||||||
right: '0%'
|
right: "0%",
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
backgroundColor: "rgba(0, 156, 255, 0.6)", //设置背景颜色
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: "#fff",
|
||||||
},
|
},
|
||||||
borderColor: "rgba(0, 156, 255, 1)",
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: "shadow",
|
||||||
shadowStyle: {
|
shadowStyle: {
|
||||||
color: 'rgba(255,255,255, .2)',
|
color: "rgba(255,255,255, .2)",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
let str = "";
|
let str = "";
|
||||||
for (let i = 0; i < params.length; i++) {
|
for (let i = 0; i < params.length; i++) {
|
||||||
if (params[i].seriesName !== "") {
|
if (params[i].seriesName !== "") {
|
||||||
str +=
|
str += params[i].name + ": " + params[i].value + "<br/>";
|
||||||
params[i].name +
|
|
||||||
': ' +
|
|
||||||
params[i].value +
|
|
||||||
"<br/>";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: dataText,
|
data: dataText,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.3)',
|
color: "rgba(255,255,255,0.3)",
|
||||||
width: 1 // 这里是为了突出显示加上的
|
width: 1, // 这里是为了突出显示加上的
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
fontSize: 12
|
fontSize: 12,
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
yAxis: [{
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
splitNumber: 2,
|
splitNumber: 2,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.3)',
|
color: "rgba(255,255,255,0.3)",
|
||||||
width: 1 // 这里是为了突出显示加上的
|
width: 1, // 这里是为了突出显示加上的
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: "#fff",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: 'rgba(255,255,255,.5)'
|
color: "rgba(255,255,255,.5)",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255, 0.5)',
|
color: "rgba(255,255,255, 0.5)",
|
||||||
width: 0.5,
|
width: 0.5,
|
||||||
type: 'dashed'
|
type: "dashed",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'hill',
|
name: "hill",
|
||||||
type: 'pictorialBar',
|
type: "pictorialBar",
|
||||||
barCategoryGap: '0%',
|
barCategoryGap: "0%",
|
||||||
symbol: 'path://M0,10 L10,10 C5.5,8 5.5,5 5,0 C4.5,5 4.5,8 0,10 z',
|
symbol: "path://M0,10 L10,10 C5.5,8 5.5,5 5,0 C4.5,5 4.5,8 0,10 z",
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'top',
|
position: "top",
|
||||||
distance: 15,
|
distance: 15,
|
||||||
color: '#FFF6B7',
|
color: "#FFF6B7",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: function (params) {
|
color: function (params) {
|
||||||
return genLinearGradient(basicColors[params.dataIndex])
|
return genLinearGradient(basicColors[params.dataIndex]);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data: dataValue,
|
data: dataValue,
|
||||||
z: 10
|
z: 10,
|
||||||
}]
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
echart.setOption(option)
|
echart.setOption(option);
|
||||||
}
|
};
|
||||||
|
|
||||||
const farmInfo = ref({});
|
const farmInfo = ref({});
|
||||||
|
const farmList = ref([]);
|
||||||
const breedTypeRows = ref([]);
|
const breedTypeRows = ref([]);
|
||||||
const getInfo = ()=>{
|
const getInfo = () => {
|
||||||
getFarmInfo({
|
getFarmInfo({
|
||||||
areaCode: appStore.address.areaCode,
|
areaCode: appStore.address.areaCode,
|
||||||
streetCode: appStore.address.streetCode || route.query.streetCode,
|
streetCode: appStore.address.streetCode || route.query.streetCode,
|
||||||
id: route.query.id || undefined
|
id: route.query.id || undefined,
|
||||||
}).then(res=>{
|
}).then(async (res) => {
|
||||||
farmInfo.value = res.data.farmInfo;
|
farmInfo.value = res.data.farmInfo;
|
||||||
breedTypeRows.value = res.data.breedTypeRows;
|
breedTypeRows.value = res.data.breedTypeRows;
|
||||||
|
let { data } = await getfarmCount({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: appStore.address.streetCode,
|
||||||
|
});
|
||||||
|
farmList.value = data.farmList;
|
||||||
initCircle();
|
initCircle();
|
||||||
initMap();
|
initMap();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getInfo();
|
getInfo();
|
||||||
// initCircle();
|
// initCircle();
|
||||||
// initMap();
|
// initMap();
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -273,10 +285,7 @@ onMounted(() => {
|
||||||
<div class="bg"></div>
|
<div class="bg"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-box">
|
<div class="c-box">
|
||||||
<videoFlv
|
<videoFlv class="img" :url="farmInfo.video_url" />
|
||||||
class="img"
|
|
||||||
url="http://rtsp.lihaink.cn/live/xumu_user1.live.mp4"
|
|
||||||
/>
|
|
||||||
<div class="name">{{ farmInfo.farm_name }}</div>
|
<div class="name">{{ farmInfo.farm_name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,8 +20,9 @@ const initDeviceCount = ()=>{
|
||||||
streetCode: appStore.address.streetCode
|
streetCode: appStore.address.streetCode
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
Object.keys(leftInfo.value).forEach(key=>{
|
Object.keys(leftInfo.value).forEach(key=>{
|
||||||
if(res.data[key]) leftInfo.value[key] = res.data[key];
|
if(res.data[key]) leftInfo.value[key] = +res.data[key];
|
||||||
})
|
})
|
||||||
|
leftInfo.value.alarmCount = Math.floor(leftInfo.value.alarmCount/100);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,96 +1,91 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, nextTick } from "vue"
|
import { ref, reactive, onMounted, nextTick } from "vue";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from "echarts";
|
||||||
import videoFlv from "@/components/videoFlv.vue";
|
import videoFlv from "@/components/videoFlv.vue";
|
||||||
import { getfarmCount, getBreedTypeCount } from "@/api/api.js";
|
import { getfarmCount, getBreedTypeCount } from "@/api/api.js";
|
||||||
import { useAppStore } from "@/store/app.js";
|
import { useAppStore } from "@/store/app.js";
|
||||||
import { useDictStore } from "@/store/dict.js";
|
import { useDictStore } from "@/store/dict.js";
|
||||||
import QRCode from 'qrcode';
|
import QRCode from "qrcode";
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const dictStore = useDictStore();
|
const dictStore = useDictStore();
|
||||||
|
|
||||||
const farmInfo = ref({
|
const farmInfo = ref({
|
||||||
farmCount: 0,
|
farmCount: 0,
|
||||||
totalScale: 0
|
totalScale: 0,
|
||||||
});
|
});
|
||||||
const farmList = ref([{},{},{},{}]);
|
const farmList = ref([{}, {}, {}, {}]);
|
||||||
const initFarmCount = ()=>{
|
const initFarmCount = () => {
|
||||||
getfarmCount({
|
getfarmCount({
|
||||||
areaCode: appStore.address.areaCode,
|
areaCode: appStore.address.areaCode,
|
||||||
streetCode: appStore.address.streetCode
|
streetCode: appStore.address.streetCode,
|
||||||
}).then((res)=>{
|
}).then((res) => {
|
||||||
farmInfo.value.farmCount = res.data.farmCount;
|
farmInfo.value.farmCount = res.data.farmCount;
|
||||||
farmInfo.value.totalScale = res.data.totalScale;
|
farmInfo.value.totalScale = res.data.totalScale;
|
||||||
farmList.value = res.data.farmList;
|
farmList.value = res.data.farmList;
|
||||||
initData();
|
initData();
|
||||||
})
|
initBreedTypeCount();
|
||||||
}
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const breedTypeRows = ref([]);
|
const breedTypeRows = ref([]);
|
||||||
const animalList = ref([]);
|
const animalList = ref([]);
|
||||||
const initBreedTypeCount = ()=>{
|
const initBreedTypeCount = () => {
|
||||||
getBreedTypeCount({
|
getBreedTypeCount({
|
||||||
areaCode: appStore.address.areaCode,
|
areaCode: appStore.address.areaCode,
|
||||||
streetCode: appStore.address.streetCode
|
streetCode: appStore.address.streetCode,
|
||||||
}).then((res)=>{
|
}).then((res) => {
|
||||||
breedTypeRows.value = res.data.breedTypeRows;
|
breedTypeRows.value = res.data.breedTypeRows;
|
||||||
initMap();
|
initMap();
|
||||||
let randomNumber = 0;
|
let randomNumber = 0;
|
||||||
if(res.data.animalList.length>6) randomNumber = Math.floor(Math.random() * (res.data.animalList.length-6));
|
// if(res.data.animalList.length>6) randomNumber = Math.floor(Math.random() * (res.data.animalList.length-6));
|
||||||
animalList.value = res.data.animalList.slice(randomNumber,randomNumber+6);
|
// animalList.value = res.data.animalList.slice(randomNumber,randomNumber+6);
|
||||||
animalList.value.forEach(item=>{
|
animalList.value = res.data.animalList;
|
||||||
QRCode.toDataURL('d_' + item.sn, {
|
animalList.value.forEach((item) => {
|
||||||
margin: 1.5
|
QRCode.toDataURL("d_" + item.sn, {
|
||||||
|
margin: 1.5,
|
||||||
})
|
})
|
||||||
.then(url => {
|
.then((url) => {
|
||||||
item.qr_code_img = url;
|
item.qr_code_img = url;
|
||||||
}).catch(err => { //异常时的处理
|
|
||||||
console.error(err)
|
|
||||||
})
|
})
|
||||||
})
|
.catch((err) => {
|
||||||
})
|
//异常时的处理
|
||||||
}
|
console.error(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const initData = async (data) => {
|
const initData = async (data) => {
|
||||||
let arr = [];
|
let arr = [];
|
||||||
if(dictStore.breedTypeList.length==0) await nextTick();
|
if (dictStore.breedTypeList.length == 0) await nextTick();
|
||||||
for (let i = 0; i < farmList.value.length; i++) {
|
for (let i = 0; i < farmList.value.length; i++) {
|
||||||
let type = dictStore.breedTypeList.find(item=>item.value==farmList.value[i].farm_type);
|
let type = dictStore.breedTypeList.find(
|
||||||
arr.push(
|
(item) => item.value == farmList.value[i].breed_type
|
||||||
[
|
);
|
||||||
|
arr.push([
|
||||||
`${i + 1}`,
|
`${i + 1}`,
|
||||||
`${farmList.value[i].farm_name}`,
|
`${farmList.value[i].farm_name}`,
|
||||||
`${type?.name||'-'}`,
|
`${type?.name || "-"}`,
|
||||||
`${farmList.value[i].animal_count||'-'}`,
|
`${farmList.value[i].animal_count || "-"}`,
|
||||||
]
|
]);
|
||||||
)
|
|
||||||
}
|
}
|
||||||
list.data = arr;
|
list.data = arr;
|
||||||
scrollBoardRef.value.updateRows(list.data);
|
scrollBoardRef.value.updateRows(list.data);
|
||||||
}
|
};
|
||||||
|
|
||||||
const scrollBoardRef = ref(null);
|
const scrollBoardRef = ref(null);
|
||||||
const list = reactive({
|
const list = reactive({
|
||||||
header: [
|
header: [`序号`, `基地名称`, `养殖种类`, `养殖数量`],
|
||||||
`序号`,
|
|
||||||
`基地名称`,
|
|
||||||
`养殖种类`,
|
|
||||||
`养殖数量`,
|
|
||||||
],
|
|
||||||
data: [],
|
data: [],
|
||||||
// index: true,
|
// index: true,
|
||||||
headerBGC: '#0d599c',
|
headerBGC: "#0d599c",
|
||||||
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
oddRowBGC: "rgba(91, 219, 246, 0.10)",
|
||||||
evenRowBGC: '',
|
evenRowBGC: "",
|
||||||
columnWidth: [50],
|
columnWidth: [50],
|
||||||
align: 'center',
|
align: "center",
|
||||||
rowNum: 7
|
rowNum: 7,
|
||||||
})
|
});
|
||||||
|
|
||||||
const echarts1Ref = ref(null);
|
const echarts1Ref = ref(null);
|
||||||
const echarts2Ref = ref(null);
|
const echarts2Ref = ref(null);
|
||||||
|
@ -99,35 +94,38 @@ const initMap = () => {
|
||||||
const chart1 = echarts.init(echarts1Ref.value);
|
const chart1 = echarts.init(echarts1Ref.value);
|
||||||
// const chart2 = echarts.init(echarts2Ref.value);
|
// const chart2 = echarts.init(echarts2Ref.value);
|
||||||
|
|
||||||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
let color = ["#00A8FF", "#4B5FDB", "#00FFCB", "#5BDBF6"];
|
||||||
let data1 = breedTypeRows.value.map(item=>{
|
let data1 = breedTypeRows.value.map((item) => {
|
||||||
|
let value = farmList.value.reduce((count, t) => {
|
||||||
|
return item.value == t.breed_type ? count + t.animal_count : count + 0;
|
||||||
|
}, 0);
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
value: item.animalCount,
|
value: value,
|
||||||
id: item.value
|
id: item.value,
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
let option1 = {
|
let option1 = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: "item",
|
||||||
},
|
},
|
||||||
color: color,
|
color: color,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
backgroundColor: "rgba(0, 156, 255, 0.6)", //设置背景颜色
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: "#fff",
|
||||||
},
|
},
|
||||||
borderColor: "rgba(0, 156, 255, 1)",
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: "shadow",
|
||||||
shadowStyle: {
|
shadowStyle: {
|
||||||
color: 'rgba(255,255,255, .2)',
|
color: "rgba(255,255,255, .2)",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.data.name + ': ' + params.data.value;
|
return params.data.name + ": " + params.data.value;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
|
@ -141,49 +139,46 @@ const initMap = () => {
|
||||||
// bottom: "center",
|
// bottom: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: "0.75rem"
|
fontSize: "0.75rem",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
let total = data1.find(item=>item.name==params)?.value || 0;
|
let total = data1.find((item) => item.name == params)?.value || 0;
|
||||||
return '种类: ' + params + ' --- ' + total + '只';
|
return "种类: " + params + " --- " + total + "只";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '养殖数据',
|
name: "养殖数据",
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
radius: ['50%', '80%'],
|
radius: ["50%", "80%"],
|
||||||
center: ['20%', '50%'], // 设置左半部分饼图的位置
|
center: ["20%", "50%"], // 设置左半部分饼图的位置
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: "center",
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false,
|
||||||
},
|
},
|
||||||
data: data1
|
data: data1,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (data1.length > 0) chart1.setOption(option1);
|
||||||
if(data1.length>0) chart1.setOption(option1);
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initFarmCount();
|
initFarmCount();
|
||||||
initBreedTypeCount();
|
});
|
||||||
// initMap();
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -201,8 +196,8 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-item">
|
<div class="tab-item">
|
||||||
<img src="/src/assets/index_img/icon1.png" />
|
<img src="/src/assets/index_img/icon1.png" />
|
||||||
<div>养殖规模</div>
|
<div>占地规模</div>
|
||||||
<div class="count">{{ farmInfo.totalScale }}只</div>
|
<div class="count">{{ farmInfo.totalScale }}亩</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<dv-scroll-board
|
<dv-scroll-board
|
||||||
|
@ -222,9 +217,12 @@ onMounted(() => {
|
||||||
<videoFlv
|
<videoFlv
|
||||||
v-if="farmList[0]?.video_url"
|
v-if="farmList[0]?.video_url"
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
:url="farmList[0].video_url||''"
|
:url="farmList[0].video_url || ''"
|
||||||
/>
|
/>
|
||||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
<div
|
||||||
|
v-else
|
||||||
|
style="width: 100%; height: 100%; background-color: #0c1122"
|
||||||
|
></div>
|
||||||
<div class="title">{{ farmList[0]?.farm_name || "" }}</div>
|
<div class="title">{{ farmList[0]?.farm_name || "" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
@ -232,12 +230,17 @@ onMounted(() => {
|
||||||
<videoFlv
|
<videoFlv
|
||||||
v-if="farmList[1]?.video_url"
|
v-if="farmList[1]?.video_url"
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
:url="farmList[1].video_url||''"
|
:url="farmList[1].video_url || ''"
|
||||||
/>
|
/>
|
||||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
<div
|
||||||
<div class="title">{{ farmList[1]?.farm_name || "" }}</div>
|
v-else
|
||||||
|
style="width: 100%; height: 100%; background-color: #0c1122"
|
||||||
|
></div>
|
||||||
|
<div class="title">
|
||||||
|
{{ farmList[1]?.farm_name || "暂无更多监控" }}
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
</div>
|
||||||
|
<!-- <div class="item">
|
||||||
<videoFlv
|
<videoFlv
|
||||||
v-if="farmList[2]?.video_url"
|
v-if="farmList[2]?.video_url"
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
|
@ -254,10 +257,12 @@ onMounted(() => {
|
||||||
/>
|
/>
|
||||||
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
<div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
||||||
<div class="title">{{ farmList[3]?.farm_name || "" }}</div>
|
<div class="title">{{ farmList[3]?.farm_name || "" }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<!-- <img src="/src/assets/index_img/video.png" /> -->
|
<!-- <img src="/src/assets/index_img/video.png" /> -->
|
||||||
<div style="width: 100%; height: 100%; background-color: #0c1122;"></div>
|
<div
|
||||||
|
style="width: 100%; height: 100%; background-color: #0c1122"
|
||||||
|
></div>
|
||||||
<div class="btn" @click="show = true">查看全部</div>
|
<div class="btn" @click="show = true">查看全部</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -272,6 +277,7 @@ onMounted(() => {
|
||||||
<div ref="echarts1Ref"></div>
|
<div ref="echarts1Ref"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="qr">
|
<div class="qr">
|
||||||
|
<div class="qr-box">
|
||||||
<div class="qr_card" v-for="(item, index) in animalList" :key="index">
|
<div class="qr_card" v-for="(item, index) in animalList" :key="index">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div>品类名称: {{ item.brand }}</div>
|
<div>品类名称: {{ item.brand }}</div>
|
||||||
|
@ -281,6 +287,7 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<transition name="fade" appear>
|
<transition name="fade" appear>
|
||||||
<div class="box4" v-show="show">
|
<div class="box4" v-show="show">
|
||||||
<div class="vedio">
|
<div class="vedio">
|
||||||
|
@ -292,7 +299,7 @@ onMounted(() => {
|
||||||
<div class="item-vedio">
|
<div class="item-vedio">
|
||||||
<videoFlv
|
<videoFlv
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
:url="item.video_url||''"
|
:url="item.video_url || ''"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -386,13 +393,15 @@ onMounted(() => {
|
||||||
background-color: rgba($color: #000000, $alpha: 0.5);
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
width: calc(50% - 0.6rem);
|
/* width: calc(50% - 0.6rem); */
|
||||||
|
width: 72%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 50%;
|
/* width: 50%; */
|
||||||
|
width: 25%;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -400,7 +409,8 @@ onMounted(() => {
|
||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(50% - 0.3rem);
|
/* width: calc(50% - 0.3rem); */
|
||||||
|
width: 100%;
|
||||||
height: calc(50% - 0.3rem);
|
height: calc(50% - 0.3rem);
|
||||||
.btn {
|
.btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -420,8 +430,11 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
margin-right: 0.6rem;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
/* &:nth-child(1) {
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
} */
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
margin-right: 0.6rem;
|
margin-right: 0.6rem;
|
||||||
margin-top: 0.6rem;
|
margin-top: 0.6rem;
|
||||||
|
@ -450,8 +463,21 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
.qr {
|
.qr {
|
||||||
height: 66%;
|
height: 66%;
|
||||||
|
position: relative;
|
||||||
|
.qr-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.qr-box::-webkit-scrollbar {
|
||||||
|
display: none; /* Webkit (Safari, Chrome) 支持,隐藏滚动条 */
|
||||||
|
}
|
||||||
|
|
||||||
.qr_card {
|
.qr_card {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 33%;
|
height: 33%;
|
||||||
|
|
|
@ -363,10 +363,12 @@ const mapInfo = async () => {
|
||||||
if (area.name == "合江县") map = hejiang_geo;
|
if (area.name == "合江县") map = hejiang_geo;
|
||||||
if (area.name == "古蔺县") map = gulin_geo;
|
if (area.name == "古蔺县") map = gulin_geo;
|
||||||
map = JSON.parse(JSON.stringify(map));
|
map = JSON.parse(JSON.stringify(map));
|
||||||
|
|
||||||
if (appStore.address.streetCode) {
|
if (appStore.address.streetCode) {
|
||||||
let street = appStore.street.find(
|
let street = appStore.street.find(
|
||||||
(item) => item.code == appStore.address.streetCode
|
(item) => item.code == appStore.address.streetCode
|
||||||
);
|
);
|
||||||
|
console.error('##', appStore.street, appStore.address.streetCode);
|
||||||
initStreetMap(street, map);
|
initStreetMap(street, map);
|
||||||
// dataValue = dataValue.filter(
|
// dataValue = dataValue.filter(
|
||||||
// (item) => item.street_code == appStore.address.streetCode
|
// (item) => item.street_code == appStore.address.streetCode
|
||||||
|
@ -394,9 +396,7 @@ const filterMap = () => {
|
||||||
|
|
||||||
const initFarmCount = () => {
|
const initFarmCount = () => {
|
||||||
mapInfo();
|
mapInfo();
|
||||||
setTimeout(() => {
|
|
||||||
initMap();
|
initMap();
|
||||||
}, 100);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
Loading…
Reference in New Issue