原先图标修改
This commit is contained in:
parent
5631378b5b
commit
2b4460f993
@ -37,10 +37,20 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const chartRef = ref(null);
|
const chartRef = ref(null);
|
||||||
const { setOptions, getInstance } = useEcharts(chartRef);
|
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}',
|
||||||
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: 'shadow',
|
||||||
label: {
|
label: {
|
||||||
@ -97,6 +107,11 @@ export default {
|
|||||||
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
|
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
|
||||||
option.xAxis.data = xAxisData;
|
option.xAxis.data = xAxisData;
|
||||||
setOptions(option);
|
setOptions(option);
|
||||||
|
startAutoPlay({
|
||||||
|
interval: 2000,
|
||||||
|
seriesIndex: 0,
|
||||||
|
showTooltip: true,
|
||||||
|
});
|
||||||
getInstance()?.off('click', onClick);
|
getInstance()?.off('click', onClick);
|
||||||
getInstance()?.on('click', onClick);
|
getInstance()?.on('click', onClick);
|
||||||
}
|
}
|
||||||
|
@ -33,7 +33,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const chartRef = ref(null);
|
const chartRef = ref(null);
|
||||||
const { setOptions, getInstance, resize } = useEcharts(chartRef);
|
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||||||
const optionVal = reactive({});
|
const optionVal = reactive({});
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
@ -55,6 +55,11 @@ export default {
|
|||||||
Object.assign(optionVal, cloneDeep(props.option));
|
Object.assign(optionVal, cloneDeep(props.option));
|
||||||
}
|
}
|
||||||
setOptions(props.option);
|
setOptions(props.option);
|
||||||
|
startAutoPlay({
|
||||||
|
interval: 2000,
|
||||||
|
seriesIndex: 0,
|
||||||
|
showTooltip: true,
|
||||||
|
});
|
||||||
resize();
|
resize();
|
||||||
getInstance()?.off('click', onClick);
|
getInstance()?.off('click', onClick);
|
||||||
getInstance()?.on('click', onClick);
|
getInstance()?.on('click', onClick);
|
||||||
|
@ -34,7 +34,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const chartRef = ref(null);
|
const chartRef = ref(null);
|
||||||
const { setOptions, getInstance } = useEcharts(chartRef);
|
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -138,6 +138,11 @@ export default {
|
|||||||
option.series = seriesData;
|
option.series = seriesData;
|
||||||
option.xAxis.data = xAxisData;
|
option.xAxis.data = xAxisData;
|
||||||
setOptions(option);
|
setOptions(option);
|
||||||
|
startAutoPlay({
|
||||||
|
interval: 2000,
|
||||||
|
seriesIndex: 0,
|
||||||
|
showTooltip: true,
|
||||||
|
});
|
||||||
getInstance()?.off('click', onClick);
|
getInstance()?.off('click', onClick);
|
||||||
getInstance()?.on('click', onClick);
|
getInstance()?.on('click', onClick);
|
||||||
}
|
}
|
||||||
|
@ -29,10 +29,17 @@ export default {
|
|||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const chartRef = ref(null);
|
const chartRef = ref(null);
|
||||||
const { setOptions } = useEcharts(chartRef);
|
const { setOptions, startAutoPlay } = useEcharts(chartRef);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: 'shadow',
|
||||||
label: {
|
label: {
|
||||||
@ -84,6 +91,11 @@ export default {
|
|||||||
option.series = seriesData;
|
option.series = seriesData;
|
||||||
option.xAxis.data = xAxisData;
|
option.xAxis.data = xAxisData;
|
||||||
setOptions(option);
|
setOptions(option);
|
||||||
|
startAutoPlay({
|
||||||
|
interval: 2000,
|
||||||
|
seriesIndex: 0,
|
||||||
|
showTooltip: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return { chartRef };
|
return { chartRef };
|
||||||
},
|
},
|
||||||
|
@ -33,7 +33,7 @@ export default {
|
|||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const chartRef = ref(null);
|
const chartRef = ref(null);
|
||||||
const { setOptions, getInstance, resize } = useEcharts(chartRef);
|
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
@ -42,9 +42,6 @@ export default {
|
|||||||
top: '11%',
|
top: '11%',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
formatter: '{b}',
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
@ -104,6 +101,11 @@ export default {
|
|||||||
Object.assign(option, cloneDeep(props.option));
|
Object.assign(option, cloneDeep(props.option));
|
||||||
}
|
}
|
||||||
setOptions(option);
|
setOptions(option);
|
||||||
|
startAutoPlay({
|
||||||
|
interval: 2000,
|
||||||
|
seriesIndex: 0,
|
||||||
|
showTooltip: true,
|
||||||
|
});
|
||||||
resize();
|
resize();
|
||||||
getInstance()?.off('click', onClick);
|
getInstance()?.off('click', onClick);
|
||||||
getInstance()?.on('click', onClick);
|
getInstance()?.on('click', onClick);
|
||||||
|
@ -36,6 +36,13 @@ export default {
|
|||||||
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
formatter: '{b} ({c})',
|
formatter: '{b} ({c})',
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
@ -192,9 +192,9 @@ const state = reactive({
|
|||||||
},
|
},
|
||||||
inputsData: [
|
inputsData: [
|
||||||
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
{ value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
// { value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
||||||
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
||||||
{ value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
// { value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
||||||
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
],
|
],
|
||||||
businessOption: {
|
businessOption: {
|
||||||
|
@ -8,7 +8,7 @@ export {}
|
|||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||||
'BaseBg copy': typeof import('./src/components/baseBg copy.vue')['default']
|
BaseBg_old: typeof import('./src/components/baseBg_old.vue')['default']
|
||||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||||
copy: typeof import('./src/components/baseBg copy.vue')['default']
|
copy: typeof import('./src/components/baseBg copy.vue')['default']
|
||||||
|
@ -1,170 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
|
|
||||||
<div class="data-warp">
|
|
||||||
<div class="chart-content">
|
|
||||||
<div class="top">
|
|
||||||
<slot v-if="$slots.top" name="top"></slot>
|
|
||||||
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
|
||||||
<div class="top-left"></div>
|
|
||||||
<div class="top-content">
|
|
||||||
{{ topTitle }}
|
|
||||||
</div>
|
|
||||||
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="center"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
import { useApp } from '@/hooks';
|
|
||||||
const router = useRouter();
|
|
||||||
const props = defineProps({
|
|
||||||
nameVal: {
|
|
||||||
type: String,
|
|
||||||
default: 'home',
|
|
||||||
},
|
|
||||||
topTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '系统',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const navlist = ref([
|
|
||||||
{ title: '首页', name: 'home' },
|
|
||||||
{ title: '土地资源', name: 'land' },
|
|
||||||
{ title: '投入品', name: 'inputs' },
|
|
||||||
{ title: '生产经营主体', name: 'entities' },
|
|
||||||
{ title: '智慧种植检测', name: 'plant' },
|
|
||||||
{ title: '智慧养殖检测', name: 'breed' },
|
|
||||||
{ title: '全流程溯源', name: 'trace' },
|
|
||||||
{ title: '产业预警决策', name: 'early' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
let currentName = ref('home');
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.nameVal,
|
|
||||||
() => {
|
|
||||||
currentName.value = props.nameVal;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const itemAct = (name) => {
|
|
||||||
currentName.value = name;
|
|
||||||
router.push({ name: name });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.data-warp {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.chart-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
.top,
|
|
||||||
.content,
|
|
||||||
.bottom {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 16px;
|
|
||||||
background-size: cover;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.top {
|
|
||||||
height: 55px;
|
|
||||||
.top-content-warp {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
.top-left,
|
|
||||||
.top-content,
|
|
||||||
.top-right {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.top-content {
|
|
||||||
width: calc(100% - 400px);
|
|
||||||
line-height: 42px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 8px;
|
|
||||||
text-shadow: -6px 0 0 1px #add8f1;
|
|
||||||
}
|
|
||||||
.top-left {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
.top-right {
|
|
||||||
text-align: right;
|
|
||||||
width: 200px;
|
|
||||||
color: #add8f1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
height: 80px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.b-nav {
|
|
||||||
margin: auto;
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 20px;
|
|
||||||
.b-nav-item {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 132px;
|
|
||||||
height: 42px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 38px;
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-flex;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
|
|
||||||
letter-spacing: 4px;
|
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-act {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
&.nav-normal {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
height: calc(100% - 138px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -4,51 +4,10 @@
|
|||||||
<div class="chart-content">
|
<div class="chart-content">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<slot v-if="$slots.top" name="top"></slot>
|
<slot v-if="$slots.top" name="top"></slot>
|
||||||
<!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
|
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
||||||
<div v-else class="top-content-warp">
|
|
||||||
<div class="top-left"></div>
|
<div class="top-left"></div>
|
||||||
<div class="top-content">
|
<div class="top-content">
|
||||||
<div class="top-content-p">
|
{{ topTitle }}
|
||||||
<div class="b-nav-l">
|
|
||||||
<template v-for="(n, indexn) in navlist" :key="n.name">
|
|
||||||
<div
|
|
||||||
v-if="indexn <= 3"
|
|
||||||
class="b-nav-item"
|
|
||||||
:style="{
|
|
||||||
'background-image':
|
|
||||||
'url(' +
|
|
||||||
(currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
|
||||||
')',
|
|
||||||
}"
|
|
||||||
:class="currentName == n.name ? 'nav-act' : 'nav-normal'"
|
|
||||||
@click="itemAct(n.name)"
|
|
||||||
>
|
|
||||||
<span>{{ n.title }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="title txt-ellipsis clamp1">{{ topTitle }}</div> -->
|
|
||||||
<div class="title txt-ellipsis clamp1">{{ '农业产业政务云平台' }}</div>
|
|
||||||
<div class="b-nav-r">
|
|
||||||
<template v-for="(m, indexm) in navlist" :key="m.name">
|
|
||||||
<div
|
|
||||||
v-if="indexm > 3"
|
|
||||||
class="b-nav-item"
|
|
||||||
:style="{
|
|
||||||
'background-image':
|
|
||||||
'url(' +
|
|
||||||
(currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
|
||||||
')',
|
|
||||||
}"
|
|
||||||
:class="currentName == m.name ? 'nav-act' : 'nav-normal'"
|
|
||||||
@click="itemAct(m.name)"
|
|
||||||
>
|
|
||||||
<span>{{ m.title }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
||||||
</div>
|
</div>
|
||||||
@ -146,72 +105,16 @@ div {
|
|||||||
}
|
}
|
||||||
.top-content {
|
.top-content {
|
||||||
width: calc(100% - 400px);
|
width: calc(100% - 400px);
|
||||||
height: 100%;
|
line-height: 42px;
|
||||||
display: inline-flex;
|
text-align: center;
|
||||||
justify-content: center;
|
font-size: 26px;
|
||||||
flex-direction: column;
|
font-weight: bold;
|
||||||
.top-content-p {
|
transform: skewX(-8deg);
|
||||||
width: 100%;
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||||
}
|
-webkit-background-clip: text;
|
||||||
.title,
|
color: #fff;
|
||||||
.b-nav-l,
|
letter-spacing: 8px;
|
||||||
.b-nav-r {
|
text-shadow: -6px 0 0 1px #add8f1;
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.b-nav-l,
|
|
||||||
.b-nav-r {
|
|
||||||
width: calc((100% - 300px) / 2);
|
|
||||||
}
|
|
||||||
.b-nav-r {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
width: 300px;
|
|
||||||
line-height: 38px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: bold;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 8px;
|
|
||||||
text-shadow: -6px 0 0 1px #add8f1;
|
|
||||||
max-height: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.b-nav-l,
|
|
||||||
.b-nav-r {
|
|
||||||
margin: auto;
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 20px;
|
|
||||||
.b-nav-item {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 132px;
|
|
||||||
height: 38px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 38px;
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-flex;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
|
|
||||||
letter-spacing: 4px;
|
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-act {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
&.nav-normal {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.top-left {
|
.top-left {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
@ -260,7 +163,7 @@ div {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 138px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
267
sub-government-screen-service/src/components/baseBg_old.vue
Normal file
267
sub-government-screen-service/src/components/baseBg_old.vue
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
|
||||||
|
<div class="data-warp">
|
||||||
|
<div class="chart-content">
|
||||||
|
<div class="top">
|
||||||
|
<slot v-if="$slots.top" name="top"></slot>
|
||||||
|
<!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
|
||||||
|
<div v-else class="top-content-warp">
|
||||||
|
<div class="top-left"></div>
|
||||||
|
<div class="top-content">
|
||||||
|
<div class="top-content-p">
|
||||||
|
<div class="b-nav-l">
|
||||||
|
<template v-for="(n, indexn) in navlist" :key="n.name">
|
||||||
|
<div
|
||||||
|
v-if="indexn <= 3"
|
||||||
|
class="b-nav-item"
|
||||||
|
:style="{
|
||||||
|
'background-image':
|
||||||
|
'url(' +
|
||||||
|
(currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
||||||
|
')',
|
||||||
|
}"
|
||||||
|
:class="currentName == n.name ? 'nav-act' : 'nav-normal'"
|
||||||
|
@click="itemAct(n.name)"
|
||||||
|
>
|
||||||
|
<span>{{ n.title }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="title txt-ellipsis clamp1">{{ topTitle }}</div> -->
|
||||||
|
<div class="title txt-ellipsis clamp1">{{ '农业产业政务云平台' }}</div>
|
||||||
|
<div class="b-nav-r">
|
||||||
|
<template v-for="(m, indexm) in navlist" :key="m.name">
|
||||||
|
<div
|
||||||
|
v-if="indexm > 3"
|
||||||
|
class="b-nav-item"
|
||||||
|
:style="{
|
||||||
|
'background-image':
|
||||||
|
'url(' +
|
||||||
|
(currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
||||||
|
')',
|
||||||
|
}"
|
||||||
|
:class="currentName == m.name ? 'nav-act' : 'nav-normal'"
|
||||||
|
@click="itemAct(m.name)"
|
||||||
|
>
|
||||||
|
<span>{{ m.title }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot name="center"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const router = useRouter();
|
||||||
|
const props = defineProps({
|
||||||
|
nameVal: {
|
||||||
|
type: String,
|
||||||
|
default: 'home',
|
||||||
|
},
|
||||||
|
topTitle: {
|
||||||
|
type: String,
|
||||||
|
default: '系统',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const navlist = ref([
|
||||||
|
{ title: '首页', name: 'home' },
|
||||||
|
{ title: '土地资源', name: 'land' },
|
||||||
|
{ title: '投入品', name: 'inputs' },
|
||||||
|
{ title: '生产经营主体', name: 'entities' },
|
||||||
|
// { title: '智慧种植监测', name: 'plant' },
|
||||||
|
// { title: '智慧养殖监测', name: 'breed' },
|
||||||
|
{ title: '全流程溯源', name: 'trace' },
|
||||||
|
{ title: '产业预警决策', name: 'early' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
let currentName = ref('home');
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.nameVal,
|
||||||
|
() => {
|
||||||
|
currentName.value = props.nameVal;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const itemAct = (name) => {
|
||||||
|
currentName.value = name;
|
||||||
|
router.push({ name: name });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.data-warp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
.top,
|
||||||
|
.content,
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 16px;
|
||||||
|
background-size: cover;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
height: 55px;
|
||||||
|
.top-content-warp {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
.top-left,
|
||||||
|
.top-content,
|
||||||
|
.top-right {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.top-content {
|
||||||
|
width: calc(100% - 400px);
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.top-content-p {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.title,
|
||||||
|
.b-nav-l,
|
||||||
|
.b-nav-r {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.b-nav-l,
|
||||||
|
.b-nav-r {
|
||||||
|
width: calc((100% - 300px) / 2);
|
||||||
|
}
|
||||||
|
.b-nav-r {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
width: 300px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
transform: skewX(-8deg);
|
||||||
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 8px;
|
||||||
|
text-shadow: -6px 0 0 1px #add8f1;
|
||||||
|
max-height: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.b-nav-l,
|
||||||
|
.b-nav-r {
|
||||||
|
margin: auto;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 20px;
|
||||||
|
.b-nav-item {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 132px;
|
||||||
|
height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38px;
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-flex;
|
||||||
|
transform: skewX(-8deg);
|
||||||
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
|
letter-spacing: 4px;
|
||||||
|
text-shadow: -2px 0 0 1px #add8f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-act {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
&.nav-normal {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-left {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.top-right {
|
||||||
|
text-align: right;
|
||||||
|
width: 200px;
|
||||||
|
color: #add8f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: 80px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.b-nav {
|
||||||
|
margin: auto;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 20px;
|
||||||
|
.b-nav-item {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 132px;
|
||||||
|
height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38px;
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-flex;
|
||||||
|
transform: skewX(-8deg);
|
||||||
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
|
letter-spacing: 4px;
|
||||||
|
text-shadow: -2px 0 0 1px #add8f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-act {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
&.nav-normal {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -60,7 +60,7 @@ watch(
|
|||||||
}
|
}
|
||||||
.title-top-content {
|
.title-top-content {
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
font-size: 14px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform: skewX(-13deg);
|
transform: skewX(-13deg);
|
||||||
@ -70,7 +70,7 @@ watch(
|
|||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
text-shadow: -2px 0 0 1px #add8f1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 36px;
|
padding: 0 38px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -47,8 +47,8 @@ const navlist = ref([
|
|||||||
{ title: '土地资源', name: 'land' },
|
{ title: '土地资源', name: 'land' },
|
||||||
{ title: '投入品', name: 'inputs' },
|
{ title: '投入品', name: 'inputs' },
|
||||||
{ title: '生产经营主体', name: 'entities' },
|
{ title: '生产经营主体', name: 'entities' },
|
||||||
{ title: '智慧种植监测', name: 'plant' },
|
// { title: '智慧种植监测', name: 'plant' },
|
||||||
{ title: '智慧养殖监测', name: 'breed' },
|
// { title: '智慧养殖监测', name: 'breed' },
|
||||||
{ title: '全流程溯源', name: 'trace' },
|
{ title: '全流程溯源', name: 'trace' },
|
||||||
{ title: '产业预警决策', name: 'early' },
|
{ title: '产业预警决策', name: 'early' },
|
||||||
]);
|
]);
|
||||||
@ -83,12 +83,13 @@ const itemAct = (name) => {
|
|||||||
.b-nav-item {
|
.b-nav-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-width: 132px;
|
min-width: 180px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
|
background-size: 100% 100%;
|
||||||
span {
|
span {
|
||||||
font-size: 14px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
transform: skewX(-8deg);
|
transform: skewX(-8deg);
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
<div class="basic-layout" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
|
<div class="basic-layout" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
|
||||||
<div class="basic-layout-container">
|
<div class="basic-layout-container">
|
||||||
<Main />
|
<Main />
|
||||||
<!-- <Bottom :name-val="route.name"></Bottom> -->
|
<Bottom :name-val="route.name"></Bottom>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -43,12 +43,14 @@ export const constantRoutes = [
|
|||||||
path: '/sub-government-screen-service/inputs',
|
path: '/sub-government-screen-service/inputs',
|
||||||
name: 'inputs',
|
name: 'inputs',
|
||||||
component: () => import('@/views/inputs/index.vue'),
|
component: () => import('@/views/inputs/index.vue'),
|
||||||
|
meta: { title: '投入品' },
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-screen-service/entities',
|
path: '/sub-government-screen-service/entities',
|
||||||
name: 'entities',
|
name: 'entities',
|
||||||
component: () => import('@/views/entities/index.vue'),
|
component: () => import('@/views/entities/index.vue'),
|
||||||
|
meta: { title: '生产经营主体' },
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -56,74 +58,31 @@ export const constantRoutes = [
|
|||||||
name: 'breed',
|
name: 'breed',
|
||||||
component: () => import('@/views/breed/index.vue'),
|
component: () => import('@/views/breed/index.vue'),
|
||||||
hidden: true,
|
hidden: true,
|
||||||
|
meta: { title: '智慧养殖监测' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-screen-service/plant',
|
path: '/sub-government-screen-service/plant',
|
||||||
name: 'plant',
|
name: 'plant',
|
||||||
component: () => import('@/views/plant/index.vue'),
|
component: () => import('@/views/plant/index.vue'),
|
||||||
hidden: true,
|
hidden: true,
|
||||||
|
meta: { title: '智慧种植监测' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-screen-service/trace',
|
path: '/sub-government-screen-service/trace',
|
||||||
name: 'trace',
|
name: 'trace',
|
||||||
component: () => import('@/views/trace/index.vue'),
|
component: () => import('@/views/trace/index.vue'),
|
||||||
|
meta: { title: '全流程溯源' },
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-screen-service/early',
|
path: '/sub-government-screen-service/early',
|
||||||
name: 'early',
|
name: 'early',
|
||||||
component: () => import('@/views/early/index.vue'),
|
component: () => import('@/views/early/index.vue'),
|
||||||
|
meta: { title: '产业预警决策' },
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/home',
|
|
||||||
// name: 'home',
|
|
||||||
// component: () => import('@/views/home/index.vue'),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/land',
|
|
||||||
// name: 'land',
|
|
||||||
// component: () => import('@/views/land/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/inputs',
|
|
||||||
// name: 'inputs',
|
|
||||||
// component: () => import('@/views/inputs/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/entities',
|
|
||||||
// name: 'entities',
|
|
||||||
// component: () => import('@/views/entities/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/breed',
|
|
||||||
// name: 'breed',
|
|
||||||
// component: () => import('@/views/breed/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/plant',
|
|
||||||
// name: 'plant',
|
|
||||||
// component: () => import('@/views/plant/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/trace',
|
|
||||||
// name: 'trace',
|
|
||||||
// component: () => import('@/views/trace/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-screen-service/early',
|
|
||||||
// name: 'early',
|
|
||||||
// component: () => import('@/views/early/index.vue'),
|
|
||||||
// hidden: true,
|
|
||||||
// },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'breed'" top-title="智慧养殖管理系统">
|
<baseBg :name-val="'breed'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'early'" top-title="产业预警管理系统">
|
<baseBg :name-val="'early'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
@ -31,7 +31,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6" class="right-charts">
|
<el-col :span="6" class="right-charts">
|
||||||
<div class="right-charts-item" style="height: 67%">
|
<div class="right-charts-item" style="height: 67%">
|
||||||
<customBack top-title="农场品实时价格" :top-postion="'right'">
|
<customBack top-title="农产品实时价格" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<realTimePrice></realTimePrice>
|
<realTimePrice></realTimePrice>
|
||||||
</template>
|
</template>
|
||||||
|
@ -68,6 +68,13 @@ const chartsData = reactive({
|
|||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
var str = params[0].name + ':';
|
var str = params[0].name + ':';
|
||||||
params.filter(function (item) {
|
params.filter(function (item) {
|
||||||
|
@ -30,6 +30,9 @@ const plantBreed = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: '{b}:{c}吨',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -46,11 +49,11 @@ const plantBreed = reactive({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
valData: [
|
valData: [
|
||||||
{ value: 205, name: '肉类' },
|
{ value: 205.3, name: '肉类' },
|
||||||
{ value: 308, name: '水果' },
|
{ value: 308.2, name: '水果' },
|
||||||
{ value: 359, name: '蔬菜' },
|
{ value: 359.6, name: '蔬菜' },
|
||||||
{ value: 452, name: '水产' },
|
{ value: 452.8, name: '水产' },
|
||||||
{ value: 388, name: '谷物' },
|
{ value: 388.2, name: '谷物' },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -4,7 +4,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted, computed } from 'vue';
|
||||||
|
|
||||||
|
let dataList = reactive(['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡']);
|
||||||
|
let typeList = reactive(['个体户', '村集体', '合作社', '经营企业']);
|
||||||
|
let handleList = computed(() => {
|
||||||
|
let list = [];
|
||||||
|
dataList.forEach((m) => {
|
||||||
|
let listval = [];
|
||||||
|
typeList.forEach((n, indexn) => {
|
||||||
|
listval.push({
|
||||||
|
name: m,
|
||||||
|
value: (100 + Math.random() * 100).toFixed(0),
|
||||||
|
type: n,
|
||||||
|
seriesType: 'bar',
|
||||||
|
stack: m,
|
||||||
|
itemStyle: indexn == typeList.length - 1 ? { borderRadius: [8, 8, 0, 0] } : {},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
list.push(...listval);
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
});
|
||||||
const chartsData = reactive({
|
const chartsData = reactive({
|
||||||
option: {
|
option: {
|
||||||
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
||||||
@ -26,6 +47,16 @@ const chartsData = reactive({
|
|||||||
color: '#fff', // 图例文字的颜色
|
color: '#fff', // 图例文字的颜色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}家',
|
||||||
|
},
|
||||||
barStyle: {
|
barStyle: {
|
||||||
barWidth: 18,
|
barWidth: 18,
|
||||||
},
|
},
|
||||||
@ -38,16 +69,16 @@ const chartsData = reactive({
|
|||||||
},
|
},
|
||||||
itemStyle: { fontSize: 10 },
|
itemStyle: { fontSize: 10 },
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
type: 'value',
|
// type: 'value',
|
||||||
name: '占比',
|
// name: '占比',
|
||||||
min: 0,
|
// min: 0,
|
||||||
max: 100,
|
// max: 100,
|
||||||
axisLabel: {
|
// axisLabel: {
|
||||||
formatter: '{value} %',
|
// formatter: '{value} %',
|
||||||
},
|
// },
|
||||||
itemStyle: { fontSize: 10 },
|
// itemStyle: { fontSize: 10 },
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
grid: {
|
grid: {
|
||||||
x: '10%',
|
x: '10%',
|
||||||
@ -56,18 +87,7 @@ const chartsData = reactive({
|
|||||||
y2: '20%',
|
y2: '20%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
valData: [
|
valData: [...handleList.value],
|
||||||
{ name: '耿马', value: 40, type: '个体户', seriesType: 'bar', stack: '耿马' },
|
|
||||||
{ name: '耿马', value: 30, type: '村集体', seriesType: 'bar', stack: '耿马' },
|
|
||||||
{ name: '耿马', value: 100, type: '合作社', seriesType: 'bar', stack: '耿马' },
|
|
||||||
{ name: '耿马', value: 60, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
||||||
{ name: '耿马', value: 10, type: '趋势', seriesType: 'line' },
|
|
||||||
{ name: '大香乡', value: 20, type: '个体户', seriesType: 'bar', stack: '大香乡' },
|
|
||||||
{ name: '大香乡', value: 20, type: '村集体', seriesType: 'bar', stack: '大香乡' },
|
|
||||||
{ name: '大香乡', value: 80, type: '合作社', seriesType: 'bar', stack: '大香乡' },
|
|
||||||
{ name: '大香乡', value: 40, type: '经营企业', seriesType: 'bar', stack: '大香乡', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
||||||
{ name: '大香乡', value: 50, type: '趋势', seriesType: 'line' },
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'entities'" top-title="生产经主体管理系统">
|
<baseBg :name-val="'entities'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
|
@ -30,6 +30,16 @@ const plantBreed = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}家',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -58,7 +68,7 @@ onMounted(() => {
|
|||||||
if (plantBreed.valData && plantBreed.length) {
|
if (plantBreed.valData && plantBreed.length) {
|
||||||
plantBreed.valData.forEach((m, index) => {
|
plantBreed.valData.forEach((m, index) => {
|
||||||
let num = 100;
|
let num = 100;
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
m.value = (Number(m.value) + Math.random() + num).toFixed(0);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -54,8 +54,8 @@ const datalist = reactive([
|
|||||||
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
|
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
|
||||||
{ label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
{ label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
||||||
{ label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
|
{ label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
|
||||||
{ label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
// { label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
||||||
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
// { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -16,7 +16,7 @@ const plantBreed = ref({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['种植面积', '养殖面积', '种植基地', '养殖基地'],
|
data: ['农企/合作社', '农资企业', '种源企业', '生产加工企业', '农户'],
|
||||||
right: '0', // 距离左侧10%的位置
|
right: '0', // 距离左侧10%的位置
|
||||||
top: 'middle', // 垂直居中
|
top: 'middle', // 垂直居中
|
||||||
orient: 'vertical', // 图例垂直排列
|
orient: 'vertical', // 图例垂直排列
|
||||||
@ -30,6 +30,16 @@ const plantBreed = ref({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}万亩',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -40,16 +50,17 @@ const plantBreed = ref({
|
|||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 2,
|
borderRadius: 5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
valData: [
|
valData: [
|
||||||
{ value: 100, name: '种植面积' },
|
{ value: 10, name: '农企/合作社' },
|
||||||
{ value: 105, name: '养殖面积' },
|
{ value: 15, name: '农资企业' },
|
||||||
{ value: 217, name: '种植基地' },
|
{ value: 27, name: '种源企业' },
|
||||||
{ value: 315, name: '养殖基地' },
|
{ value: 31, name: '生产加工企业' },
|
||||||
|
{ value: 9, name: '农户' },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<div class="list-item-l">
|
<div class="list-item-l">
|
||||||
<div class="item-top">
|
<div class="item-top">
|
||||||
<span class="label"> {{ item.title || '--' }}</span>
|
<span class="label"> {{ item.title || '--' }}</span>
|
||||||
<span class="value"> {{ item.value || '0' }}</span>
|
<span class="value"> {{ item.value || '0' }}万亩</span>
|
||||||
</div>
|
</div>
|
||||||
<customProgress height="6px" :percent="item.percent" inactive-bg="#081931"></customProgress>
|
<customProgress height="6px" :percent="item.percent" inactive-bg="#081931"></customProgress>
|
||||||
</div>
|
</div>
|
||||||
|
@ -92,7 +92,7 @@ const randomVal = (num) => {
|
|||||||
let addNum = [10, 8, 2, 5];
|
let addNum = [10, 8, 2, 5];
|
||||||
let val = {
|
let val = {
|
||||||
name: num + '月',
|
name: num + '月',
|
||||||
value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
|
value: Number(Math.random() * 100 + addNum[i]).toFixed(0),
|
||||||
seriesType: i < legendList.length - 1 ? 'bar' : 'line',
|
seriesType: i < legendList.length - 1 ? 'bar' : 'line',
|
||||||
type: legendList[i],
|
type: legendList[i],
|
||||||
stack: num + '月',
|
stack: num + '月',
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg ref="homebase" :name-val="'home'" top-title=" ">
|
<baseBg ref="homebase" :name-val="'home'" top-title="政务云数字农业智慧大屏">
|
||||||
<!-- <template #top> </template> -->
|
<!-- <template #top> </template> -->
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
@ -20,7 +20,7 @@
|
|||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="种养殖数据统计" :top-postion="'left'">
|
<customBack top-title="生产经营主体用地情况" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<plantBreedCharts></plantBreedCharts>
|
<plantBreedCharts></plantBreedCharts>
|
||||||
</template>
|
</template>
|
||||||
@ -60,7 +60,7 @@
|
|||||||
<div class="home-index-top-warp">
|
<div class="home-index-top-warp">
|
||||||
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
|
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
|
||||||
<div class="home-data-p">
|
<div class="home-data-p">
|
||||||
<!-- <h3 class="home-title">耿马县农产品销售情况</h3> -->
|
<!-- <h3 class="home-title">政务云数字农业智慧大屏</h3> -->
|
||||||
<div class="home-data-top">¥1284.624万</div>
|
<div class="home-data-top">¥1284.624万</div>
|
||||||
<div class="home-data-contrast">
|
<div class="home-data-contrast">
|
||||||
<span class="tips">同比去年</span>
|
<span class="tips">同比去年</span>
|
||||||
@ -86,12 +86,12 @@ import { isEmpty, getAssetsFile } from '@/utils';
|
|||||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||||
|
|
||||||
let rollDataList = reactive([
|
let rollDataList = reactive([
|
||||||
{ title: '勐腊镇', value: 533.1 },
|
{ title: '勐腊镇', value: 53.1 },
|
||||||
{ title: '孟定镇', value: 1069.2 },
|
{ title: '孟定镇', value: 86.2 },
|
||||||
{ title: '孟永镇', value: 411.8 },
|
{ title: '孟永镇', value: 41.8 },
|
||||||
{ title: '耿马镇', value: 429.4 },
|
{ title: '耿马镇', value: 42.4 },
|
||||||
{ title: '大兴乡', value: 162.7 },
|
{ title: '大兴乡', value: 62.7 },
|
||||||
{ title: '勐简乡', value: 2309.9 },
|
{ title: '勐简乡', value: 23.9 },
|
||||||
// 更多项...
|
// 更多项...
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -23,6 +23,16 @@ const chartsData = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}',
|
||||||
|
},
|
||||||
barStyle: {
|
barStyle: {
|
||||||
barWidth: 15,
|
barWidth: 15,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
@ -30,6 +30,16 @@ const chartsData = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}家',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
|
@ -33,6 +33,36 @@ const chartsData = reactive({
|
|||||||
},
|
},
|
||||||
data: ['农药', '肥料', '种源', '兽药', '农机'],
|
data: ['农药', '肥料', '种源', '兽药', '农机'],
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
// 获取月份名称(如:1月)
|
||||||
|
const month = params[0].axisValue;
|
||||||
|
// 生成带颜色标记的条目列表
|
||||||
|
const list = params
|
||||||
|
.map((item) => {
|
||||||
|
return `
|
||||||
|
<div style="margin: 5px 0;">
|
||||||
|
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px"></span>
|
||||||
|
${item.seriesName}: ${item.value}吨
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div style="font-weight:700;margin-bottom:5px">${month}</div>
|
||||||
|
${list}
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: ' ',
|
name: ' ',
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'inputs'" top-title="投入品管理系统">
|
<baseBg :name-val="'inputs'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
@ -19,7 +19,7 @@
|
|||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="种养殖数据统计" :top-postion="'left'">
|
<customBack top-title="投入品检测信息" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<landbreedCharts></landbreedCharts>
|
<landbreedCharts></landbreedCharts>
|
||||||
</template>
|
</template>
|
||||||
|
@ -30,6 +30,16 @@ const chartsData = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}万亩',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -49,15 +59,15 @@ const chartsData = reactive({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
valData: [
|
valData: [
|
||||||
{ value: 205.6, name: '耿马镇' },
|
{ value: 20.6, name: '耿马镇' },
|
||||||
{ value: 308.7, name: '勐撒镇' },
|
{ value: 30.7, name: '勐撒镇' },
|
||||||
{ value: 359.6, name: '勐永镇' },
|
{ value: 35.6, name: '勐永镇' },
|
||||||
{ value: 452.6, name: '孟定镇' },
|
{ value: 45.6, name: '孟定镇' },
|
||||||
{ value: 388.9, name: '勐简乡' },
|
{ value: 38.9, name: '勐简乡' },
|
||||||
{ value: 508.7, name: '贺派乡' },
|
{ value: 50.7, name: '贺派乡' },
|
||||||
{ value: 369.5, name: '四排山乡' },
|
{ value: 36.5, name: '四排山乡' },
|
||||||
{ value: 610.8, name: '芒洪乡' },
|
{ value: 61.8, name: '芒洪乡' },
|
||||||
{ value: 754.3, name: '大兴乡' },
|
{ value: 75.3, name: '大兴乡' },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -9,10 +9,10 @@ import { ref, reactive, onMounted } from 'vue';
|
|||||||
const chartsData = reactive({
|
const chartsData = reactive({
|
||||||
option: {
|
option: {
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '10%',
|
||||||
right: '4%',
|
right: '10%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true,
|
top: '8%',
|
||||||
},
|
},
|
||||||
// color: ['#3685fe', '#41b879', '#fed500'],
|
// color: ['#3685fe', '#41b879', '#fed500'],
|
||||||
title: {
|
title: {
|
||||||
@ -21,6 +21,37 @@ const chartsData = reactive({
|
|||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
extraCssText: 'box-shadow: 0 0 10px rgba(44, 244, 253, 0.3);',
|
||||||
|
formatter: function (params) {
|
||||||
|
// 获取月份名称(如:1月)
|
||||||
|
const month = params[0].axisValue;
|
||||||
|
// 生成带颜色标记的条目列表
|
||||||
|
const list = params
|
||||||
|
.map((item) => {
|
||||||
|
return `
|
||||||
|
<div style="margin: 5px 0;">
|
||||||
|
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px"></span>
|
||||||
|
${item.seriesName}: ${item.value}万亩
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div style="font-weight:700;margin-bottom:5px">${month}</div>
|
||||||
|
${list}
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
right: '0', // 距离左侧10%的位置
|
right: '0', // 距离左侧10%的位置
|
||||||
top: '0', // 垂直居中
|
top: '0', // 垂直居中
|
||||||
@ -65,47 +96,47 @@ const chartsData = reactive({
|
|||||||
{
|
{
|
||||||
name: '耿马镇',
|
name: '耿马镇',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
data: [12, 13, 10, 13, 90, 23, 21, 50, 60],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '勐撒镇',
|
name: '勐撒镇',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
data: [48, 18, 35, 26, 29, 35, 21, 20, 15],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '勐永镇',
|
name: '勐永镇',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
|
data: [12, 56, 28, 43, 38, 59, 42, 18, 58],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '孟定镇',
|
name: '孟定镇',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
data: [12, 12, 11, 14, 90, 23, 20, 50, 60],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '勐简乡',
|
name: '勐简乡',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
data: [48, 18, 33, 26, 20, 34, 25, 20, 18],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '贺派乡',
|
name: '贺派乡',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
|
data: [38, 12, 11, 32, 29, 30, 69, 51, 56],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '四排山乡',
|
name: '四排山乡',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
data: [12, 13, 10, 13, 90, 23, 21, 50, 60],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '芒洪乡',
|
name: '芒洪乡',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
|
data: [54, 18, 19, 10, 29, 33, 31, 51, 76],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '大兴乡',
|
name: '大兴乡',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
data: [12, 13, 10, 13, 90, 23, 21, 50, 60],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -6,15 +6,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
let seriesData = reactive([
|
let seriesData = reactive([
|
||||||
{ value: 205.6 },
|
{ value: 20.6 },
|
||||||
{ value: 308.7 },
|
{ value: 30.7 },
|
||||||
{ value: 359.6 },
|
{ value: 35.6 },
|
||||||
{ value: 452.6 },
|
{ value: 45.6 },
|
||||||
{ value: 388.9 },
|
{ value: 38.9 },
|
||||||
{ value: 508.7 },
|
{ value: 50.7 },
|
||||||
{ value: 369.5 },
|
{ value: 36.5 },
|
||||||
{ value: 610.8 },
|
{ value: 61.8 },
|
||||||
{ value: 754.3 },
|
{ value: 75.3 },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const chartsData = reactive({
|
const chartsData = reactive({
|
||||||
@ -27,7 +27,14 @@ const chartsData = reactive({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
formatter: '{b}:{c}亩',
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'land'" top-title="土地资源管理系统">
|
<baseBg :name-val="'land'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-plant-index">
|
<div class="data-plant-index">
|
||||||
<baseBg :name-val="'plant'" top-title="智慧种植管理系统">
|
<baseBg :name-val="'plant'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
|
@ -19,8 +19,8 @@
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
let valData = reactive([
|
let valData = reactive([
|
||||||
{ value: 205.6, name: '生产溯源码' },
|
{ value: 658, name: '生产溯源码' },
|
||||||
{ value: 308.7, name: '有效溯源码' },
|
{ value: 526, name: '有效溯源码' },
|
||||||
]);
|
]);
|
||||||
const chartsData = reactive({
|
const chartsData = reactive({
|
||||||
option: {
|
option: {
|
||||||
|
@ -30,6 +30,16 @@ const chartsData = reactive({
|
|||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}家',
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -60,7 +70,7 @@ onMounted(() => {
|
|||||||
if (chartsData.valData && chartsData.valData.length) {
|
if (chartsData.valData && chartsData.valData.length) {
|
||||||
chartsData.valData.forEach((m, index) => {
|
chartsData.valData.forEach((m, index) => {
|
||||||
let num = 100;
|
let num = 100;
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
m.value = (Number(m.value) + Math.random() + num).toFixed(0);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -27,6 +27,16 @@ const chartsData = reactive({
|
|||||||
color: '#fff', // 图例文字的颜色
|
color: '#fff', // 图例文字的颜色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||||||
|
borderColor: '#2cf4fd', // 边框颜色
|
||||||
|
borderWidth: 1, // 边框宽度
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', // 文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: '{b}:{c}吨',
|
||||||
|
},
|
||||||
label: {
|
label: {
|
||||||
color: '#333',
|
color: '#333',
|
||||||
},
|
},
|
||||||
@ -54,7 +64,7 @@ const chartsData = reactive({
|
|||||||
{ value: 41, name: '蔬菜' },
|
{ value: 41, name: '蔬菜' },
|
||||||
{ value: 141, name: '水产' },
|
{ value: 141, name: '水产' },
|
||||||
{ value: 41, name: '禽畜肉蛋' },
|
{ value: 41, name: '禽畜肉蛋' },
|
||||||
{ value: 141, name: '米面粮油' },
|
{ value: 142, name: '米面粮油' },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data-home-index">
|
<div class="data-home-index">
|
||||||
<baseBg :name-val="'trace'" top-title="全程溯源管理系统">
|
<baseBg :name-val="'trace'" top-title="政务云数字农业智慧大屏">
|
||||||
<template #center>
|
<template #center>
|
||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
|
@ -192,9 +192,9 @@ const state = reactive({
|
|||||||
},
|
},
|
||||||
inputsData: [
|
inputsData: [
|
||||||
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
{ value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
// { value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
||||||
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
||||||
{ value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
// { value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
||||||
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
],
|
],
|
||||||
businessOption: {
|
businessOption: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user