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