feat:删除无用文件
This commit is contained in:
commit
68fcb4b5e2
73
main/src/components/custom-echart-scatter-blister/index.vue
Normal file
73
main/src/components/custom-echart-scatter-blister/index.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ref, reactive, watch, watchEffect } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
import { useEcharts } from '../../hooks/useEcharts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'customEchartScatterBlister',
|
||||||
|
props: {
|
||||||
|
chartData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
option: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: 'calc(100vh - 78px)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['click'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const chartRef = ref(null);
|
||||||
|
const { setOptions, getInstance, resize } = useEcharts(chartRef);
|
||||||
|
const option = reactive({
|
||||||
|
series: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
props.chartData && initCharts();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.size,
|
||||||
|
() => {
|
||||||
|
resize();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function initCharts() {
|
||||||
|
if (props.option) {
|
||||||
|
Object.assign(option, cloneDeep(props.option));
|
||||||
|
}
|
||||||
|
option.series = props.chartData;
|
||||||
|
setOptions(option);
|
||||||
|
resize();
|
||||||
|
getInstance()?.off('click', onClick);
|
||||||
|
getInstance()?.on('click', onClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick(params) {
|
||||||
|
emit('click', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { chartRef };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -17,6 +17,7 @@ import CustomEchartPie3d from './custom-echart-pie-3d';
|
|||||||
import CustomEchartWaterDroplet from './custom-echart-water-droplet';
|
import CustomEchartWaterDroplet from './custom-echart-water-droplet';
|
||||||
import CustomEchartPieGauge from './custom-echart-pie-gauge';
|
import CustomEchartPieGauge from './custom-echart-pie-gauge';
|
||||||
import CustomEchartWordCloud from './custom-echart-word-cloud';
|
import CustomEchartWordCloud from './custom-echart-word-cloud';
|
||||||
|
import customEchartScatterBlister from './custom-echart-scatter-blister';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
SvgIcon,
|
SvgIcon,
|
||||||
@ -38,4 +39,5 @@ export {
|
|||||||
CustomEchartWaterDroplet,
|
CustomEchartWaterDroplet,
|
||||||
CustomEchartPieGauge,
|
CustomEchartPieGauge,
|
||||||
CustomEchartWordCloud,
|
CustomEchartWordCloud,
|
||||||
|
customEchartScatterBlister,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
|
|
||||||
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart, GaugeChart } from 'echarts/charts';
|
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart, GaugeChart, ScatterChart } from 'echarts/charts';
|
||||||
import 'echarts-gl';
|
import 'echarts-gl';
|
||||||
import 'echarts-liquidfill';
|
import 'echarts-liquidfill';
|
||||||
import 'echarts-wordcloud';
|
import 'echarts-wordcloud';
|
||||||
@ -48,6 +48,7 @@ echarts.use([
|
|||||||
GraphicComponent,
|
GraphicComponent,
|
||||||
GraphChart,
|
GraphChart,
|
||||||
GaugeChart,
|
GaugeChart,
|
||||||
|
ScatterChart,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export default echarts;
|
export default echarts;
|
||||||
|
|||||||
1753
package-lock.json
generated
1753
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,11 @@
|
|||||||
import request from '@/utils/axios';
|
import request from '@/utils/axios';
|
||||||
import { isEmpty } from '@/utils';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Title: 获取字典
|
* @Title: 获取字典
|
||||||
*/
|
*/
|
||||||
export function CommonDicData(params = { pageNum: 1, pageSize: 20, dictType: null }) {
|
export function CommonDicData(dictType) {
|
||||||
if (isEmpty(params?.dictType)) return;
|
return request(`/system/dict/data/type/${dictType}`, {
|
||||||
return request(`/system/dict/data/list`, {
|
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
apisType: 'dicData',
|
|
||||||
params,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
* @Author: zenghua.wang
|
* @Author: zenghua.wang
|
||||||
* @Date: 2022-02-23 21:12:37
|
* @Date: 2022-02-23 21:12:37
|
||||||
* @LastEditors: zenghua.wang
|
* @LastEditors: zenghua.wang
|
||||||
* @LastEditTime: 2025-02-18 09:47:41
|
* @LastEditTime: 2025-03-26 10:02:18
|
||||||
*/
|
*/
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { ElNotification } from 'element-plus';
|
import { ElNotification } from 'element-plus';
|
||||||
@ -51,10 +51,6 @@ publicAxios.interceptors.request.use(async (config) => {
|
|||||||
config.headers['Content-Type'] = config.uploadType;
|
config.headers['Content-Type'] = config.uploadType;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'dicData': {
|
|
||||||
config.baseURL = VITE_APP_DICDATA_API;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default: {
|
default: {
|
||||||
config.baseURL = VITE_APP_BASE_API;
|
config.baseURL = VITE_APP_BASE_API;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,199 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="options_btns">
|
|
||||||
<el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
|
|
||||||
{{ item.label }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table :data="list">
|
|
||||||
<el-table-column type="selection" width="55" />
|
|
||||||
<el-table-column type="index"> </el-table-column>
|
|
||||||
<el-table-column label="任务编号" prop="landName" show-overflow-tooltip />
|
|
||||||
<el-table-column label="任务名称" prop="address" show-overflow-tooltip />
|
|
||||||
<el-table-column label="任务成员" prop="owner" show-overflow-tooltip />
|
|
||||||
<el-table-column label="巡查类型" prop="landClassificationType" show-overflow-tooltip />
|
|
||||||
<el-table-column label="巡查注意事项" prop="978.2" show-overflow-tooltip />
|
|
||||||
<el-table-column label="巡查对象" prop="coordinate" show-overflow-tooltip />
|
|
||||||
<el-table-column label="是否违法" prop="landTransfer" show-overflow-tooltip>
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ !row.landTransfer ? '是' : '否' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" prop="landTransfer" show-overflow-tooltip>
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ !row.landTransfer ? '是' : '否' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
|
||||||
<el-button type="primary" @click="doResults()">登记结果</el-button>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<Pagina :page-data="pageData" />
|
|
||||||
<el-dialog v-model="infoVisible" title="新增巡查" width="1000" center>
|
|
||||||
<el-form ref="infoRef" :model="infoData" :rules="infoRules">
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="任务编号:" prop="num">
|
|
||||||
<el-input v-model="infoData.num" placeholder="请输入" style="width: 240px"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="任务名称" prop="name">
|
|
||||||
<el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="任务成员" prop="member">
|
|
||||||
<el-select v-model="infoData.member" :multiple="true" placeholder="请选择任务成员" style="width: 240px" :clearable="true">
|
|
||||||
<el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="巡查类型" prop="gridName">
|
|
||||||
<el-select v-model="infoData.type" placeholder="请选择巡查类型" style="width: 240px" :clearable="true">
|
|
||||||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="巡查注意事项" prop="gridName">
|
|
||||||
<el-input
|
|
||||||
v-model="infoData.mark"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
type="textarea"
|
|
||||||
laceholder="请输入巡查注意事项"
|
|
||||||
style="width: 240px"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="巡查对象" prop="gridName">
|
|
||||||
<el-select v-model="infoData.target" placeholder="请选择巡查对象" style="width: 240px" :clearable="true">
|
|
||||||
<el-option v-for="item in objOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button @click="infoCancel">取消</el-button>
|
|
||||||
<el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
|
|
||||||
/* --------------- data --------------- */
|
|
||||||
// #region
|
|
||||||
const btns = reactive([
|
|
||||||
{
|
|
||||||
label: '新增巡查',
|
|
||||||
method: function () {
|
|
||||||
console.log('add');
|
|
||||||
infoVisible.value = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '导出',
|
|
||||||
disabled: true,
|
|
||||||
method: function () {
|
|
||||||
console.log('export');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const pageData = reactive({
|
|
||||||
page: 1,
|
|
||||||
size: 10,
|
|
||||||
total: 0,
|
|
||||||
});
|
|
||||||
const list = ref([]);
|
|
||||||
const infoVisible = ref(false);
|
|
||||||
const infoRef = ref();
|
|
||||||
const infoData = reactive({
|
|
||||||
num: '',
|
|
||||||
name: '',
|
|
||||||
member: [],
|
|
||||||
type: '',
|
|
||||||
mark: '',
|
|
||||||
target: '',
|
|
||||||
});
|
|
||||||
const infoRules = reactive({
|
|
||||||
num: [{ required: true, message: '请输入编号', trigger: 'blur' }],
|
|
||||||
});
|
|
||||||
const memberOptions = reactive([
|
|
||||||
{
|
|
||||||
value: '成员1',
|
|
||||||
label: 'Option1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '成员2',
|
|
||||||
label: 'Option2',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const typeOptions = reactive([
|
|
||||||
{
|
|
||||||
value: '巡查类型1',
|
|
||||||
label: 'Option1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '巡查类型2',
|
|
||||||
label: 'Option2',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const objOptions = reactive([
|
|
||||||
{
|
|
||||||
value: '巡查对象1',
|
|
||||||
label: 'Option1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '巡查对象2',
|
|
||||||
label: 'Option2',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
// #endregion
|
|
||||||
|
|
||||||
/* --------------- methods --------------- */
|
|
||||||
|
|
||||||
const doResults = () => {
|
|
||||||
console.info('登记结果');
|
|
||||||
};
|
|
||||||
|
|
||||||
const subMitInfo = (formEl) => {
|
|
||||||
if (!formEl) return;
|
|
||||||
formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
infoHide();
|
|
||||||
console.log('submit!');
|
|
||||||
} else {
|
|
||||||
console.log('error submit!');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const infoCancel = () => {
|
|
||||||
infoHide();
|
|
||||||
};
|
|
||||||
|
|
||||||
const infoHide = () => {
|
|
||||||
infoRef.value && infoRef.value.resetFields();
|
|
||||||
infoVisible.value = false;
|
|
||||||
};
|
|
||||||
// #region
|
|
||||||
|
|
||||||
// #endregion
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.options_btns {
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,449 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<splitpanes class="default-theme">
|
||||||
|
<pane size="16">
|
||||||
|
<el-col :span="4">
|
||||||
|
<custom-table-tree title="种养殖基地分类" :data="treeData" :option="treeOption" @node-click="onNodeClick">
|
||||||
|
<template #default="{ data }">
|
||||||
|
<div :class="{ 'text-primary': data.dictValue == treeSelected.dictValue }">
|
||||||
|
{{ data.dictLabel }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</custom-table-tree>
|
||||||
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
<pane size="84">
|
||||||
|
<el-col>
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
v-model="state.form"
|
||||||
|
v-model:search="state.query"
|
||||||
|
v-model:page="state.pageData"
|
||||||
|
:table-loading="state.loading"
|
||||||
|
:data="state.data"
|
||||||
|
:option="state.options"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@search-reset="searchChange"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@row-del="rowDel"
|
||||||
|
@row-save="rowSave"
|
||||||
|
@row-update="rowUpdate"
|
||||||
|
>
|
||||||
|
<template #menu-left>
|
||||||
|
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #status="{ row }">
|
||||||
|
<el-tag v-if="row.status == 1" type="success" size="small">启用</el-tag>
|
||||||
|
<el-tag v-if="row.status == 0" type="danger" size="small">禁用</el-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #menu="scope">
|
||||||
|
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { isEmpty, mockData, sleep, setDicData } from '@/utils';
|
||||||
|
import { CommonDicData } from '@/apis';
|
||||||
|
import { getLandsList } from '@/apis/land';
|
||||||
|
|
||||||
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
|
const app = useApp();
|
||||||
|
const UserStore = useUserStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const crudRef = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
selection: [],
|
||||||
|
options: {
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
selection: true,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '基地名称',
|
||||||
|
prop: 'p1',
|
||||||
|
search: true,
|
||||||
|
width: 200,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
overHidden: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '基地分类',
|
||||||
|
prop: 'type',
|
||||||
|
type: 'select',
|
||||||
|
props: {
|
||||||
|
label: 'landName',
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=20`,
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicFormatter: (res) => res.data?.records ?? [],
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '地块名',
|
||||||
|
prop: 'landName',
|
||||||
|
width: 200,
|
||||||
|
type: 'select',
|
||||||
|
props: {
|
||||||
|
label: 'landName',
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=20`,
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicFormatter: (res) => res.data?.records ?? [],
|
||||||
|
filterable: true,
|
||||||
|
remote: true,
|
||||||
|
clearable: true,
|
||||||
|
remoteMethod: (val) => remoteLandList(val),
|
||||||
|
change: (val) => selectedChange(val),
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
// addDisplay: true,
|
||||||
|
// editDisplay: true,
|
||||||
|
// viewDisplay: false,
|
||||||
|
// overHidden: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '区域位置',
|
||||||
|
prop: 'p3',
|
||||||
|
width: 200,
|
||||||
|
overHidden: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '区域面积',
|
||||||
|
prop: 'p4',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
type: 'select',
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '负责人',
|
||||||
|
prop: 'p5',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系电话',
|
||||||
|
prop: 'p6',
|
||||||
|
width: 150,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 150,
|
||||||
|
// search: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '更新时间',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 150,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => rowView(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '编辑',
|
||||||
|
icon: 'edit',
|
||||||
|
event: ({ row }) => rowEdit(row),
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'success',
|
||||||
|
// name: ({ row }) => {
|
||||||
|
// return row.status === 1 ? '禁用' : '启用';
|
||||||
|
// },
|
||||||
|
// icon: ({ row }) => {
|
||||||
|
// return row.status === 1 ? 'turnOff' : 'open';
|
||||||
|
// },
|
||||||
|
// event: ({ row }) => rowStatus(row),
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'danger',
|
||||||
|
name: '删除',
|
||||||
|
icon: 'delete',
|
||||||
|
event: ({ row }) => rowDel(row),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
pageData: {
|
||||||
|
total: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
currentRow: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
// tree
|
||||||
|
const treeData = ref([]);
|
||||||
|
const treeOption = ref({
|
||||||
|
nodeKey: 'id',
|
||||||
|
props: { label: 'dictLabel', id: 'dictValue' },
|
||||||
|
});
|
||||||
|
const treeSelected = ref({});
|
||||||
|
const getTree = async () => {
|
||||||
|
try {
|
||||||
|
const res = await CommonDicData({ dictType: 'sys_base_type' });
|
||||||
|
if (res.code == 200) {
|
||||||
|
treeData.value = res.data.records;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getTree();
|
||||||
|
|
||||||
|
// 加载
|
||||||
|
const loadData = async () => {
|
||||||
|
//state.loading = true;
|
||||||
|
// GetEntityList(state.query)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// const { current, size, total, records } = res.data;
|
||||||
|
// state.data = records;
|
||||||
|
// state.pageData = {
|
||||||
|
// currentPage: current || 1,
|
||||||
|
// pageSize: size || 10,
|
||||||
|
// total: total,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// state.data = [];
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// state.loading = false;
|
||||||
|
// });
|
||||||
|
|
||||||
|
state.loading = true;
|
||||||
|
await sleep(500);
|
||||||
|
state.data = mockData(
|
||||||
|
{
|
||||||
|
p1: '耿马镇一号基地',
|
||||||
|
landName: '耿马镇2025001号地块',
|
||||||
|
p3: '耿马傣族佤族自治县/耿马镇',
|
||||||
|
p4: '1000',
|
||||||
|
p5: '张三',
|
||||||
|
p6: '13837633838',
|
||||||
|
status: 1,
|
||||||
|
type: 1,
|
||||||
|
createTime: '2025-01-01',
|
||||||
|
updateTime: '2025-01-15',
|
||||||
|
},
|
||||||
|
10
|
||||||
|
);
|
||||||
|
state.loading = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
const onNodeClick = (data) => {
|
||||||
|
console.log(300, data);
|
||||||
|
treeSelected.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页数
|
||||||
|
const currentChange = (current) => {
|
||||||
|
state.query.current = current;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 条数
|
||||||
|
const sizeChange = (size) => {
|
||||||
|
state.query.size = size;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const searchChange = (params, done) => {
|
||||||
|
if (done) done();
|
||||||
|
state.query = params;
|
||||||
|
state.query.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
const refreshChange = () => {
|
||||||
|
loadData();
|
||||||
|
app.$message.success('刷新成功');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择
|
||||||
|
const selectionChange = (rows) => {
|
||||||
|
state.selection = rows;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看
|
||||||
|
const rowView = (row) => {
|
||||||
|
crudRef.value.rowView(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 启用、禁用
|
||||||
|
// const rowStatus = (row) => {
|
||||||
|
// console.info('操作状态');
|
||||||
|
// };
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
// const onAdd = () => {
|
||||||
|
// crudRef.value && crudRef.value.rowAdd();
|
||||||
|
// };
|
||||||
|
const rowSave = (row, done, loading) => {
|
||||||
|
// AddEntity(row)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('添加成功！');
|
||||||
|
// done();
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// loading();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const rowEdit = (row) => {
|
||||||
|
crudRef.value && crudRef.value.rowEdit(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const rowUpdate = (row, index, done, loading) => {
|
||||||
|
// UpdateEntity(row)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('更新成功！');
|
||||||
|
// done();
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// loading();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onDel = (rows = []) => {
|
||||||
|
if (isEmpty(rows)) return;
|
||||||
|
const ids = rows.map((item) => item.id);
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// DeleteEntity({ ids: ids.join(',') })
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('删除成功！');
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// });
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const rowDel = (row, index, done) => {
|
||||||
|
onDel([row]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 远程搜搜
|
||||||
|
const remoteLandList = async (val) => {
|
||||||
|
if (isEmpty(val)) return;
|
||||||
|
const query = { landName: val, current: 1, size: 20 };
|
||||||
|
const res = await getLandsList(query);
|
||||||
|
if (res.code === 200) {
|
||||||
|
setDicData(state.options.column, 'landName', res.data.records);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择赋值
|
||||||
|
const selectedChange = ({ value, item }) => {
|
||||||
|
console.log(430, value, item, item.landName, item.address, item.area);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,43 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="custom-page">
|
||||||
<el-row :gutter="20">
|
<avue-crud
|
||||||
<el-col :span="4">
|
ref="crudRef"
|
||||||
<custom-table-tree title="种养殖基地分类" :data="treeData" @node-click="onNodeClick" />
|
v-model="state.form"
|
||||||
</el-col>
|
v-model:search="state.query"
|
||||||
<el-col :span="20">
|
v-model:page="state.pageData"
|
||||||
<avue-crud
|
:table-loading="state.loading"
|
||||||
ref="crudRef"
|
:data="state.data"
|
||||||
v-model="state.form"
|
:option="state.options"
|
||||||
v-model:search="state.query"
|
@refresh-change="refreshChange"
|
||||||
v-model:page="state.pageData"
|
@search-reset="searchChange"
|
||||||
:table-loading="state.loading"
|
@search-change="searchChange"
|
||||||
:data="state.data"
|
@selection-change="selectionChange"
|
||||||
:option="state.options"
|
@current-change="currentChange"
|
||||||
@refresh-change="refreshChange"
|
@size-change="sizeChange"
|
||||||
@search-reset="searchChange"
|
@row-del="rowDel"
|
||||||
@search-change="searchChange"
|
@row-save="rowSave"
|
||||||
@selection-change="selectionChange"
|
@row-update="rowUpdate"
|
||||||
@current-change="currentChange"
|
>
|
||||||
@size-change="sizeChange"
|
<template #menu-left>
|
||||||
@row-del="rowDel"
|
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
|
||||||
@row-save="rowSave"
|
</template>
|
||||||
@row-update="rowUpdate"
|
|
||||||
>
|
|
||||||
<template #menu-left>
|
|
||||||
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #status="{ row }">
|
<template #status="{ row }">
|
||||||
<el-tag v-if="row.status == 1" type="success" size="small">启用</el-tag>
|
<el-tag v-if="row.status == 1" type="success" size="small">启用</el-tag>
|
||||||
<el-tag v-if="row.status == 0" type="danger" size="small">禁用</el-tag>
|
<el-tag v-if="row.status == 0" type="danger" size="small">禁用</el-tag>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #menu="scope">
|
<template #menu="scope">
|
||||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -49,21 +42,11 @@ import { CRUD_OPTIONS } from '@/config';
|
|||||||
import { isEmpty, mockData, sleep, setDicData } from '@/utils';
|
import { isEmpty, mockData, sleep, setDicData } from '@/utils';
|
||||||
import { getLandsList } from '@/apis/land';
|
import { getLandsList } from '@/apis/land';
|
||||||
|
|
||||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
const app = useApp();
|
const app = useApp();
|
||||||
const UserStore = useUserStore();
|
const UserStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const crudRef = ref(null);
|
const crudRef = ref(null);
|
||||||
const treeData = ref([
|
|
||||||
{
|
|
||||||
label: '基地分类',
|
|
||||||
id: null,
|
|
||||||
children: [
|
|
||||||
{ label: '种植基地', id: '1', children: [], pid: null },
|
|
||||||
{ label: '养殖基地', id: '2', children: [], pid: null },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
loading: false,
|
loading: false,
|
||||||
query: {
|
query: {
|
||||||
@ -74,8 +57,6 @@ const state = reactive({
|
|||||||
selection: [],
|
selection: [],
|
||||||
options: {
|
options: {
|
||||||
...CRUD_OPTIONS,
|
...CRUD_OPTIONS,
|
||||||
addBtnText: '添加',
|
|
||||||
// addBtn: false,
|
|
||||||
selection: true,
|
selection: true,
|
||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
@ -94,16 +75,16 @@ const state = reactive({
|
|||||||
label: '基地分类',
|
label: '基地分类',
|
||||||
prop: 'type',
|
prop: 'type',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
dicData: [
|
search: true,
|
||||||
{
|
props: {
|
||||||
label: '种植基地',
|
label: 'dictLabel',
|
||||||
value: 1,
|
value: 'dictValue',
|
||||||
},
|
},
|
||||||
{
|
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_base_type`,
|
||||||
label: '养殖基地',
|
dicHeaders: {
|
||||||
value: 2,
|
authorization: UserStore.token,
|
||||||
},
|
},
|
||||||
],
|
dicFormatter: (res) => res.data ?? [],
|
||||||
rules: {
|
rules: {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入',
|
message: '请输入',
|
||||||
@ -250,6 +231,7 @@ const state = reactive({
|
|||||||
currentRow: {},
|
currentRow: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 加载
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
//state.loading = true;
|
//state.loading = true;
|
||||||
// GetEntityList(state.query)
|
// GetEntityList(state.query)
|
||||||
@ -283,7 +265,7 @@ const loadData = async () => {
|
|||||||
p5: '张三',
|
p5: '张三',
|
||||||
p6: '13837633838',
|
p6: '13837633838',
|
||||||
status: 1,
|
status: 1,
|
||||||
type: 1,
|
type: 'base_plant',
|
||||||
createTime: '2025-01-01',
|
createTime: '2025-01-01',
|
||||||
updateTime: '2025-01-15',
|
updateTime: '2025-01-15',
|
||||||
},
|
},
|
||||||
@ -294,10 +276,6 @@ const loadData = async () => {
|
|||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
||||||
const onNodeClick = (data) => {
|
|
||||||
console.log('onNodeClick', data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页数
|
// 页数
|
||||||
const currentChange = (current) => {
|
const currentChange = (current) => {
|
||||||
state.query.current = current;
|
state.query.current = current;
|
||||||
@ -335,15 +313,14 @@ const rowView = (row) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 启用、禁用
|
// 启用、禁用
|
||||||
const rowStatus = (row) => {
|
// const rowStatus = (row) => {
|
||||||
console.info('操作状态');
|
// console.info('操作状态');
|
||||||
};
|
// };
|
||||||
|
|
||||||
// 新增
|
// 新增
|
||||||
const onAdd = () => {
|
// const onAdd = () => {
|
||||||
crudRef.value && crudRef.value.rowAdd();
|
// crudRef.value && crudRef.value.rowAdd();
|
||||||
};
|
// };
|
||||||
|
|
||||||
const rowSave = (row, done, loading) => {
|
const rowSave = (row, done, loading) => {
|
||||||
// AddEntity(row)
|
// AddEntity(row)
|
||||||
// .then((res) => {
|
// .then((res) => {
|
||||||
|
|||||||
@ -123,7 +123,7 @@ const state = reactive({
|
|||||||
label: 'dictLabel',
|
label: 'dictLabel',
|
||||||
value: 'dictValue',
|
value: 'dictValue',
|
||||||
},
|
},
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list?pageNum=1&pageSize=20&dictType=sys_product_type`,
|
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_product_type`,
|
||||||
dicHeaders: {
|
dicHeaders: {
|
||||||
authorization: UserStore.token,
|
authorization: UserStore.token,
|
||||||
},
|
},
|
||||||
@ -152,7 +152,7 @@ const state = reactive({
|
|||||||
label: 'dictLabel',
|
label: 'dictLabel',
|
||||||
value: 'dictValue',
|
value: 'dictValue',
|
||||||
},
|
},
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list?pageNum=1&pageSize=20&dictType=sys_unit_type`,
|
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_unit_type`,
|
||||||
dicHeaders: {
|
dicHeaders: {
|
||||||
authorization: UserStore.token,
|
authorization: UserStore.token,
|
||||||
},
|
},
|
||||||
|
|||||||
BIN
sub-government-screen-service/src/assets/images/early/arrowL.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/arrowL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
sub-government-screen-service/src/assets/images/early/arrowR.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/arrowR.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
BIN
sub-government-screen-service/src/assets/images/early/back1.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/back1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
sub-government-screen-service/src/assets/images/early/back2.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/back2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 702 KiB |
BIN
sub-government-screen-service/src/assets/images/early/back3.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/back3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
sub-government-screen-service/src/assets/images/early/bg5.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/bg5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon1.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon2.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon3.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon5.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon6.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
sub-government-screen-service/src/assets/images/early/icon7.png
Normal file
BIN
sub-government-screen-service/src/assets/images/early/icon7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="popular-feelings-warp">
|
||||||
|
<div class="popular-feelings-content">
|
||||||
|
<template v-for="(n, index) in datalist" :key="index">
|
||||||
|
<div class="popular-feelings-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/early/back1.png') + ')' + ',' + n.style }">
|
||||||
|
<div class="val">{{ n.val || 0 }}</div>
|
||||||
|
<div class="label">{{ n.title || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed } from 'vue';
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
let datalist = reactive([
|
||||||
|
{ title: '今天舆情量', val: 1872, style: 'left: 0,top: 50%,' },
|
||||||
|
{ title: '今日文章量', val: 1856, style: 'right: 0,top: 50%,' },
|
||||||
|
{ title: '今日浏览量', val: 54681, style: 'left: 50%,top: 0,' },
|
||||||
|
{ title: '文章总数', val: 75671, style: 'left: 50%,bottom: 0,' },
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.popular-feelings-warp {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
.popular-feelings-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.popular-feelings-item {
|
||||||
|
position: absolute;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: left bottom;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="price-charts">
|
||||||
|
<custom-echart-scatter-blister :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed } from 'vue';
|
||||||
|
// 随机配色
|
||||||
|
const colors1 = reactive(['#6beff9', '#e4f116', '#2087e3']);
|
||||||
|
const dataX = reactive(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
|
||||||
|
let legendData = reactive(['最高价', '最低价', '建议价']);
|
||||||
|
|
||||||
|
const hexToRGBA = (hex, alpha = 1) => {
|
||||||
|
let hexCode = hex.replace('#', '');
|
||||||
|
if (hexCode.length === 3) {
|
||||||
|
hexCode = hexCode
|
||||||
|
.split('')
|
||||||
|
.map((char) => char + char)
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
const r = parseInt(hexCode.slice(0, 2), 16);
|
||||||
|
const g = parseInt(hexCode.slice(2, 4), 16);
|
||||||
|
const b = parseInt(hexCode.slice(4, 6), 16);
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||||
|
};
|
||||||
|
|
||||||
|
let seriesList = computed(() => {
|
||||||
|
let list = [];
|
||||||
|
if (legendData.length > 0) {
|
||||||
|
list = legendData.map((m, index) => {
|
||||||
|
let num = [
|
||||||
|
[100, 30, 60],
|
||||||
|
[10, 2, 3],
|
||||||
|
[80, 50, 70],
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
name: m,
|
||||||
|
data: dataX.map((n) => {
|
||||||
|
return [
|
||||||
|
Number((num[index][0] + Math.random() * 100).toFixed(2)),
|
||||||
|
Number((num[index][1] + Math.random() * 100).toFixed(2)),
|
||||||
|
Number((num[index][2] + Math.random() * 100).toFixed(2)),
|
||||||
|
n,
|
||||||
|
];
|
||||||
|
}),
|
||||||
|
type: 'scatter',
|
||||||
|
symbolSize: (val) => {
|
||||||
|
// 获取所有values
|
||||||
|
let values = [];
|
||||||
|
|
||||||
|
values = list[index].data
|
||||||
|
.map((n) => {
|
||||||
|
return n;
|
||||||
|
})
|
||||||
|
.flat()
|
||||||
|
.filter((item) => typeof item === 'number');
|
||||||
|
// console.info('values', values);
|
||||||
|
// 获取最大值
|
||||||
|
const max = Math.max(Math.max(...values));
|
||||||
|
// 获取最小值
|
||||||
|
const min = Math.min(...values);
|
||||||
|
// 定义最大气泡
|
||||||
|
const maxSize4Pin = 50;
|
||||||
|
// 定义最小气泡
|
||||||
|
const minSize4Pin = 10;
|
||||||
|
// 固定套路
|
||||||
|
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||||||
|
var b = maxSize4Pin - a * max;
|
||||||
|
return a * val[2] + b;
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: { show: true, formatter: '', position: 'top' },
|
||||||
|
emphasis: { show: true, formatter: (param) => param.data[3], position: 'top' },
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||||
|
shadowOffsetY: 5,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 1, color: hexToRGBA(colors1[index], 1) },
|
||||||
|
{ offset: 0, color: hexToRGBA(colors1[index], 0.8) },
|
||||||
|
],
|
||||||
|
globalCoord: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info('list', list);
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
const chartsData = reactive({
|
||||||
|
option: {
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '6%',
|
||||||
|
top: '18%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
// formatter: function (params) {
|
||||||
|
// return params.value[3] + ':' + parseInt(params.value[1] * 1000) / 10 + '%';
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: ' ',
|
||||||
|
subtext: ' ',
|
||||||
|
left: 'center',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: 10,
|
||||||
|
top: 5,
|
||||||
|
data: legendData,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: ' ',
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: ' ',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: 'rgba(181,197,221,0.2)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scale: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
valData: seriesList,
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.price-charts {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -25,7 +25,7 @@ const chartsData = reactive({
|
|||||||
{
|
{
|
||||||
type: 'wordCloud',
|
type: 'wordCloud',
|
||||||
// 网格大小，各项之间间距
|
// 网格大小，各项之间间距
|
||||||
gridSize: 30,
|
gridSize: 22,
|
||||||
// 形状 circle 圆，cardioid 心， diamond 菱形，
|
// 形状 circle 圆，cardioid 心， diamond 菱形，
|
||||||
// triangle-forward 、triangle 三角，star五角星
|
// triangle-forward 、triangle 三角，star五角星
|
||||||
shape: 'circle',
|
shape: 'circle',
|
||||||
@ -42,14 +42,14 @@ const chartsData = reactive({
|
|||||||
right: null,
|
right: null,
|
||||||
bottom: null,
|
bottom: null,
|
||||||
// 画布宽
|
// 画布宽
|
||||||
width: '100%',
|
width: '90%',
|
||||||
// 画布高
|
// 画布高
|
||||||
height: '100%',
|
height: '90%',
|
||||||
// 是否渲染超出画布的文字
|
// 是否渲染超出画布的文字
|
||||||
drawOutOfBound: false,
|
drawOutOfBound: false,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: function () {
|
color: function () {
|
||||||
const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114'];
|
const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114', '#ab1489', '#149cab', '#ab1414', '#27b30f', '#7e11b3', '#11b32e'];
|
||||||
return colors[parseInt(Math.random() * colors.length)];
|
return colors[parseInt(Math.random() * colors.length)];
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
|
|||||||
@ -0,0 +1,223 @@
|
|||||||
|
<template>
|
||||||
|
<div class="real-time-price-wrap">
|
||||||
|
<div class="tab-warp">
|
||||||
|
<el-carousel
|
||||||
|
indicator-position="none"
|
||||||
|
:autoplay="false"
|
||||||
|
:arrow="'always'"
|
||||||
|
:height="'120px'"
|
||||||
|
:style="{
|
||||||
|
'--arrow-left-bg': `url(${arrowRightBg})`,
|
||||||
|
'--arrow-right-bg': `url(${arrowLeftBg})`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-carousel-item v-for="item in tablist" :key="item">
|
||||||
|
<div class="item-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/early/back2.png') + ')' }">
|
||||||
|
<div class="img-wrap">
|
||||||
|
<img :src="getAssetsFile('images/early/icon3.png')" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="name">
|
||||||
|
<span class="name-val">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
<div class="price-list">
|
||||||
|
<div
|
||||||
|
v-for="(n, index) in pricelist"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
'background-image': 'url(' + getAssetsFile('images/early/bg5.png') + ')',
|
||||||
|
height: 'calc((100% - 50px) /' + 3 + ')',
|
||||||
|
}"
|
||||||
|
class="data-item"
|
||||||
|
>
|
||||||
|
<div class="data-warp">
|
||||||
|
<div class="small-bg">
|
||||||
|
<img :src="getAssetsFile('images/early/back3.png')" />
|
||||||
|
<img :src="getAssetsFile('images/early/' + n.icon)" class="img-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="data-pos">
|
||||||
|
<div class="data-pos-center">
|
||||||
|
<div class="pos-center">
|
||||||
|
<div class="label">
|
||||||
|
<span class="val">{{ n.title }}</span>
|
||||||
|
<span class="unit">{{ n.unit }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="value">{{ n.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed } from 'vue';
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
let tablist = reactive([
|
||||||
|
{ name: '西红柿', label: '价格', scr: '' },
|
||||||
|
{ name: '甘蔗', label: '价格', scr: '' },
|
||||||
|
{ name: '白菜', label: '价格', scr: '' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
let pricelist = reactive([
|
||||||
|
{ title: '今日最高价', value: 1.24, unit: '元/kg', icon: 'icon1.png' },
|
||||||
|
{ title: '今日最低价', value: 0.87, unit: '元/kg', icon: 'icon2.png' },
|
||||||
|
{ title: '最多价格', value: 1.19, unit: '元/kg', icon: 'icon3.png' },
|
||||||
|
{ title: '建议售价', value: 1.21, unit: '元/kg', icon: 'icon5.png' },
|
||||||
|
{ title: '历史最高价', value: 1.36, unit: '元/kg', icon: 'icon6.png' },
|
||||||
|
{ title: '历史最低价', value: 0.75, unit: '元/kg', icon: 'icon7.png' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 动态获取箭头图片路径
|
||||||
|
const arrowLeftBg = getAssetsFile('images/early/arrowL.png');
|
||||||
|
const arrowRightBg = getAssetsFile('images/early/arrowR.png');
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.real-time-price-wrap {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
::v-deep() {
|
||||||
|
.el-carousel__arrow--left {
|
||||||
|
background-image: var(--arrow-left-bg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: left center;
|
||||||
|
width: 68px;
|
||||||
|
height: 54px;
|
||||||
|
i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-carousel__arrow--right {
|
||||||
|
background-image: var(--arrow-right-bg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: left center;
|
||||||
|
width: 68px;
|
||||||
|
height: 54px;
|
||||||
|
i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-warp {
|
||||||
|
width: calc(100% - 136px);
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-size: 80% 80%;
|
||||||
|
background-position: center 8px;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
.img-wrap {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 10%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: 100%;
|
||||||
|
.name-val {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-list {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 120px);
|
||||||
|
padding-top: 10px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.data-item {
|
||||||
|
width: calc((100% - 10px) / 2);
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.data-warp {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
.small-bg,
|
||||||
|
.data-pos {
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: middle;
|
||||||
|
.data-pos-center {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.pos-center {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.small-bg {
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
position: relative;
|
||||||
|
.img-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 38%;
|
||||||
|
height: 38%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data-pos {
|
||||||
|
width: calc(100% - 54px);
|
||||||
|
padding-left: 8px;
|
||||||
|
.label,
|
||||||
|
.value {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
.val {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: 10px;
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
.unit::before {
|
||||||
|
content: '(';
|
||||||
|
}
|
||||||
|
.unit::after {
|
||||||
|
content: ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #6beff9;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -6,7 +6,9 @@
|
|||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
<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>
|
<template #back>
|
||||||
|
<!-- <popularFeelings></popularFeelings> -->
|
||||||
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
@ -28,9 +30,18 @@
|
|||||||
<centerMap></centerMap>
|
<centerMap></centerMap>
|
||||||
</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: 100%">
|
<div class="right-charts-item" style="height: 67%">
|
||||||
<customBack top-title="农场品实时价格" :top-postion="'right'">
|
<customBack top-title="农场品实时价格" :top-postion="'right'">
|
||||||
<template #back> </template>
|
<template #back>
|
||||||
|
<realTimePrice></realTimePrice>
|
||||||
|
</template>
|
||||||
|
</customBack>
|
||||||
|
</div>
|
||||||
|
<div class="right-charts-item" style="height: 33%">
|
||||||
|
<customBack top-title="农产品价格数据分析" :top-postion="'right'">
|
||||||
|
<template #back>
|
||||||
|
<priceCharts></priceCharts>
|
||||||
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -45,6 +56,9 @@ import customBack from '@/components/customBack.vue';
|
|||||||
import centerMap from '@/components/centerMap.vue';
|
import centerMap from '@/components/centerMap.vue';
|
||||||
import backToCharts from './components/backToCharts.vue';
|
import backToCharts from './components/backToCharts.vue';
|
||||||
import productTypeWordClould from './components/productTypeWordClould.vue';
|
import productTypeWordClould from './components/productTypeWordClould.vue';
|
||||||
|
import priceCharts from './components/priceCharts.vue';
|
||||||
|
import realTimePrice from './components/realTimePrice.vue';
|
||||||
|
import popularFeelings from './components/popularFeelings.vue';
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.data-home-index {
|
.data-home-index {
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="data-pos">
|
<div class="data-pos">
|
||||||
<div class="data-pos-center">
|
<div class="data-pos-center">
|
||||||
<div class="c">
|
<div class="pos-center">
|
||||||
<span class="label">{{ n.label }}</span>
|
<span class="label">{{ n.label }}</span>
|
||||||
<span class="value">{{ n.value }}</span>
|
<span class="value">{{ n.value }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user