up
This commit is contained in:
@ -105,7 +105,35 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
:show-arrow="false"
|
||||
:disabled="leftWraFlag"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="!leftWraFlag"
|
||||
:show-arrow="false"
|
||||
class="box-item"
|
||||
show-after="200"
|
||||
hide-after="0"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="leftWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
@ -163,7 +191,35 @@
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -840,6 +896,17 @@ function villageClick(layers, xy, level, cartographic) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
console.log(newData);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
newData.data.bbox[0],
|
||||
newData.data.bbox[1],
|
||||
newData.data.bbox[2],
|
||||
newData.data.bbox[3]
|
||||
),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
if (newData.properties && newData.properties.XZQDM) {
|
||||
if (XZQDM !== newData.properties.XZQDM) {
|
||||
//防止
|
||||
@ -1144,11 +1211,11 @@ const selectTab = () => {
|
||||
};
|
||||
areatext = '8383894';
|
||||
typesofdata = {
|
||||
小麦: { value: 12364, percent: '20%' },
|
||||
花生: { value: 12364, percent: '20%' },
|
||||
大豆: { value: 12364, percent: '20%' },
|
||||
地瓜: { value: 12364, percent: '20%' },
|
||||
花生: { value: 12364, percent: '20%' },
|
||||
小麦: { value: 30111, percent: '20%' },
|
||||
花生: { value: 52590, percent: '20%' },
|
||||
大豆: { value: 1767, percent: '20%' },
|
||||
地瓜: { value: 797, percent: '20%' },
|
||||
花生: { value: 1820, percent: '20%' },
|
||||
};
|
||||
Pie3D = reactive({
|
||||
arr: [
|
||||
@ -2309,6 +2376,7 @@ function back() {
|
||||
duration: 2,
|
||||
});
|
||||
flag.value = false;
|
||||
hiddenOverlayChart();
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick(item) {
|
||||
@ -3025,7 +3093,6 @@ function hiddenOverlayChart() {
|
||||
|
||||
deleteEntityByName('villageLine');
|
||||
deleteEntityByName('townLine');
|
||||
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
@ -3035,7 +3102,9 @@ function hiddenOverlayChart() {
|
||||
duration: 2,
|
||||
});
|
||||
removeWms(['gbznt'], true);
|
||||
// addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
if (flag.value) {
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
}
|
||||
flag.value = false;
|
||||
}
|
||||
//显示弹窗
|
||||
@ -3062,7 +3131,9 @@ $height: calc(100vh - 100px);
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.imgrotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@ -3124,7 +3195,7 @@ $height: calc(100vh - 100px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
right: -14%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
|
||||
@ -5,7 +5,13 @@
|
||||
<div class="leftTop">
|
||||
<div class="title">
|
||||
<span>作物分类面积统计</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -18,7 +24,13 @@
|
||||
<div class="leftbottom">
|
||||
<div class="title">
|
||||
<span>作物类型统计</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -29,14 +41,50 @@
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="leftWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> -->
|
||||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="!leftWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> -->
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="leftWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -50,7 +98,13 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -75,7 +129,35 @@
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse class="legend" accordion>
|
||||
@ -209,6 +291,19 @@ const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
downloadURL(item);
|
||||
};
|
||||
const downloadURL = url => {
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -2161,7 +2256,10 @@ $height: calc(100vh - 100px);
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.imgrotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@ -2223,7 +2321,7 @@ $height: calc(100vh - 100px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
right: -14%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
@ -2429,7 +2527,7 @@ $height: calc(100vh - 100px);
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
// left: calc(400px + 20px + 8vw);
|
||||
left: 0;
|
||||
left: -2%;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
|
||||
@ -67,21 +67,17 @@
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>墒情、土质监测数据</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
<div ref="Phdiv" class="Phdiv"></div>
|
||||
|
||||
<div class="depth">
|
||||
<p class="SelectedDiv">0cm</p>
|
||||
<p>-10cm</p>
|
||||
<p>-20cm</p>
|
||||
<p>-30cm</p>
|
||||
</div>
|
||||
<div ref="soilDiv" class="soilDiv"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
@ -89,7 +85,44 @@
|
||||
</div>
|
||||
|
||||
<div class="bottom_center">
|
||||
<TimeLine />
|
||||
<div class="left_bottom">
|
||||
<div class="title">
|
||||
<span>设备照片</span>
|
||||
</div>
|
||||
<div class="imgdiv">
|
||||
<img
|
||||
width="100%"
|
||||
src="https://img.js.design/assets/img/641d73a7cece21d6b61bedf9.png#d27dd8c8c5369101dca2dcf160e5bba9"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_bottom">
|
||||
<div class="title">
|
||||
<span>作物长势等级面积占比</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
历史数据
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tableDiv">
|
||||
<el-table max-height="200px" :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="date" label="设备编号" />
|
||||
<el-table-column prop="name" label="监测时间" />
|
||||
<el-table-column prop="address" label="预警情况" />
|
||||
<el-table-column prop="address" label="照片" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||||
@ -132,6 +165,8 @@ import { download } from '@/utils/request';
|
||||
|
||||
let viewer = ref(null);
|
||||
const farmlandDiv = ref(null);
|
||||
const Phdiv = ref(null);
|
||||
const soilDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const value = ref('370211');
|
||||
const leftProgressBarDiv = ref(null);
|
||||
@ -143,89 +178,6 @@ const formLandRef = ref([]);
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
let ff = ref('{x:765,y:191}');
|
||||
let Pie3D = reactive({
|
||||
arr: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
opacity: 0.5,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '花生',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '蓝莓',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(72, 102, 211, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '茶叶',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
watch(
|
||||
() => Township.arr,
|
||||
val => {
|
||||
@ -277,12 +229,6 @@ let tableData = [
|
||||
address: '19%',
|
||||
},
|
||||
];
|
||||
let TypeTime = {
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||||
};
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
@ -293,8 +239,9 @@ onMounted(() => {
|
||||
//地图
|
||||
initMap();
|
||||
farmland();
|
||||
// ProgressBar();
|
||||
getFarmland();
|
||||
Ph();
|
||||
soil();
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -911,7 +858,6 @@ const getaArea = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
@ -931,114 +877,131 @@ const downloadURL = url => {
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||
var option = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '15%',
|
||||
right: '2%',
|
||||
bottom: '14%',
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'transparent', //底部边框颜色
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '17%',
|
||||
right: '2%',
|
||||
bottom: '14%',
|
||||
},
|
||||
axisLabel: {
|
||||
legend: {
|
||||
data: ['EC值'],
|
||||
inactiveColor: 'rgba(92,200,255,0.35)',
|
||||
icon: 'roundRect',
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemWidth: 20,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#fff', //底部文字颜色
|
||||
fontSize: 12,
|
||||
color: '#FFF',
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'transparent', //左边框颜色
|
||||
color: 'transparent', //底部边框颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
textStyle: {
|
||||
color: '#ADD6FF', //左文字颜色
|
||||
color: '#fff', //底部文字颜色
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '毕业学员',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
// color: '#00FFE3',//渐变1
|
||||
color: 'rgba(43, 224, 152, 1)', //渐变1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
// color: '#4693EC',//渐变2
|
||||
color: 'rgba(185, 250, 224, 1)', //渐变2
|
||||
},
|
||||
]),
|
||||
yAxis: [
|
||||
{
|
||||
name: 'EC值(mS/cm) ',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'transparent', //左边框颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
textStyle: {
|
||||
color: '#ADD6FF', //左文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 14,
|
||||
// color: '#fff', //柱状顶部文字颜色
|
||||
// formatter: function (params) {
|
||||
// return '20%';
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'EC值',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
// color: '#00FFE3',//渐变1
|
||||
color: 'rgba(43, 224, 152, 1)', //渐变1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
// color: '#4693EC',//渐变2
|
||||
color: 'rgba(185, 250, 224, 1)', //渐变2
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 14,
|
||||
// color: '#fff', //柱状顶部文字颜色
|
||||
// formatter: function (params) {
|
||||
// return '20%';
|
||||
// },
|
||||
// },
|
||||
},
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 3,
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, 0],
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 1,
|
||||
zlevel: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
|
||||
},
|
||||
},
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 3,
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, 0],
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 1,
|
||||
zlevel: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
farmlandDivIntance.on('click', function (params) {
|
||||
console.log(params.name);
|
||||
@ -1047,74 +1010,295 @@ function farmland() {
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
function ProgressBar() {
|
||||
const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
|
||||
var option = {
|
||||
// backgroundColor: '#031d33',
|
||||
function Ph() {
|
||||
const PhDivIntance = echarts.init(Phdiv.value);
|
||||
let dataC1 = [20, 30, 60, 40, 50, 30];
|
||||
let dataC2 = [20, 30, 60, 40, 50, 30];
|
||||
let dataC3 = [20, 30, 60, 40, 50, 30];
|
||||
let xData = [
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
];
|
||||
|
||||
var fontColor = '#30eee9';
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
left: '15%',
|
||||
right: '2%',
|
||||
top: '15%',
|
||||
bottom: '17%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
},
|
||||
offset: 12,
|
||||
axisTick: {
|
||||
show: false,
|
||||
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
interval: 0, //使x轴文字显示全
|
||||
textStyle: {
|
||||
color: 'rgba(219, 225, 255, 1)',
|
||||
},
|
||||
formatter: function (params) {
|
||||
var newParamsName = '';
|
||||
var paramsNameNumber = params.length;
|
||||
var provideNumber = 10; //一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = '';
|
||||
var start = p * provideNumber;
|
||||
var end = start + provideNumber;
|
||||
if (p == rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber);
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + '\n';
|
||||
}
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
|
||||
data: xData,
|
||||
},
|
||||
yAxis: [
|
||||
yAxis: {
|
||||
name: 'PH值(ph)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
},
|
||||
boundaryGap: ['20%', '20%'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {
|
||||
//color: '#94C9EC'
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0.4,
|
||||
color: 'rgba(163, 198, 255, 0.4)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(163, 198, 255, 0.01)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: dataC1,
|
||||
},
|
||||
],
|
||||
};
|
||||
useEcharts(PhDivIntance, option);
|
||||
}
|
||||
function soil() {
|
||||
const soilDivIntance = echarts.init(soilDiv.value);
|
||||
var time = ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00'];
|
||||
var sportData = [688, 108, 2288, 188, 929, 3108, 1008];
|
||||
var sportTime = [1140, 2135, 125, 140, 1130, 138, 120];
|
||||
let option = {
|
||||
// backgroundColor: '#2C313E',
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
top: 7,
|
||||
left: 'center',
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 30,
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [''],
|
||||
axisLine: { show: false },
|
||||
axisTick: [
|
||||
{
|
||||
show: false,
|
||||
data: time,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
],
|
||||
},
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
//坐标轴刻度相关设置。
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: 'PH值(ph)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)', //左侧数标
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '土壤湿度(%RH)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
position: 'right',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)', //右侧数标
|
||||
},
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
name: '土壤温度',
|
||||
type: 'line',
|
||||
data: sportTime,
|
||||
symbolSize: 1,
|
||||
// symbol: 'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(7,99,84,0.95) ',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(71,179,161,0.95)',
|
||||
},
|
||||
]),
|
||||
color: 'rgba(252, 186, 211, 1)',
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: [10],
|
||||
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(252, 186, 211, 1)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: [20],
|
||||
name: '土壤湿度',
|
||||
type: 'line',
|
||||
data: sportData,
|
||||
symbolSize: 1,
|
||||
yAxisIndex: 1,
|
||||
// symbol: 'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
barBorderRadius: 50,
|
||||
color: 'rgba(168, 216, 234, 1)',
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(168, 216, 234, 1)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// option && ProgressBarDivIntance.setOption(option);
|
||||
useEcharts(ProgressBarDivIntance, option);
|
||||
useEcharts(soilDivIntance, option);
|
||||
}
|
||||
|
||||
// 添加wms
|
||||
function addWms(layers, customName) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
@ -1512,7 +1696,7 @@ $height: calc(100vh - 100px);
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-border-color: none;
|
||||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||||
background: rgba(38, 255, 255, 0.01)
|
||||
background: rgba(38, 255, 255, 0.01);
|
||||
}
|
||||
// ::v-deep .el-table__row {
|
||||
// background: linear-gradient(
|
||||
@ -1581,7 +1765,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1590,11 +1774,58 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.farmlandDiv {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
height: 30%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.Phdiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 30%;
|
||||
justify-content: center;
|
||||
}
|
||||
.depth {
|
||||
width: 244px;
|
||||
height: 26px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-top: 20px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 0.1) 0%,
|
||||
rgba(47, 214, 214, 0.1) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(23, 194, 180, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.SelectedDiv {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.soilDiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 30%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
width: 100%;
|
||||
@ -1678,15 +1909,71 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
left: calc(400px + 12vw);
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: calc(100% - 50% - (1vw * 2));
|
||||
min-width: 380px;
|
||||
bottom: 5%;
|
||||
height: 75px;
|
||||
height: 30%;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
display: flex;
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
.el-table {
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-border-color: none;
|
||||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||||
background: rgba(38, 255, 255, 0.01);
|
||||
}
|
||||
// ::v-deep .el-table__row {
|
||||
// background: linear-gradient(
|
||||
// 90deg,
|
||||
// rgba(38, 255, 255, 0.15) 0%,
|
||||
// rgba(38, 255, 255, 0.01) 100%
|
||||
// );
|
||||
// }
|
||||
|
||||
::v-deep .el-table__body tr:hover > td {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(38, 255, 255, 0.15) 0%,
|
||||
rgba(38, 255, 255, 0.01) 100%
|
||||
) !important;
|
||||
}
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ones) {
|
||||
width: 100%;
|
||||
height: 171;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
--el-table-tr-bg-color: null;
|
||||
--el-table-border-color: null;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.imgdiv {
|
||||
width: 100%;
|
||||
height: 248px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool {
|
||||
|
||||
Reference in New Issue
Block a user