{"version":3,"file":"RedBlackContainer.Bud7FT2v.js","sources":["../../../../src/shared/function/format.ts","../../../../src/components/redBlack/RedBlackItem.vue","../../../../src/logic/home/weekRedBlack.ts","../../../../src/components/redBlack/RedBlackContainer.vue"],"sourcesContent":["/* eslint-disable ts/ban-ts-comment */\r\nimport { camelCase } from 'lodash-es'\r\nimport type { DayRedBlackResponse, RedBlackResponse } from '@/server/types'\r\nimport type { RedBlackDataSeg } from '@/shared/types'\r\n\r\n/**\r\n * 红黑榜数据格式化, 将red|black开头的数据转换为{red: {}, black: {}}的格式\r\n *\r\n */\r\nexport function formatRedBlankData(data: RedBlackResponse | DayRedBlackResponse): RedBlackDataSeg {\r\n  const newData: RedBlackDataSeg = {\r\n    id: -1,\r\n    red: {},\r\n    black: {},\r\n  }\r\n  const segKey = ['red', 'black']\r\n  const dataKeys = Object.keys(data)\r\n\r\n  let isSegKey = false\r\n  let currentSeg = 0\r\n  dataKeys.forEach((key) => {\r\n    for (const seg in segKey) {\r\n      isSegKey = !!key.match(segKey[seg])\r\n      currentSeg = Number.parseInt(seg)\r\n      if (isSegKey)\r\n        break\r\n    }\r\n    if (isSegKey) {\r\n      const newKey = camelCase(key.replace(segKey[currentSeg], ''))\r\n      // @ts-expect-error\r\n      newData[segKey[currentSeg]][newKey] = data[key]\r\n    }\r\n    else {\r\n      // @ts-expect-error\r\n      newData[key] = data[key]\r\n    }\r\n    isSegKey = false\r\n  })\r\n  return newData\r\n}\r\n","<script setup lang='ts'>\r\nimport { addHost } from '@qctsw/common'\r\nimport type { redBlackItem } from '@/shared/types'\r\n\r\nconst props = withDefaults(defineProps<{\r\n  item: redBlackItem\r\n  type?: 'red' | 'black'\r\n}>(), {\r\n  type: 'red',\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"props.item\" class=\"relative overflow-hidden p-sm\" :class=\"[type === 'red' ? 'red' : 'black']\">\r\n    <div class=\"flex\">\r\n      <div class=\"w-30 h-30 p-1.5 rounded mr-2.5 flex-shrink-0 bg-slate-1 border-1 border-slate-2\">\r\n        <img loading=\"lazy\" class=\"w-full h-full object-cover\" :src=\"addHost(item.carBrandLogo ?? item.brandCoverImg)\">\r\n      </div>\r\n      <div class=\"flex-grow min-w-0 flex flex-col justify-between\">\r\n        <div class=\"font-bold\">\r\n          {{ item.carVendorName ? item.carVendorName : item.vendorName }}\r\n        </div>\r\n        <div class=\"flex items-center justify-between\">\r\n          <div>\r\n            <div class=\"text-gray-5 text-3\">\r\n              投诉量/宗\r\n            </div>\r\n            <div class=\"text-5 font-mono text-center\">\r\n              {{ item.total }}<span class=\"text-gray-5 text-3 color-red-5\">（近两年）</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <div class=\"text-gray-5 text-3\">\r\n              解决率\r\n            </div>\r\n            <div class=\"text-5 font-mono text-center\">\r\n              {{ Math.floor((item.finishRate ?? 0) * 100) }}%\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <div class=\"text-gray-5 text-3\">\r\n              QT分\r\n            </div>\r\n            <div class=\"text-5 font-mono text-center\">\r\n              {{ item.qt }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <NProgress\r\n          :style=\"{ '--n-fill-color': 'var(--color)' }\"\r\n          type=\"line\"\r\n          :show-indicator=\"false\"\r\n          :percentage=\"Math.floor((item.finishRate ?? 0) * 100)\"\r\n          :height=\"20\"\r\n          :border-radius=\"0\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"tips\">\r\n      {{ type === 'red' ? '红榜' : '黑榜' }}\r\n    </div>\r\n    <div class=\"flex text-3.5 mt-6\">\r\n      <div class=\"flex-shrink-0 tracking-1\">\r\n        理由：\r\n      </div>\r\n      <div>{{ item.reason }}</div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang='scss' scoped>\r\n.red {\r\n  --color: theme(colors.red.600);\r\n}\r\n\r\n.black {\r\n  --color: theme(colors.slate.900);\r\n}\r\n\r\n.tips {\r\n  --uno: w-20 bg-[var(--color)] rounded-bl rounded-tr text-white text-3.5 absolute top-0 right-0 text-center py-1.5;\r\n}\r\n</style>\r\n","import type { DayRedBlackParams, DayRedBlackResponse, RedBlackResponse } from '@/server/types'\r\nimport { getDayRedBlackApi, getWeekRedBlackApi } from '@/server'\r\nimport type { RedBlackDataSeg } from '@/shared/types'\r\nimport { LOAD_STATE } from '@/shared/types'\r\nimport { formatRedBlankData } from '@/shared/function'\r\n\r\nexport function logicHomeWeekRedBlack() {\r\n  const state = ref(LOAD_STATE.INIT)\r\n  const data = ref<RedBlackResponse | null>(null)\r\n\r\n  async function getWeekRedBlack() {\r\n    const res = await useLoadState({\r\n      state,\r\n      key: '红黑榜周榜',\r\n      fn: getWeekRedBlackApi,\r\n    })\r\n    if (res && res.data)\r\n      data.value = res.data\r\n  }\r\n\r\n  return {\r\n    state,\r\n    data,\r\n    getWeekRedBlack,\r\n  }\r\n}\r\n\r\nexport function logicRedBlackContainer(params: DayRedBlackParams) {\r\n  const state = ref(LOAD_STATE.INIT)\r\n  const showDay = ref(false)\r\n  const weekDayList = ref<RedBlackDataSeg[]>([])\r\n  async function getWeekDayList() {\r\n    const res = await useLoadState({\r\n      state,\r\n      fn: () => getDayRedBlackApi(params),\r\n    })\r\n    if (res && res.data)\r\n      weekDayList.value = res.data.map(item => formatRedBlankData(item))\r\n  }\r\n\r\n  useActivatedWatch(() => [\r\n    watch(showDay, (nv) => {\r\n      if (nv && !weekDayList.value.length)\r\n        getWeekDayList()\r\n    }),\r\n  ])\r\n\r\n  return {\r\n    state,\r\n    showDay,\r\n    weekDayList,\r\n    getWeekDayList,\r\n  }\r\n}\r\n","<script setup lang='ts'>\r\nimport { timeFormat } from '@qctsw/utils'\r\nimport { APP_ROUTER } from '@qctsw/common'\r\nimport type { DayRedBlackParams, RedBlackResponse } from '@/server/types'\r\nimport { formatRedBlankData } from '@/shared/function'\r\nimport { logicRedBlackContainer } from '@/logic/home/weekRedBlack'\r\n\r\nconst props = withDefaults(defineProps<{\r\n  data: RedBlackResponse\r\n  dayParams: DayRedBlackParams\r\n}>(), {})\r\n\r\nconst itemKeyList = ['red', 'black']\r\nconst weekItem = computed(() => formatRedBlankData(props.data))\r\n\r\nconst {\r\n  state,\r\n  showDay,\r\n  weekDayList,\r\n  getWeekDayList,\r\n} = logicRedBlackContainer(props.dayParams)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"border-1 border-gray-2 rounded-md\">\r\n    <div class=\"flex border-b-1 border-gray-2\">\r\n      <div v-for=\"(v, i) in itemKeyList\" :key=\"i\" class=\"border-r-1 border-slate-2 last:border-r-0 flex-grow min-w-0 w-50% flex-shrink-0\">\r\n        <RedBlackItem\r\n          v-if=\"weekItem && Object.keys(weekItem).includes(v) && weekItem[v]\"\r\n          :item=\"weekItem[v]\" :type=\"!i ? 'red' : 'black'\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <NCollapseTransition :show=\"showDay\">\r\n      <UtilLoadState :state=\"state\" :reload-handler=\"getWeekDayList\" common-class=\"min-h-60\">\r\n        <div v-if=\"weekDayList && weekDayList.length\" class=\"p-4 text-3.25\">\r\n          <div class=\"grid grid-cols-2 text-4 font-bold\">\r\n            <div class=\"pl-14 text-red-6\">\r\n              红榜\r\n            </div>\r\n            <div class=\"pl-14 text-slate-9\">\r\n              黑榜\r\n            </div>\r\n          </div>\r\n          <NuxtLink\r\n            v-for=\"(v, i) in weekDayList\" :key=\"i\" :to=\"APP_ROUTER.newsDetail(v.articleId)\"\r\n            class=\"flex items-center relative pt-4 text-3.5\"\r\n          >\r\n            <span class=\"date text-gray-5 absolute font-mono\">\r\n              {{ timeFormat(v.createTime, 'MM/DD') }}\r\n            </span>\r\n            <span v-for=\"(key, index) in itemKeyList\" :key=\"index\" class=\"pl-14 inline-block w-full\">\r\n              <span class=\"grid grid-cols-4 text-gray-5\">\r\n                <NEllipsis line-clamp=\"1\" :class=\"[key === 'red' ? 'text-red-6' : 'text-slate-9']\">\r\n                  {{ v[key].vendorName }}\r\n                </NEllipsis>\r\n                <span class=\"\">投诉量/宗：<span font-mono>{{ v[key].total }}</span></span>\r\n                <span>解决率：<span font-mono>{{ Math.floor((v[key].finishRate ?? 0) * 100) }}%</span></span>\r\n                <span>回复率：<span font-mono>{{ Math.floor((v[key].replyRate ?? 0) * 100) }}%</span></span>\r\n              </span>\r\n            </span>\r\n          </NuxtLink>\r\n        </div>\r\n        <BasicEmpty v-else />\r\n      </UtilLoadState>\r\n    </NCollapseTransition>\r\n    <slot name=\"button\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"text-center cursor-pointer text-3.5 block w-full py-sm \"\r\n        :class=\"[showDay ? 'border-t-1 border-gray-2' : '']\"\r\n        @click=\"showDay = !showDay\"\r\n      >\r\n        {{ showDay ? '收起' : '查看更多' }}\r\n      </button>\r\n    </slot>\r\n  </div>\r\n</template>\r\n\r\n<style lang='scss' scoped>\r\n.red-black-item {\r\n  padding-left: 70px;\r\n  width: 600px;\r\n\r\n  &:last-child {\r\n    padding-left: 50px;\r\n  }\r\n\r\n  &__info {\r\n    &>div {\r\n      width: 25%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["formatRedBlankData","data","newData","segKey","dataKeys","isSegKey","currentSeg","key","seg","newKey","camelCase","props","__props","logicHomeWeekRedBlack","state","ref","LOAD_STATE","getWeekRedBlack","res","useLoadState","getWeekRedBlackApi","logicRedBlackContainer","params","showDay","weekDayList","getWeekDayList","getDayRedBlackApi","item","useActivatedWatch","watch","nv","itemKeyList","weekItem","computed"],"mappings":"yhBASO,SAASA,EAAmBC,EAA+D,CAChG,MAAMC,EAA2B,CAC/B,GAAI,GACJ,IAAK,CAAC,EACN,MAAO,CAAC,CAAA,EAEJC,EAAS,CAAC,MAAO,OAAO,EACxBC,EAAW,OAAO,KAAKH,CAAI,EAEjC,IAAII,EAAW,GACXC,EAAa,EACR,OAAAF,EAAA,QAASG,GAAQ,CACxB,UAAWC,KAAOL,EAGZ,GAFJE,EAAW,CAAC,CAACE,EAAI,MAAMJ,EAAOK,CAAG,CAAC,EACrBF,EAAA,OAAO,SAASE,CAAG,EAC5BH,EACF,MAEJ,GAAIA,EAAU,CACN,MAAAI,EAASC,GAAUH,EAAI,QAAQJ,EAAOG,CAAU,EAAG,EAAE,CAAC,EAE5DJ,EAAQC,EAAOG,CAAU,CAAC,EAAEG,CAAM,EAAIR,EAAKM,CAAG,CAAA,MAItCL,EAAAK,CAAG,EAAIN,EAAKM,CAAG,EAEdF,EAAA,EAAA,CACZ,EACMH,CACT,k2BCnCA,MAAMS,EAAQC,s5BCEP,SAASC,IAAwB,CAChC,MAAAC,EAAQC,EAAIC,EAAW,IAAI,EAC3Bf,EAAOc,EAA6B,IAAI,EAE9C,eAAeE,GAAkB,CACzB,MAAAC,EAAM,MAAMC,EAAa,CAC7B,MAAAL,EACA,IAAK,QACL,GAAIM,EAAA,CACL,EACGF,GAAOA,EAAI,OACbjB,EAAK,MAAQiB,EAAI,KACrB,CAEO,MAAA,CACL,MAAAJ,EACA,KAAAb,EACA,gBAAAgB,CAAA,CAEJ,CAEO,SAASI,GAAuBC,EAA2B,CAC1D,MAAAR,EAAQC,EAAIC,EAAW,IAAI,EAC3BO,EAAUR,EAAI,EAAK,EACnBS,EAAcT,EAAuB,CAAA,CAAE,EAC7C,eAAeU,GAAiB,CACxB,MAAAP,EAAM,MAAMC,EAAa,CAC7B,MAAAL,EACA,GAAI,IAAMY,GAAkBJ,CAAM,CAAA,CACnC,EACGJ,GAAOA,EAAI,OACbM,EAAY,MAAQN,EAAI,KAAK,IAAYS,GAAA3B,EAAmB2B,CAAI,CAAC,EACrE,CAEA,OAAAC,GAAkB,IAAM,CACtBC,EAAMN,EAAUO,GAAO,CACjBA,GAAM,CAACN,EAAY,MAAM,QACZC,GAAA,CAClB,CAAA,CACF,EAEM,CACL,MAAAX,EACA,QAAAS,EACA,YAAAC,EACA,eAAAC,CAAA,CAEJ,ojBC9CA,MAAMd,EAAQC,EAKRmB,EAAc,CAAC,MAAO,OAAO,EAC7BC,EAAWC,EAAS,IAAMjC,EAAmBW,EAAM,IAAI,CAAC,EAExD,CACJ,MAAAG,EACA,QAAAS,EACA,YAAAC,EACA,eAAAC,CAAA,EACEJ,GAAuBV,EAAM,SAAS"}