产出品管理页面调整(未完)；小模块title和顶部菜单样式调整全局样式；
This commit is contained in:
2090205686@qq.com
parent
3330fed4e9
commit
bea334086a
BIN
src/assets/images/basic/tagBG-small.png
Normal file
BIN
src/assets/images/basic/tagBG-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
@ -36,10 +36,10 @@ export default {
|
||||
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||||
const option = reactive({
|
||||
tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// },
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
gap: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
position: 'outside',
|
||||
width: '200px',
|
||||
align: 'right',
|
||||
formatter: function (params) {
|
||||
@ -74,9 +74,29 @@ export default {
|
||||
a: { color: '#fff', fontSize: '16px' },
|
||||
b: { color: '#05FCC6', fontSize: '16px' },
|
||||
},
|
||||
verticalAlign: 'middle',
|
||||
padding: [5, 10], // 增加标签内边距
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 30,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#ffffff',
|
||||
opacity: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
// 自定义折线路径（从标签到数据点的像素坐标）
|
||||
// 参数：idx-数据索引, params-包含标签位置信息的对象
|
||||
// formatter: function (idx, params) {
|
||||
// return [
|
||||
// [params.labelRect.x, params.labelRect.y], // 起点（标签位置）
|
||||
// [params.labelRect.x + 20, params.labelRect.y], // 水平线段
|
||||
// [params.labelRect.x + 20, params.dataCoord[1]] // 垂直线段
|
||||
// ];
|
||||
// },
|
||||
},
|
||||
itemStyle: {
|
||||
show: false,
|
||||
|
||||
@ -69,7 +69,7 @@ const props = defineProps({
|
||||
});
|
||||
const titleContentW = ref('0');
|
||||
const itemW = ref('1');
|
||||
const gap = ref(24);
|
||||
const gap = ref(1);
|
||||
const leftNum = ref(0);
|
||||
const position = ref(0);
|
||||
const right = ref(null);
|
||||
@ -133,7 +133,7 @@ function handleTitleClick(val) {
|
||||
.header_title {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
padding: 0 68px;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
@ -174,7 +174,7 @@ function handleTitleClick(val) {
|
||||
.left_titles_container,
|
||||
.right_titles_container {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 90px;
|
||||
@ -182,10 +182,10 @@ function handleTitleClick(val) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: var(--titleContentW);
|
||||
height: 40px;
|
||||
height: 56px;
|
||||
transition: all 0.4s ease;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
// font-weight: bold;
|
||||
.active {
|
||||
color: #fff;
|
||||
opacity: 1 !important;
|
||||
@ -194,9 +194,9 @@ function handleTitleClick(val) {
|
||||
.title_item {
|
||||
margin-right: var(--gap);
|
||||
display: inline-block;
|
||||
width: var(--itemW);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
min-width: var(--itemW);
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #f5fffe;
|
||||
cursor: pointer;
|
||||
|
||||
@ -147,8 +147,8 @@ const handleCommand = (data) => {
|
||||
}
|
||||
.title-top-content {
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
// font-weight: bold;
|
||||
display: inline-block;
|
||||
transform: skewX(-13deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
|
||||
@ -74,6 +74,7 @@ onMounted(() => {
|
||||
}
|
||||
.base-laytout-header {
|
||||
height: 90px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -145,6 +145,7 @@ function handleChange(n) {
|
||||
top: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-shadow: 2px 0px 10px 0px #01eeff;
|
||||
}
|
||||
.left_btn {
|
||||
left: 6px;
|
||||
|
||||
@ -1,39 +1,60 @@
|
||||
<template>
|
||||
<customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
|
||||
<customEchartHyalineCake ref="chartRef" :chart-data="data" height="100%" :option="option" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
const chartRef = ref(null);
|
||||
|
||||
/* --------------- data --------------- */
|
||||
/* --------------- data右上侧饼图 --------------- */
|
||||
// #region
|
||||
const data = ref([
|
||||
{
|
||||
name: '企业',
|
||||
name: ' 企业',
|
||||
value: 10.8,
|
||||
itemStyle: { color: '#3c5fc4', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: '合作社',
|
||||
value: 8.4,
|
||||
name: ' 合作社',
|
||||
value: 18.4,
|
||||
itemStyle: { color: '#8fd8ff', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: '村集体',
|
||||
value: 4.3,
|
||||
name: ' 村集体',
|
||||
value: 14.3,
|
||||
itemStyle: { color: '#55d9a4', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: '个体',
|
||||
value: 3.7,
|
||||
name: ' 个体',
|
||||
value: 23.7,
|
||||
itemStyle: { color: '#d2a823', opacity: 0.8 },
|
||||
},
|
||||
]);
|
||||
|
||||
let itemGapWith = ref(0);
|
||||
const getChartrefWith = () => {
|
||||
let len = data.value.length * 2;
|
||||
return chartRef.value.$refs.chartRef.offsetWidth / len + 8;
|
||||
};
|
||||
|
||||
const option = reactive({
|
||||
k: 0.2,
|
||||
opacity: 0.6,
|
||||
opacity: 0.4,
|
||||
itemGap: 0,
|
||||
autoItemHeight: 3,
|
||||
legend: {
|
||||
type: 'plain',
|
||||
orient: 'horizontal',
|
||||
width: '100%',
|
||||
bottom: 10,
|
||||
left: 'center',
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: itemGapWith.value ? itemGapWith.value : 50,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16px',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '23亿元',
|
||||
@ -47,18 +68,18 @@ const option = reactive({
|
||||
color: '#02FD94',
|
||||
fontSize: '18px',
|
||||
},
|
||||
top: 'center',
|
||||
top: '26%',
|
||||
left: 'center',
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: 'center',
|
||||
boxHeight: 3,
|
||||
top: '-15%', //调整距离顶部距离，0是在中间
|
||||
left: 'center',
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 30, //角度(这个很重要 调节角度的)
|
||||
distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
alpha: 36, //角度(这个很重要 调节角度的)
|
||||
distance: 130, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||
@ -73,6 +94,10 @@ const option = reactive({
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
onMounted(() => {
|
||||
itemGapWith.value = getChartrefWith();
|
||||
option.legend.itemGap = itemGapWith.value ? itemGapWith.value : 50;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -67,7 +67,7 @@ const state = reactive({
|
||||
});
|
||||
|
||||
const refresData = () => {
|
||||
console.info('landPatrol********************refresData');
|
||||
// console.info('landPatrol********************refresData');
|
||||
state.data = reactive([
|
||||
{
|
||||
value: 20,
|
||||
|
||||
@ -2,21 +2,23 @@
|
||||
<custom-echart-column-line :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty, sleep } from '@/utils';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
query: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
data: [
|
||||
{ value: 103, value1: 208, name: '耿马镇' },
|
||||
{ value: 72, value1: 157, name: '勐撒镇' },
|
||||
{ value: 50, value1: 125, name: '勐永镇' },
|
||||
{ value: 60, value1: 146, name: '孟定镇' },
|
||||
{ value: 40, value1: 86, name: '勐简乡' },
|
||||
{ value: 111, value1: 172, name: '贺派乡' },
|
||||
{ value: 81, value1: 180, name: '四排山乡' },
|
||||
{ value: 55, value1: 99, name: '芒洪乡' },
|
||||
{ value: 68, value1: 84, name: '大兴乡' },
|
||||
],
|
||||
data: [],
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -38,8 +40,8 @@ const state = reactive({
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万</span><br />
|
||||
<span>${data[1].marker} ${data[1].data} 万</span>
|
||||
<span>${params.marker} ${params.data} 万吨</span><br />
|
||||
<span>${data[1].marker} ${data[1].data} 万吨</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
@ -200,4 +202,55 @@ const state = reactive({
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const loadData = async (code = '') => {
|
||||
state.loading = true;
|
||||
// GetInputsInfo()
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// state.data = res.data;
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// });
|
||||
await sleep(500);
|
||||
state.data = [
|
||||
{ value: 103, value1: 208, name: '耿马镇' },
|
||||
{ value: 72, value1: 157, name: '勐撒镇' },
|
||||
{ value: 50, value1: 125, name: '勐永镇' },
|
||||
{ value: 60, value1: 146, name: '孟定镇' },
|
||||
{ value: 40, value1: 86, name: '勐简乡' },
|
||||
{ value: 111, value1: 172, name: '贺派乡' },
|
||||
{ value: 81, value1: 180, name: '四排山乡' },
|
||||
{ value: 55, value1: 99, name: '芒洪乡' },
|
||||
{ value: 68, value1: 84, name: '大兴乡' },
|
||||
];
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.query,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
loadData(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,40 @@
|
||||
<template>
|
||||
<customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
|
||||
<customEchartHyalineCake :chart-data="dataList" height="100%" :option="option" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
/* --------------- 左中饼图 --------------- */
|
||||
// #region
|
||||
const data = ref([
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '烟草',
|
||||
value: 60.8,
|
||||
money: 100,
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 44.4,
|
||||
money: 88,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: 24.3,
|
||||
money: 92,
|
||||
},
|
||||
{
|
||||
name: '蔬菜',
|
||||
value: 32.7,
|
||||
money: 56,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 32.9,
|
||||
money: 18,
|
||||
},
|
||||
]);
|
||||
|
||||
const option = reactive({
|
||||
k: 0.3,
|
||||
opacity: 1,
|
||||
@ -36,13 +42,13 @@ const option = reactive({
|
||||
autoItemHeight: 2,
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: '0',
|
||||
boxHeight: 4, //厚度
|
||||
top: '0', //距离顶部的距离
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 30, //角度(这个很重要 调节角度的)
|
||||
distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
distance: 200, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||
@ -50,6 +56,41 @@ const option = reactive({
|
||||
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||||
},
|
||||
},
|
||||
// series: [
|
||||
// // 透明的 2D 饼图（仅用于生成标签折线）
|
||||
// {
|
||||
// type: 'pie',
|
||||
// radius: ['30%', '70%'],
|
||||
// center: ['40%', '50%'],
|
||||
// startAngle: -40, // 调整角度与 3D 图形对齐
|
||||
// clockwise: false,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'outside',
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// return `{a|${params.data.name}}\n{b|${params.data.money}万元}`;
|
||||
// },
|
||||
// rich: {
|
||||
// a: { color: '#ffffff' },
|
||||
// b: { color: '#79F5AF' },
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: true,
|
||||
// length: 10,
|
||||
// length2: 15,
|
||||
// lineStyle: {
|
||||
// color: '#ffffff',
|
||||
// width: 1,
|
||||
// },
|
||||
// },
|
||||
// data: dataList,
|
||||
// itemStyle: {
|
||||
// opacity: 1, // 隐藏扇区，仅保留标签和折线
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
// #endregion
|
||||
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<div ref="chartsWarp" class="hot-charts">
|
||||
<section class="_top_btns">
|
||||
<span class="left_btn" @click="handleChange(-1)"></span>
|
||||
<span class="right_btn" @click="handleChange(1)"></span>
|
||||
{{ current.info.name }}
|
||||
</section>
|
||||
<custom-echart-triangle :chart-data="data" height="100%" :option="option" />
|
||||
</div>
|
||||
</template>
|
||||
@ -13,9 +18,72 @@ const data = ref([
|
||||
]);
|
||||
const option = reactive({});
|
||||
onMounted(() => {});
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: '茶叶',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
value: '3',
|
||||
},
|
||||
]);
|
||||
const current = reactive({
|
||||
index: 0,
|
||||
length: list.value.length - 1,
|
||||
info: {
|
||||
name: '茶叶',
|
||||
value: '20',
|
||||
},
|
||||
});
|
||||
function handleChange(n) {
|
||||
if (current.index == 0 && n == -1) {
|
||||
current.index = current.length;
|
||||
} else if (current.index == current.length && n == 1) {
|
||||
current.index = 0;
|
||||
} else {
|
||||
current.index += n;
|
||||
}
|
||||
current.info = list.value[current.index];
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.hot-charts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
._top_btns {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
width: 30%;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 40px;
|
||||
background: url('../../../assets/images/basic/tagBG-small.png') no-repeat center center / cover;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-shadow: 2px 0px 10px 0px #01eeff;
|
||||
}
|
||||
.left_btn {
|
||||
left: -10px;
|
||||
background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
|
||||
}
|
||||
.right_btn {
|
||||
right: -10px;
|
||||
background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -100,6 +100,7 @@ import entitiesMap from './components/entitiesMap.vue';
|
||||
import { sleep } from '@/utils';
|
||||
|
||||
const oneRef = ref(null);
|
||||
const thirdRef = ref(null);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
@ -144,9 +145,9 @@ const handleCommand = (data) => {
|
||||
const handleContrast = (data) => {
|
||||
state.contrastCode = data.value;
|
||||
// console.info('data=', data);
|
||||
// nextTick(() => {
|
||||
// thirdRef.value && thirdRef.value.refresData();
|
||||
// });
|
||||
nextTick(() => {
|
||||
thirdRef.value && thirdRef.value.refresData();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user