tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
tianlong 2023-04-24 11:16:48 +08:00
parent 51f754a51d
commit 797688e4fd
2 changed files with 251 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/crops.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

341
src/views/crops/area/index.vue
View File

@ -42,11 +42,46 @@
</div> </div>
<div ref="typesofDiv" class="typesofDiv"></div> <div ref="typesofDiv" class="typesofDiv"></div>
<div class="tableDiv"> <div class="tableDiv">
<el-table max-height="200" class="ones" :data="tableData" style="width: 415px"> <div class="Crops">
<el-table-column prop="date" label="类型" /> <div>
<el-table-column prop="name" label="面积" /> <img src="@/assets/images/crops.png" alt="" />
<el-table-column prop="address" label="占比" /> 小麦
</el-table> </div>
<div style="color: rgba(110, 209, 84, 1);">12364亩</div>
<div style="color: rgba(110, 209, 84, 1);">35%</div>
</div>
<div class="Crops">
<div>
<img src="@/assets/images/crops.png" alt="" />
玉米
</div>
<div style="color: rgba(229, 205, 38, 1);">12364亩</div>
<div style="color: rgba(229, 205, 38, 1);">35%</div>
</div>
<div class="Crops">
<div>
<img src="@/assets/images/crops.png" alt="" />
大豆
</div>
<div style="color: rgba(252, 169, 63, 1);">12364亩</div>
<div style="color: rgba(252, 169, 63, 1);">35%</div>
</div>
<div class="Crops">
<div>
<img src="@/assets/images/crops.png" alt="" />
地瓜
</div>
<div style="color: rgba(103, 153, 242, 1);">12364亩</div>
<div style="color: rgba(103, 153, 242, 1);">35%</div>
</div>
<div class="Crops">
<div>
<img src="@/assets/images/crops.png" alt="" />
花生
</div>
<div style="color: rgba(4, 179, 228, 1);">12364亩</div>
<div style="color: rgba(4, 179, 228, 1);">35%</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -287,10 +322,10 @@ let tableData = [
}, },
]; ];
let TypeTime = { let TypeTime = {
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490], 大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929], 小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323], 地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279], 花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
}; };
// 组件挂载完成后执行 // 组件挂载完成后执行
@ -307,7 +342,6 @@ onMounted(() => {
farmland(); farmland();
ProgressBar(); ProgressBar();
ASdivision(); ASdivision();
leftProgressBar();
}); });
/*-------------地图------------------------*/ /*-------------地图------------------------*/
@ -929,11 +963,11 @@ function areachar() {
fontFamily: 'Din-Light', fontFamily: 'Din-Light',
}, },
color: [ color: [
'#123dac', 'rgba(252, 169, 63, 0.8)',
'#73e2e2', 'rgba(110, 209, 84, 0.8)',
'#ff7e85', 'rgba(103, 153, 242, 0.8)',
'#9b52ff', 'rgba(4, 199, 247, 0.9)',
'#fac524', 'rgba(229, 205, 38, 0.8)',
'#46caff', '#46caff',
'#a1e867', '#a1e867',
'#10b2b2', '#10b2b2',
@ -966,6 +1000,15 @@ function areachar() {
fontSize: 24, fontSize: 24,
}, },
}, },
// legend: {
// show: true,
// top: '10',
// left: 'center',
// textStyle: { color: 'rgba(255,255,255,.9)' },
// itemWidth: 20,
// itemHeight: 12.5,
// icon: 'stack',
// },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -999,9 +1042,42 @@ function areachar() {
grid: { grid: {
left: 60, left: 60,
right: 10, right: 10,
top: 50, top: 60,
bottom: 50, bottom: 50,
}, },
dataZoom: [
{
// start: 0,//默认为0
// end: 100,//默认为100
type: 'slider',
show: false,
// xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
startValue: 0, // 初始显示值
endValue: 6, // 结束显示值
height: 10, //组件高度
left: '5%', //左边的距离
right: '4%', //右边的距离
bottom: 5, //底边的距离
borderColor: '#000',
fillerColor: '#269cdb',
borderRadius: 5,
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
// xAxisIndex: [0],
start: 1, //默认为1
end: 100, //默认为100
},
],
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@ -1056,9 +1132,31 @@ function areachar() {
cursor: 'pointer', cursor: 'pointer',
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
color: 'rgba(252, 169, 63, 0.8)',
shadowColor: 'rgba(18,61,172,0.5)', shadowColor: 'rgba(18,61,172,0.5)',
shadowBlur: 10, shadowBlur: 10,
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(252, 169, 63, 0.8)',
},
{
offset: 1,
color: 'rgba(252, 169, 63, 0)',
},
],
false
),
},
},
}, },
{ {
name: '小麦', name: '小麦',
@ -1069,9 +1167,31 @@ function areachar() {
cursor: 'pointer', cursor: 'pointer',
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
color: 'rgba(110, 209, 84, 0.8)',
shadowColor: 'rgba(115,226,226,0.5)', shadowColor: 'rgba(115,226,226,0.5)',
shadowBlur: 10, shadowBlur: 10,
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(110, 209, 84, 0.8)',
},
{
offset: 1,
color: 'rgba(110, 209, 84, 0)',
},
],
false
),
},
},
}, },
{ {
name: '地瓜', name: '地瓜',
@ -1082,9 +1202,31 @@ function areachar() {
cursor: 'pointer', cursor: 'pointer',
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
color: 'rgba(103, 153, 242, 0.8)',
shadowColor: 'rgba(255,126,133,0.5)', shadowColor: 'rgba(255,126,133,0.5)',
shadowBlur: 10, shadowBlur: 10,
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(103, 153, 242, 0.8)',
},
{
offset: 1,
color: 'rgba(103, 153, 242, 0)',
},
],
false
),
},
},
}, },
{ {
name: '花生', name: '花生',
@ -1095,9 +1237,67 @@ function areachar() {
cursor: 'pointer', cursor: 'pointer',
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
color: 'rgba(4, 199, 247, 0.9)',
shadowColor: 'rgba(255,120,168,0.5)', shadowColor: 'rgba(255,120,168,0.5)',
shadowBlur: 10, shadowBlur: 10,
}, },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(4, 199, 247, 0.9)',
},
{
offset: 1,
color: 'rgba(4, 199, 247, 0)',
},
],
false
),
},
},
},
{
name: '玉米',
data: TypeTime.玉米,
type: 'line',
smooth: true,
smoothMonotone: 'x',
cursor: 'pointer',
showSymbol: false,
lineStyle: {
color: 'rgba(229, 205, 38, 0.8)',
shadowColor: 'rgba(255,120,168,0.5)',
shadowBlur: 10,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(229, 205, 38, 0.8)',
},
{
offset: 1,
color: 'rgba(229, 205, 38, 0)',
},
],
false
),
},
},
}, },
], ],
}; };
@ -1108,75 +1308,6 @@ function areachar() {
}); });
} }
function leftProgressBar() {
const leftProgressBarrDivIntance = echarts.init(leftProgressBarDiv.value);
var option = {
// backgroundColor: '#031d33',
grid: {
top: 0,
bottom: 0,
left: '10%',
right: '10%',
},
xAxis: {
show: false,
type: 'value',
boundaryGap: [0, 0],
},
yAxis: [
{
type: 'category',
data: [''],
axisLine: { show: false },
axisTick: [
{
show: false,
},
],
},
],
series: [
{
name: '金额',
type: 'bar',
zlevel: 1,
itemStyle: {
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)',
},
]),
},
},
barWidth: 20,
data: [10],
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: [20],
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, 0.2)',
barBorderRadius: 50,
},
},
},
],
};
option && leftProgressBarrDivIntance.setOption(option, true);
// useEcharts(leftProgressBarrDivIntance, option);
}
function typesof() { function typesof() {
const typesofDivIntance = echarts.init(typesofDiv.value); const typesofDivIntance = echarts.init(typesofDiv.value);
var option = { var option = {
@ -1414,8 +1545,8 @@ function farmland() {
], ],
}; };
farmlandDivIntance.on('click', function (params) { farmlandDivIntance.on('click', function (params) {
console.log(params.name) console.log(params.name);
}) });
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } }); option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
useEcharts(farmlandDivIntance, option); useEcharts(farmlandDivIntance, option);
@ -2016,7 +2147,8 @@ $height: calc(100vh - 100px);
left: 20px; left: 20px;
height: $height; height: $height;
width: 25%; width: 25%;
background: rgba(2, 31, 26, 0.3); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.leftTop { .leftTop {
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
@ -2054,10 +2186,38 @@ $height: calc(100vh - 100px);
} }
.tableDiv { .tableDiv {
background: rgba(255, 255, 255, 0.05); // background: rgba(255, 255, 255, 0.05);
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 85%; width: 85%;
flex-direction: column;
padding: 5px 10px 5px 10px;
color: rgba(255, 255, 255, 1);
.Crops {
display: flex;
width: 100%;
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
height: 31px;
flex-direction: row;
align-items: center;
justify-content: space-around;
opacity: 1;
background: linear-gradient(
90deg,
rgba(21, 173, 148, 0.1) 0%,
rgba(21, 173, 148, 0) 100%
);
div {
display: flex;
align-items: center;
}
}
.el-checkbox-group {
display: flex;
flex-direction: column;
}
:deep(.ones) { :deep(.ones) {
width: 100%; width: 100%;
@ -2088,7 +2248,8 @@ $height: calc(100vh - 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: rgba(2, 31, 26, 0.3); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.rightTop { .rightTop {
width: 100%; width: 100%;