test n - shisanin01’s blog

<template>
<v-card width=dotedote100%dotedote>
k4<v-card-title @click=dotedoteredirectToPage()dotedote>{{ card_title }}</v-card-title>
k4<v-card-subtitle>{{ card_subtitle }}</v-card-subtitle>

k4<div v-if=dotedotedatalist === nulldotedote>
k4 <div class=dotedotetext-centerdotedote><v-progress-circular color=dotedoteerrordotedote indeterminate></v-progress-circular></div>
k4</div>

k4
k4<div v-else-if=dotedotetarget_api === singlemutingrulelistsingledotedote>

k4 <VDT :headers=dotedoteheadersdotedote :items=dotedotedatalistdotedote item-value=dotedotemessagedotedote @click:row=dotedotejumpto_mutingruledetaildotedote
k4k4class=dotedoteelevation-1dotedote >

k4k4<template v-slot:item.status=dotedotelinedotedote>
k4k4 <div v-if=dotedoteline.item.columns.status === singleACTIVEsingledotedote>
k4k4k4<span class=dotedotetext-greendotedote>{{ line.item.columns.status }}</span>
k4k4 </div>
k4k4 <div v-else-if=dotedoteline.item.columns.status === singleSCHEDULEDsingledotedote>
k4k4k4<span class=dotedotetext-amberdotedote>{{ line.item.columns.status }}</span>
k4k4 </div>
k4k4 <div v-else>
k4k4k4{{ line.item.columns.status }}
k4k4 </div>
k4k4</template>

k4k4<template v-slot:item.schedule_start=dotedotelinedotedote>
k4k4

k4k4 <div v-if=dotedoteline.item.columns.schedule_startdotedote
k4k4k4:style=dotedote{ color: (new Date(line.item.columns.schedule_end) < new Date()) && (line.item.columns.schedule_end) ? singleredsingle : singleblacksingle }dotedote>
k4k4k4

k4k4k4{{ (yyyymmddhhmiss(new Date(line.item.columns.schedule_start)).toLocaleString()) }}

k4k4 </div>
k4k4 <div v-else>
k4k4k4<span>—</span>
k4k4 </div>
k4k4</template>

k4k4<template v-slot:item.schedule_end=dotedotelinedotedote>

k4k4 <div v-if=dotedoteline.item.columns.schedule_enddotedote
k4k4k4:style=dotedote{ color: (new Date(line.item.columns.schedule_end) < new Date()) && (line.item.columns.schedule_end) ? singleredsingle : singleblacksingle }dotedote>
k4k4k4
k4k4k4{{ (yyyymmddhhmiss(new Date(line.item.columns.schedule_end)).toLocaleString()) }}

k4k4 </div>
k4k4 <div v-else>
k4k4k4<span>—</span>
k4k4 </div>

k4k4</template>
k4 </VDT>
k4</div>

k4

k4<div v-else>
k4 <VDT :headers=dotedoteheadersdotedote :items=dotedotedatalistdotedote item-value=dotedotemessagedotedote @click:row=dotedotejumpto_infradotedote class=dotedoteelevation-1dotedote></VDT>
k4</div>

</v-card>
</template>

import { watchEffect, ref } from singlevuesingle;
import { defineProps } from singlevuesingle;
import andes_app_config from single@/views/andes/andes_app_config.jsonsingle;

const headers = ref();
const datalist = ref();
const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andesapi/v1/listSearch`

// propsに型を指定する
const props = defineProps({
duration_item_selected: { type: String, required: true, },
daterange_arr: { type: Array, required: true, },

headers_arr: { type: Array, required: false, },

guid: { type: String, required: false } as const,
target_api: { type: String, required: true } as const,
card_title: { type: String, required: true } as const,
card_subtitle: { type: String, required: true } as const,
href_url: { type: String, required: false } as const,

});

const card_title = props.card_title
const card_subtitle = props.card_subtitle
const href_url = props.href_url
const headers_arr = props.headers_arr

console.log(headers_arr);

// 各案件コードをログイン情報から取得
const prj_code = andes_app_config.prj_code

// 呼び出し元viewに、headers_arr の設定がある場合はそちらを採用
if (typeof headers_arr !== singleundefinedsingle && headers_arr.length > 0) {
for (let i = 0; i < headers_arr.length; i++) {
k4console.log(i + headers_arr[i]);

k4const obj = {
k4 title: headers_arr[i].title,
k4 align: headers_arr[i].align,
k4 sortable: true,
k4 key: headers_arr[i].title,
k4};
k4headers.value.push(obj);
}
}

//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
// duration
//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
watchEffect(async () => {
datalist.value = [];

try {
k4const postdata = {
k4 target_api: props.target_api,
k4};

k4const response: Response = await fetch(endpoint, {
k4 method: singlePOSTsingle,
k4 headers: {
k4k4singleContent-Typesingle: singleapplication/jsonsingle,
k4 },
k4 credentials: singleincludesingle,
k4 body: JSON.stringify(postdata),
k4});

k4console.log(postdata)
k4console.log(response)

k4if (response.ok) {
k4 response.json().then(r => {

k4k4datalist.value = r.data;
k4k4console.log(datalist.value)

k4k4// 呼び出し元viewに、headers_arr の設定がある場合はそちらを採用ない場合は、データの1行目から自動生成
k4k4// // table heaader 内容を、１行目から自動生成対象は全てとする場合
k4k4if (typeof headers_arr === singleundefinedsingle || headers_arr.length === 0) {
k4k4 for (const key in datalist.value[0]) {
k4k4k4const obj = {
k4k4k4 title: key,
k4k4k4 align: dotedotestartdotedote,
k4k4k4 sortable: true,
k4k4k4 key: key,
k4k4k4};
k4k4k4headers.value.push(obj);
k4k4 }
k4k4 console.log(single配列headers_arrは使用されていません。single);
k4k4}

k4k4console.log(headers.value)

k4 });
k4} else {

k4 const errorData = await response.json();
k4 console.log(dotedoteFailed to acquire datadotedote)
k4 console.log(errorData.detail);

k4 // console.log(response)
k4}
} catch (error) {
k4console.log(error)
}
});

//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
// infra画面へ遷移 category を案件ごと変更予定
//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
const jumpto_infra = (args, line) => {
window.location.href = single/m07infra?guid=single + line.item.selectable.entityGuid + dotedote&category=cpuusage,diskusagedotedote
}

//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
// issue table。issue詳細画面へ遷移
//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
const jumpto_issuedetail = (args, line) => {
window.location.href = single/m10issuedetail?issueid=single + line.item.selectable.issueId
}

//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
// muting rule詳細画面へ遷移
//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
const jumpto_mutingruledetail = (args, line) => {
// window.location.href = single/m12mutingruledetail?mutingrule_id=single + line.item.selectable.id
}

//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
// card title クリック時拡大詳細画面へ遷移
//sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4sen4-
const redirectToPage = () => {
window.location.href = href_url;
}

const toDoubleDigits = (num) => {
num += dotedotedotedote;
if (num.length === 1) {
k4num = dotedote0dotedote + num;
}
return num;
};

const yyyymmddhhmiss = (d) => {
var date = new Date(d);
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
var hh = toDoubleDigits(date.getHours());
var mi = toDoubleDigits(date.getMinutes());
return yyyy + single-single + mm + single-single + dd + single single + hh + single:single + mi + dotedote:00dotedote;
};

</script>