604 lines
18 KiB
Vue
604 lines
18 KiB
Vue
<template>
|
||
<div
|
||
class="main-chart"
|
||
:class="{ 'jahat-chart': activeSystemGetter?.link == 'jahat' }"
|
||
>
|
||
<div class="body" :class="bodyclass">
|
||
<div class="body-chart">
|
||
<TimeLine
|
||
v-if="chartComponentName == 'MyTimeLine'"
|
||
:ref="chartComponentName"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@on-chart-click="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></TimeLine>
|
||
|
||
<TreeSimple
|
||
v-else-if="chartComponentName == 'HiChartTreegraph'"
|
||
:ref="chartComponentName"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@list="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></TreeSimple>
|
||
|
||
<Bar
|
||
v-else-if="chartComponentName == 'HiChartXy'"
|
||
:ref="chartComponentName"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@list="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></Bar>
|
||
|
||
<Pie
|
||
v-else-if="chartComponentName == 'HiChartPie'"
|
||
:ref="chartComponentName"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@list="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></Pie>
|
||
|
||
<TreeMap
|
||
v-else-if="chartComponentName == 'largeTreeMapChart'"
|
||
:ref="chartComponentName"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@list="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></TreeMap>
|
||
|
||
<Gantt
|
||
v-else-if="chartComponentName == 'gantt'"
|
||
class="component"
|
||
:dataChart="dataChart"
|
||
:PieOptions="PieOptions"
|
||
:dataTreeMap="dataTreeMap"
|
||
@list="categoryValue"
|
||
@breadcrumbs="breadcrumbs"
|
||
width="90%"
|
||
height="500px"
|
||
></Gantt>
|
||
</div>
|
||
</div>
|
||
<base-modal-v2
|
||
v-if="showList"
|
||
modalSize="modal-lg"
|
||
modalTitle="اطلاعات نقطه انتخاب شده"
|
||
:hasFooter="false"
|
||
@close="closeModal"
|
||
:showHeaderCloseButton="true"
|
||
:showDeleteButton="false"
|
||
>
|
||
<slot name="body">
|
||
<MyContent
|
||
:key="reRender"
|
||
:pagination="pagination"
|
||
:viewMode="'list'"
|
||
@changePage="changePage"
|
||
:schemaItems="activeTabGetter?.search_content"
|
||
:items="listEntity"
|
||
ref="searchContent"
|
||
>
|
||
</MyContent>
|
||
</slot>
|
||
</base-modal-v2>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// import HttpService from "~/services/httpService";
|
||
// import searchApi from "~/apis/searchApi";
|
||
import searchApi from "@search/apis/searchApi";
|
||
// import repoApi from "~/apis/repoApi";
|
||
import chartType from "@search/json/search/chart.json";
|
||
import { mapState } from "pinia";
|
||
import { useSearchStore } from "@search/stores/searchStore";
|
||
import { useCommonStore } from "~/stores/commonStore";
|
||
|
||
export default {
|
||
props: {
|
||
// addressBarUrl: {
|
||
// default: null,
|
||
// },
|
||
selectedCategory: {
|
||
default: "",
|
||
},
|
||
dataChart: {
|
||
default() {
|
||
return [];
|
||
},
|
||
},
|
||
activeTabGetter: {
|
||
default() {
|
||
return {};
|
||
},
|
||
},
|
||
dataTreeMap: {
|
||
default() {
|
||
return [];
|
||
},
|
||
},
|
||
chartComponentName: "",
|
||
},
|
||
// beforeMount() {
|
||
// this.httpService = new HttpService(
|
||
// import.meta.env.VITE_BASE_URL + this.repoBaseUrl
|
||
// );
|
||
// },
|
||
mounted() {
|
||
if (this.activeSystemGetter?.link == "jahat") {
|
||
this.chartName = chartType[3].chartName;
|
||
this.chartComponentName = chartType[3].componentName;
|
||
this.hiden = true;
|
||
|
||
// this.getTreeChartInitialList();
|
||
}
|
||
// if (this.activeSystemGetter.link != "jahat") this.getNavigetion();
|
||
},
|
||
watch: {
|
||
// addressBarUrl() {
|
||
// // this.getChartData();
|
||
// // this.getTreeChartInitialList();
|
||
// },
|
||
listSelectedPoint(newVal) {
|
||
this.chartAnswer = newVal;
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
PieOptions: {
|
||
radius: "60%",
|
||
selectedMode: "single",
|
||
},
|
||
reRender: 1,
|
||
controlRequest: "",
|
||
listType: 1,
|
||
hiden: false,
|
||
showBodyDescription: false,
|
||
name: "",
|
||
y: "",
|
||
chartAnswer: [],
|
||
listSelectedPoint: "",
|
||
listEntity: [],
|
||
selectedPoint: "",
|
||
// httpService: undefined,
|
||
chartTypeList: chartType,
|
||
Status: 2,
|
||
filterUrl: "",
|
||
navigationList: "",
|
||
navigationItemTitle: "",
|
||
navigationItem: "",
|
||
chartName: chartType[0].chartName,
|
||
pagination: {
|
||
page: 1,
|
||
pages: 0,
|
||
total: 0,
|
||
offset: 0, // page * per_page
|
||
limit: 10, //per_page
|
||
},
|
||
showList: false,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(useSearchStore, [
|
||
"searchChartSchemaGetter",
|
||
"searchChartActiveSchemaGetter",
|
||
"activeTabGetter",
|
||
]),
|
||
...mapState(useCommonStore, ["activeSystemGetter"]),
|
||
// repoBaseUrl() {
|
||
// return import.meta.env.VITE_REPO;
|
||
// },
|
||
bodyclass() {
|
||
let key = this.chartComponentName;
|
||
if (key == "MyTimeLine") return "time-line";
|
||
else if (key == "largeTreeMapChart") return "TreeMap";
|
||
else if (key == "HiChartTreegraph") return "TreeSimple";
|
||
return "another";
|
||
},
|
||
|
||
showNavigateItems() {
|
||
return (
|
||
this.chartComponentName != "MyTimeLine" &&
|
||
this.chartComponentName != "largeTreeMapChart"
|
||
);
|
||
},
|
||
contentComponentName() {
|
||
if (this.activeTabGetter.searchContent)
|
||
return this.activeTabGetter.searchContent;
|
||
return "SearchContent";
|
||
},
|
||
},
|
||
methods: {
|
||
/**
|
||
* هندلر برای دریافت اطلاعات در هر کدام از چارت ها.
|
||
* @param {Object} event - شیء رویداد که شامل اطلاعات دستهبندی و مقدار است.
|
||
*/
|
||
categoryValue(event) {
|
||
this.openModal();
|
||
|
||
if (this.chartComponentName == "MyTimeLine") {
|
||
this.name = event.category;
|
||
this.y = event.y;
|
||
this.getChartItems(this.name, this.y);
|
||
} else if (this.chartComponentName == "HiChartPie") {
|
||
this.name = event.name;
|
||
this.y = event.y;
|
||
this.getChartItems(this.name, this.y);
|
||
} else if (this.chartComponentName == "HiChartXy") {
|
||
this.name = event.name;
|
||
this.y = event.y;
|
||
this.getChartItems(this.name, this.y);
|
||
} else if (
|
||
this.chartComponentName == "largeTreeMapChart" ||
|
||
this.chartComponentName == "HiChartTreegraph"
|
||
) {
|
||
this.name = event.name;
|
||
this.y = event.y;
|
||
|
||
this.getChartTreeItems(this.name, this.y);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* دریافت دادههای نمودار و تنظیم آنها برای نمایش در کامپوننت SearchContent.
|
||
* @param {string} value - مقدار فیلتر.
|
||
* @param {number} y - مقدار محور Y.
|
||
*/
|
||
async getChartItems(value, y) {
|
||
this.showBodyDescription = true;
|
||
this.controlRequest = "getChartItems";
|
||
let type = this.activeTabGetter?.key || "sanad";
|
||
|
||
let url = searchApi.chart.items
|
||
.replace("{{index_key}}", type)
|
||
.replace("{{filter}}", "")
|
||
.replace("{{offset}}", this.pagination.offset)
|
||
.replace("{{limit}}/", this.pagination.limit);
|
||
|
||
let field_key =
|
||
this.chartComponentName == "MyTimeLine"
|
||
? "sort_date_timestamp"
|
||
: this.selectedCategory;
|
||
let filter = field_key + "=" + value;
|
||
|
||
const payload = {
|
||
filter: filter,
|
||
};
|
||
|
||
try {
|
||
const { $api } = useNuxtApp();
|
||
const res = await $api(url, {
|
||
method: "post",
|
||
baseURL: repoUrl(),
|
||
body: payload,
|
||
});
|
||
|
||
// this.$refs.searchContent.setAnswer(
|
||
// res.hits.hits,
|
||
// res.hits.total.value,
|
||
// res.hits.total.relation
|
||
// );
|
||
this.listEntity = res.hits.hits;
|
||
|
||
const total = res.hits.total.value;
|
||
const pages = Math.ceil(total / this.pagination.limit);
|
||
const pagination = {
|
||
total: total,
|
||
pages: pages == 0 ? 1 : pages,
|
||
};
|
||
this.pagination = { ...this.pagination, ...pagination };
|
||
} catch (err) {}
|
||
|
||
// this.httpService.postRequest(url, payload).then((res) => {
|
||
// this.$refs.searchContent.setAnswer(
|
||
// res.hits.hits,
|
||
// res.hits.total.value,
|
||
// res.hits.total.relation
|
||
// );
|
||
// const total = res.hits.total.value;
|
||
// const pages = Math.ceil(total / this.pagination.limit);
|
||
// const pagination = {
|
||
// total: total,
|
||
// pages: pages == 0 ? 1 : pages,
|
||
// };
|
||
// this.pagination = { ...this.pagination, ...pagination };
|
||
// });
|
||
},
|
||
|
||
/**
|
||
* دریافت دادههای درخت نمودار و تنظیم آنها برای نمایش در کامپوننت EntityContent.
|
||
* @param {string} value - مقدار فیلتر.
|
||
* @param {number} y - مقدار محور Y.
|
||
*/
|
||
async getChartTreeItems(value, y) {
|
||
this.controlRequest = "getChartTreeItems";
|
||
this.showBodyDescription = true;
|
||
|
||
var filter = "";
|
||
let field_key = "subject";
|
||
filter = field_key + "=" + value;
|
||
|
||
let url = searchApi.chart.treeItems;
|
||
url = url.replace("{{index_key}}", this.activeTabGetter?.key);
|
||
url = url.replace("{{filter}}", filter);
|
||
url = url.replace("{{offset}}", this.pagination.offset);
|
||
url = url.replace("{{limit}}", this.pagination.limit);
|
||
|
||
try {
|
||
const { $api } = useNuxtApp();
|
||
const res = await $api(url, {
|
||
baseURL: repoUrl(),
|
||
});
|
||
|
||
// this.$refs[this.chartComponentName].setAnswer(
|
||
// res.hits.hits,
|
||
// res.hits.total.value,
|
||
// res.hits.total.relation
|
||
// );
|
||
|
||
this.listEntity = res.hits.hits;
|
||
|
||
const total = res.hits.total.value;
|
||
const pages = Math.ceil(total / this.pagination.limit);
|
||
const pagination = {
|
||
total: total,
|
||
pages: pages == 0 ? 1 : pages,
|
||
};
|
||
this.pagination = { ...this.pagination, ...pagination };
|
||
} catch (err) {}
|
||
|
||
// this.httpService.getRequest(url).then((res) => {
|
||
// // this.listEntity = res.hits.hits;
|
||
|
||
// this.$refs.SearchContent.setAnswer(
|
||
// res.hits.hits,
|
||
// res.hits.total.value,
|
||
// res.hits.total.relation
|
||
// );
|
||
// const total = res.hits.total.value;
|
||
// const pages = Math.ceil(total / this.pagination.limit);
|
||
// const pagination = {
|
||
// total: total,
|
||
// pages: pages == 0 ? 1 : pages,
|
||
// };
|
||
// this.pagination = { ...this.pagination, ...pagination };
|
||
// });
|
||
},
|
||
|
||
/**
|
||
* تغییر صفحه و بارگذاری مجدد دادههای نمودار.
|
||
* @param {Object} item - اطلاعات صفحهبندی.
|
||
*/
|
||
changePage(item) {
|
||
this.pagination = item;
|
||
this.getChartItems(this.name, this.y);
|
||
},
|
||
|
||
/**
|
||
* مدیریت رویداد بازگشت به سطح قبلی در نمودار بزرگ درختی.
|
||
* @param {Object} event - شیء رویداد که شامل اطلاعات سطح و نقطه است.
|
||
*/
|
||
breadcrumbs(event) {
|
||
if (event.level == 0) {
|
||
this.getTreeChartInitialList();
|
||
} else {
|
||
this.name = event.levelOptions.point.options.name;
|
||
this.y = event.levelOptions.point.options.value;
|
||
this.getChartTreeItems(this.name, this.y);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* دریافت لیست اولیه برای نمودار درختی هنگام باز شدن صفحه برای اولین بار.
|
||
*/
|
||
async getTreeChartInitialList() {
|
||
this.controlRequest = "getTreeChartInitialList";
|
||
this.showBodyDescription = true;
|
||
let url =
|
||
searchApi.entity.blist
|
||
.replace("{{index_key}}", this.activeTabGetter.key)
|
||
.replace("{{type}}", this.activeTabGetter.key) +
|
||
`/${this.pagination.offset}/${this.pagination.limit}`;
|
||
|
||
try {
|
||
const { $api } = useNuxtApp();
|
||
const res = await $api(url, {
|
||
baseURL: repoUrl(),
|
||
});
|
||
|
||
this.listEntity = res.hits.hits;
|
||
const total = res.hits.total.value;
|
||
const pages = Math.ceil(total / this.pagination.limit);
|
||
const pagination = {
|
||
total: total,
|
||
pages: pages == 0 ? 1 : pages,
|
||
};
|
||
this.pagination = { ...this.pagination, ...pagination };
|
||
} catch (err) {}
|
||
|
||
// this.httpService.getRequest(url).then((res) => {
|
||
// this.listEntity = res.hits.hits;
|
||
// const total = res.hits.total.value;
|
||
// const pages = Math.ceil(total / this.pagination.limit);
|
||
// const pagination = {
|
||
// total: total,
|
||
// pages: pages == 0 ? 1 : pages,
|
||
// };
|
||
// this.pagination = { ...this.pagination, ...pagination };
|
||
// });
|
||
},
|
||
|
||
/**
|
||
* فراخوانی درخواستهای مرتبط با صفحهبندی.
|
||
*/
|
||
controlRequestFromPagination() {
|
||
if (this.controlRequest == "getChartTreeItems") {
|
||
return this.getChartTreeItems(this.name, this.y);
|
||
} else if (this.controlRequest == "getTreeChartInitialList") {
|
||
return this.getTreeChartInitialList();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* تغییر حد صفحهبندی و بارگذاری مجدد دادهها.
|
||
* @param {Object} paging - اطلاعات صفحهبندی.
|
||
*/
|
||
pageLimitChanged(paging) {
|
||
this.resetPagination();
|
||
this.pagination.limit = paging.limit;
|
||
this.controlRequestFromPagination();
|
||
},
|
||
|
||
/**
|
||
* تغییر صفحه و بارگذاری مجدد دادهها.
|
||
* @param {Object} paging - اطلاعات صفحهبندی.
|
||
*/
|
||
pageChanged(paging) {
|
||
let page = paging.pageNumber - 1;
|
||
this.pagination.offset = page * paging.limit;
|
||
this.pagination.limit = paging.limit;
|
||
this.pagination.page = paging.pageNumber;
|
||
this.controlRequestFromPagination();
|
||
},
|
||
|
||
/**
|
||
* تغییر مرتبسازی و بارگذاری مجدد دادهها.
|
||
* @param {Object} sorting - اطلاعات مرتبسازی.
|
||
*/
|
||
sortChanged(sorting) {
|
||
this.pagination.page = this.pagination.offset = 0;
|
||
this.sorting = sorting;
|
||
this.controlRequestFromPagination();
|
||
},
|
||
|
||
/**
|
||
* بازنشانی اطلاعات صفحهبندی.
|
||
*/
|
||
resetPagination() {
|
||
this.pagination = {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0,
|
||
limit: 10,
|
||
};
|
||
},
|
||
|
||
/**
|
||
* مدیریت نام نمودار.
|
||
* @param {string} name - نام نمودار.
|
||
* @returns {string} - نام کلید نمودار.
|
||
*/
|
||
// handlerChartName(name) {
|
||
// let key = name;
|
||
// if (key == "MyTimeLine") return "TimeLine";
|
||
// else if (key == "HiChartPie") return "Pie";
|
||
// else if (key == "HiChartXy") return "Bar";
|
||
// else if (key == "HiChartTreegraph") return "TreeSimple";
|
||
// else if (key == "largeTreeMapChart") return "TreeMap";
|
||
// },
|
||
|
||
/**
|
||
* بستن مدال.
|
||
* @returns {Promise} - بازگشت یک وعده برای بستن مدال.
|
||
*/
|
||
closeModal() {
|
||
this.selectedItem = {};
|
||
|
||
// $("#base-modal").modal({
|
||
// show: false,
|
||
// });
|
||
|
||
// setTimeout(() => {
|
||
this.showList = false;
|
||
// }, 50);
|
||
},
|
||
|
||
/**
|
||
* باز کردن مدال.
|
||
* @returns {Promise} - بازگشت یک وعده برای باز کردن مدال.
|
||
*/
|
||
openModal() {
|
||
this.showList = true;
|
||
|
||
// setTimeout(() => {
|
||
// $("#base-modal").modal({
|
||
// backdrop: "static",
|
||
// keyboard: false,
|
||
// show: true,
|
||
// });
|
||
// }, 50);
|
||
},
|
||
},
|
||
components: {
|
||
// QanonContent,
|
||
// MajlesQanonContent,
|
||
// MajlesQavaninContent,
|
||
// MajlesSectionContent,
|
||
// MajlesMashruhContent,
|
||
// MajlesQaSectionContent,
|
||
// SearchContent,
|
||
// NeshaContent,
|
||
// EmamainContent,
|
||
// MyContent,
|
||
// TermContent,
|
||
// EntityContent,
|
||
// TreeSimple: () => import("~/components/charts/TreeSimple.vue"),
|
||
// Bar: () => import("~/components/charts/Bar.vue"),
|
||
// Pie: () => import("~/components/charts/Pie.vue"),
|
||
// TreeMap: () => import("~/components/charts/TreeMap.vue"),
|
||
// TimeLine: () => import("~/components/charts/TimeLine.vue"),
|
||
// Gantt: () => import("~/components/charts/Gantt.vue"),
|
||
|
||
// BaseModal: defineAsyncComponent(() =>
|
||
// import("~/components/global/BaseModal.vue")
|
||
// ),
|
||
// EntityContent: defineAsyncComponent(() =>
|
||
// import("~/components/search/view/EntityContent.vue")
|
||
// ),
|
||
TreeSimple: defineAsyncComponent(() =>
|
||
import("~/components/charts/TreeSimple.vue")
|
||
),
|
||
Bar: defineAsyncComponent(() =>
|
||
import("~/components/charts/Bar.vue")
|
||
),
|
||
Pie: defineAsyncComponent(() =>
|
||
import("~/components/charts/Pie.vue")
|
||
),
|
||
TreeMap: defineAsyncComponent(() =>
|
||
import("~/components/charts/TreeMap.vue")
|
||
),
|
||
// TimeLine: defineAsyncComponent(() =>
|
||
// import("~/components/charts/TimeLine.vue")
|
||
// ),
|
||
// Gantt: defineAsyncComponent(() =>
|
||
// import("~/components/charts/Gantt.vue")
|
||
// ),
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss"></style>
|