bug fix

electron/main/main.ts

@@ -24,7 +24,7 @@ async function createWindow() {
   loadingView.loadFile(resolve(__dirname, 'loading.html'))
   const mainWin = new BrowserWindow({
     show: false,
-    width: 1500,
+    width: 1240,
     height: 850,
     frame: false,
     center: true,

src/api/api-types/forceCheck.d.ts

@@ -8,6 +8,7 @@ export namespace ForceCheck {
     mainNumber?: number
     markerIds: number[]
     subjectCode: string
+    paperCount?: number
   }>
   /** 获取考核卷组 */
   interface ForceCheckGroup {
@@ -20,6 +21,7 @@ export namespace ForceCheck {
     subjectCode: string
     updateTime: string
     updaterId: number
+    paperCount?: number
   }
   type GetForceCheckGroupList = BaseDefine<{ mainNumber?: number; subjectCode: string }, ForceCheckGroup[]>
   /** 获取分发进度 */

src/components/element/BaseDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :custom-class="props.canResize ? 'can-resize' : ''"
+    :custom-class="props.canResize ? props.canResize : ''"
     custom
     align-center
     :close-on-click-modal="false"
@@ -13,7 +13,7 @@
     <slot />
     <template v-if="props.footer !== false" #footer>
       <template v-if="!!props.canResize">
-        <div v-dialogResize="true" class="foot-box">
+        <div v-dialogResize="props.canResize" class="foot-box">
           <slot name="footer"></slot>
         </div>
       </template>
@@ -31,7 +31,7 @@ const props = withDefaults(
   defineProps<{
     header?: boolean
     footer?: boolean
-    canResize?: boolean
+    canResize?: string
   }>(),
   { header: true, footer: true }
 )

src/components/shared/ImagePreview.vue

@@ -1,5 +1,12 @@
 <template>
-  <base-dialog v-model="visible" less title="试卷预览" :footer="false" :modal="false" draggable class="preview-dialog">
+  <base-dialog
+    v-model="visible"
+    less
+    title="试卷预览"
+    :can-resize="'can-resize2'"
+    :modal="false"
+    class="preview-dialog"
+  >
     <div class="preview-content" :class="{ 'is-big': isBig }">
       <img v-show="!!url" :src="url" alt="" />
     </div>

src/components/shared/ScoringPanel.vue

@@ -5,7 +5,7 @@
     modal-class="no-mask"
     :width="'388px'"
     :modal="false"
-    :can-resize="true"
+    :can-resize="'can-resize'"
     class="keybord-dialog"
     @close="onToggleClick"
   >

src/components/shared/message/MessageList.vue

@@ -105,9 +105,11 @@ const toggleHistory = () => {
 }
 
 const onReply = () => {
+  console.log('ssss', currentMessage.value)
+
   if (currentMessage.value) {
     emits('change-type', 'send')
-    emits('reply', currentMessage.value.sendUserId)
+    emits('reply', currentMessage.value.sendUserId, currentMessage.value.sendUserName)
   }
 }
 

src/components/shared/message/MessageSend.vue

@@ -66,6 +66,7 @@ import ImagePreview from '../ImagePreview.vue'
 import useFetch from '@/hooks/useFetch'
 import useVModel from '@/hooks/useVModel'
 import MessageHistory from '@/components/shared/message/MessageHistory.vue'
+import { transHtmlContent } from '@/utils/common'
 import type { ExtractApiResponse } from '@/api/api'
 
 type MarkerItem = ExtractArrayValue<ExtractApiResponse<'getUserGroup'>['chiffGroup']>
@@ -74,6 +75,7 @@ type TreeNode = ExtractArrayValue<ExtractApiResponse<'getUserGroup'>['markerGrou
 const props = defineProps<{
   replyUserId?: number | null
   paperPath?: string | null
+  replyUserName?: string | null
 }>()
 const customNodeClass = (data: any, node: any) => {
   if (data.online === true) {
@@ -88,6 +90,7 @@ const emit = defineEmits(['close', 'change-type', 'reply'])
 const showHistory = ref<boolean>(false)
 /** 默认的收件人ID */
 const replyUserId = useVModel(props, 'replyUserId')
+const replyUserName = useVModel(props, 'replyUserName')
 
 /** 图片预览 */
 const previewModalVisible = ref<boolean>(false)
@@ -119,10 +122,16 @@ const allowSend = computed<boolean>(() => {
 const treeRef = ref<InstanceType<typeof ElTree>>()
 
 const viewCheckedUser = computed(() => {
-  return checkedUsers?.value
-    ?.filter((v) => !!v.id)
-    ?.map((d) => `${d.loginName}-${d.name}`)
-    ?.join(';')
+  let arr = checkedUsers?.value?.filter((v) => !!v.id)?.map((d) => `${d.loginName}-${d.name}`)
+  if (!!replyUserName.value && !arr.includes(replyUserName.value)) {
+    arr.unshift(replyUserName.value)
+  }
+  return arr.join(';')
+
+  // return checkedUsers?.value
+  //   ?.filter((v) => !!v.id)
+  //   ?.map((d) => `${d.loginName}-${d.name}`)
+  //   ?.join(';')
 })
 
 const toggleCheckUser = () => {
@@ -188,6 +197,14 @@ const onCheckChange = () => {
 }
 
 watch(messageContent, () => {
+  let reg = /<span class=\"pointer inline link-button\" contenteditable=\"false\" data-path=.*>查看试卷<\/span>/g
+  let arr = messageContent.value.match(reg)
+  let text = messageContent.value.replace(reg, '【查看试卷临时替换字符】')
+  text = transHtmlContent(text)
+  if (arr && arr.length) {
+    text = text.replace('【查看试卷临时替换字符】', arr[0])
+  }
+  messageContent.value = text
   nextTick(() => {
     const paperButton = document.querySelector(`.content-edit-able [data-path="${props.paperPath}"]`)
     sendedPaper.value = !!paperButton
@@ -217,9 +234,13 @@ const onSendMessage = async () => {
     if (messageContent.value.length > 2000) {
       return ElMessage.error('输入内容过长')
     }
+    let ids: any = checkedUsers.value?.filter(Boolean)?.map((u) => u.id)
+    if (ids.indexOf(replyUserId?.value) == -1) {
+      ids.unshift(replyUserId.value)
+    }
     await sendMessage({
       content: messageContent.value,
-      receiveUserIds: checkedUsers.value?.filter(Boolean)?.map((u) => u.id),
+      receiveUserIds: ids,
     })
     ElMessage.success('发送成功')
     messageContent.value = ''

src/components/shared/message/MessageWindow.vue

@@ -4,6 +4,7 @@
       :is="MessageWindowContent"
       :reply-user-id="replyUserId"
       :paper-path="props.paperPath"
+      :reply-user-name="replyUserName"
       @close="onClose"
       @change-type="onChangeType"
       @reply="onReply"
@@ -20,7 +21,7 @@ import MessageHistory from '@/components/shared/message/MessageList.vue'
 import MessageSend from '@/components/shared/message/MessageSend.vue'
 
 type ModalType = 'view' | 'send'
-
+const replyUserName = ref('')
 const props = withDefaults(
   defineProps<{
     modelValue: boolean
@@ -51,8 +52,9 @@ const onChangeType = (type: ModalType) => {
 }
 
 /** 回复 */
-const onReply = (userId: number) => {
+const onReply = (userId: number, userName: string) => {
   replyUserId.value = userId
+  replyUserName.value = userName
 }
 </script>
 

src/constants/storage.ts

@@ -9,4 +9,5 @@ export const SESSION_STORAGE_KEYS = {
   /** 超管选择的考试ID */
   EXAM_ID: 'exam-id',
   dialogModeBeforeSubmit: 'dialogModeBeforeSubmit',
+  lockScreenStatus: 'lockScreenStatus',
 }

src/directives/dialogResize.ts

@@ -1,5 +1,16 @@
 export const dialogResize = {
   mounted(el: any, binding: any, vnode: any) {
+    const bValue = binding.value
+    const localKeyMap: any = {
+      positions: {
+        'can-resize': 'cet-keyboard-positions',
+        'can-resize2': 'cet-preview-positions',
+      },
+      resize: {
+        'can-resize': 'cet-keyboard-resize',
+        'can-resize2': 'cet-preview-resize',
+      },
+    }
     const resizeEvent = new CustomEvent('drag-resize', {
       detail: '尺寸变化',
       bubbles: false,
@@ -7,7 +18,7 @@ export const dialogResize = {
     // 初始化不最大化
     el.fullscreen = false
     // 弹框可拉伸最小宽高
-    const minWidth = 336
+    const minWidth = binding.value === 'can-resize2' ? 290 : 336
     const minHeight = 290
     // 当前宽高
     const nowWidth = minWidth
@@ -18,7 +29,7 @@ export const dialogResize = {
     // 获取弹框头部（这部分可双击全屏）
     const hasSetBodyHight = false
     // 弹窗
-    const dragDom: any = document.querySelector('.can-resize')
+    const dragDom: any = document.querySelector('.' + binding.value)
     const dialogHeaderEl = dragDom.querySelector('.el-dialog__header')
 
     el.style.overflow = 'initial'
@@ -28,8 +39,8 @@ export const dialogResize = {
     // dragDom.style.overflow = 'auto'
     dragDom.style.background = '#fff'
 
-    const keyboardPositions = localStorage.getItem('cet-keyboard-positions')
-    const keyboardResize = localStorage.getItem('cet-keyboard-resize')
+    const keyboardPositions = localStorage.getItem(localKeyMap.positions[bValue])
+    const keyboardResize = localStorage.getItem(localKeyMap.resize[bValue])
     if (keyboardPositions) {
       dragDom.style.left = JSON.parse(keyboardPositions).left || 0
       dragDom.style.top = JSON.parse(keyboardPositions).top || 0
@@ -94,7 +105,7 @@ export const dialogResize = {
         document.onmouseup = null
         console.log('dragDom.style.left:', dragDom.style.left, dragDom.style.top)
         localStorage.setItem(
-          'cet-keyboard-positions',
+          localKeyMap.positions[bValue],
           JSON.stringify({
             left: dragDom.style.left || 0,
             top: dragDom.style.top || 0,
@@ -196,7 +207,7 @@ export const dialogResize = {
         document.onmousemove = null
         document.onmouseup = null
         localStorage.setItem(
-          'cet-keyboard-resize',
+          localKeyMap.resize[bValue],
           JSON.stringify({
             width: dragDom.style.width || 'auto',
             height: dragDom.style.height || 'auto',

src/modules/analysis/group-monitoring-detail/index.vue

@@ -11,15 +11,15 @@
       </div>
     </div>
     <div class="flex fill-blank detail-info">
-      <div class="flex p-base detail-info-chart" style="width: 58%">
-        <div class="flex-1">
+      <div class="flex p-base detail-info-chart" style="width: 64%">
+        <div style="width: 50%">
           <vue-echarts class="full" :option="markerSubjectiveChartsOption"></vue-echarts>
         </div>
         <div class="flex-1 m-l-base">
           <vue-echarts class="full" :option="markerObjectiveChartsOption"></vue-echarts>
         </div>
       </div>
-      <div class="flex direction-column p-extra-small" style="width: 42%">
+      <div class="flex direction-column p-extra-small" style="width: 36%">
         <div class="flex items-center justify-between detail-info-table-header m-b-mini">
           <el-button custom-1 size="small" class="detail-info-label">
             <span class="">{{ dataType }}试卷总数:</span>
@@ -139,8 +139,8 @@ const tableColumn: EpTableColumn<ExtractMultipleApiResponse<'getGroupMonitorDeta
   { label: '评卷员', prop: 'markerName' },
   { label: '给分', prop: 'markerScore', width: 50 },
   { label: '组长给分', prop: 'headerScore', width: 70 },
-  { label: '客观分', prop: 'objectiveScore' },
-  { label: '客主比', prop: 'headerRatio' },
+  { label: '客观分', prop: 'objectiveScore', width: 60 },
+  { label: '客主比', prop: 'headerRatio', width: 60 },
   { label: '分档', prop: 'scoreLevel' },
   { label: '评卷时间', prop: 'markTime', width: 150 },
 ]
@@ -189,6 +189,7 @@ const markerSubjectiveChartsOption = computed<EChartsOption>(() => {
     title: { text: '主观分布' },
     grid: {
       bottom: 30,
+      right: 0,
     },
     legend: {
       itemWidth: 14,
@@ -251,6 +252,7 @@ const markerObjectiveChartsOption = computed<EChartsOption>(() => {
     title: { text: '客观分布' },
     grid: {
       bottom: 30,
+      right: 0,
     },
     legend: {
       itemWidth: 14,

src/modules/analysis/personnel-compare/hooks/useCompareFilter.ts

@@ -1,7 +1,7 @@
 import useOptions from '@/hooks/useOptions'
 import { omit } from 'lodash-es'
 import useForm from '@/hooks/useForm'
-
+import { getCurDayRange } from '@/utils/common'
 import { reactive, computed, watch } from 'vue'
 const useCompareFilter = () => {
   const { subjectList, mainQuestionList, groupListWithAll, changeModelValue, dataModel, onOptionInit } = useOptions([
@@ -9,11 +9,12 @@ const useCompareFilter = () => {
     'question',
     'group',
   ])
+  const curDayRange = getCurDayRange()
   const model = reactive({
     subjectCode: dataModel.subject || '',
     questionMainNumber: dataModel.question,
     markingGroupNumbers: dataModel.group,
-    time: [],
+    time: [curDayRange[0], curDayRange[1]],
   })
   const fetchModel = computed(() => {
     return Object.assign(omit(model, 'time'), {
@@ -33,6 +34,8 @@ const useCompareFilter = () => {
   const rows = reactive({
     'row-1': {},
   })
+  const OneRowSpan6 = defineColumn(_, 'row-1', { span: 6 })
+  const OneRowSpan5 = defineColumn(_, 'row-1', { span: 5 })
   const OneRowSpan4 = defineColumn(_, 'row-1', { span: 4 })
   const OneRowSpan3 = defineColumn(_, 'row-1', { span: 3 })
   const OneRowSpan2 = defineColumn(_, 'row-1', { span: 2 })
@@ -53,6 +56,7 @@ const useCompareFilter = () => {
       prop: 'questionMainNumber',
       label: '大题',
       slotType: 'select',
+      labelWidth: '52px',
       slot: {
         options: mainQuestionList.value,
         onChange: changeModelValue('question'),
@@ -63,13 +67,14 @@ const useCompareFilter = () => {
       prop: 'markingGroupNumbers',
       label: '小组',
       slotType: 'select',
+      labelWidth: '52px',
       slot: {
         options: groupListWithAll.value,
         onChange: changeModelValue('group'),
       },
     }),
 
-    OneRowSpan4({
+    OneRowSpan6({
       labelWidth: '52px',
       label: '时间',
       slotType: 'dateTime',

src/modules/analysis/personnel-compare/index.vue

@@ -22,7 +22,7 @@
           size="small"
           :columns="columns"
           :data="allTableData"
-          :height="'500px'"
+          :height="'calc(100vh - 520px)'"
           highlight-current-row
         >
         </base-table>
@@ -34,16 +34,29 @@
           size="small"
           :columns="columns2"
           :data="allTableData"
-          :height="'500px'"
+          :height="'calc(100vh - 520px)'"
           highlight-current-row
+          @selection-change="handleSelectionChange"
         >
         </base-table>
       </div>
       <div v-if="allTableData.length" class="m-t-small out-chart-box">
         <div v-if="dataType !== 'segmentScores'" class="chart-box">
           <vue-e-charts class="full" :option="lineChartOptions"></vue-e-charts>
+          <div class="right-box">
+            <div class="legend-item">
+              <div class="color" style="background-color: red"></div>
+              <div class="label">总体{{ dataTypeLabelMap[dataType] }}</div>
+            </div>
+            <div v-for="(item, index) in filterAverageDatas" :key="index" class="legend-item">
+              <div class="color" :style="{ backgroundColor: myColorList[index] }"></div>
+              <div class="label">
+                {{ `小组${item.markingGroupNumber}` + dataTypeLabelMap[dataType] }}
+              </div>
+            </div>
+          </div>
         </div>
-        <div v-else class="chart-box">
+        <div v-else-if="multipleSelection.length" class="chart-box">
           <vue-e-charts class="full" :option="multLineChartOptions"></vue-e-charts>
         </div>
       </div>
@@ -58,6 +71,7 @@ import BaseTable from '@/components/element/BaseTable.vue'
 import { ElButton, ElRadioButton, ElRadioGroup } from 'element-plus'
 import useCompareFilter from './hooks/useCompareFilter'
 import VueECharts from 'vue-echarts'
+import { myColorList } from '@/utils/common'
 
 const dataType = ref('avg')
 const dataTypeValues = ['avg', 'std', 'segmentScores', 'markingCount', 'xyRelate']
@@ -88,6 +102,11 @@ const averageDatas = computed(() => {
     return []
   }
 })
+const filterAverageDatas = computed(() => {
+  return averageDatas.value.filter((item: any) => {
+    return item.markingGroupNumber != 0
+  })
+})
 const allTableData = computed(() => {
   if (result.value) {
     let arr = []
@@ -111,6 +130,14 @@ const columns = computed(() => {
   return [
     { label: '账号', prop: 'loginName', align: 'center', minWidth: 120, fixed: 'left' },
     { label: '姓名', prop: 'markerName', align: 'center', minWidth: 120, fixed: 'left' },
+    {
+      label: dataTypeLabelMap[dataType.value],
+      align: 'center',
+      minWidth: 80,
+      formatter(row: any) {
+        return row[dataType.value]
+      },
+    },
     ...(result.value || { columns: [] }).columns.map((d: any) => {
       return {
         label: d,
@@ -131,6 +158,7 @@ const columns = computed(() => {
 })
 const columns2: any = computed(() => {
   let initColumns = [
+    { type: 'selection', width: 55 },
     { label: '账号', prop: 'loginName', align: 'center', minWidth: 120, fixed: 'left' },
     { label: '姓名', prop: 'markerName', align: 'center', minWidth: 120, fixed: 'left' },
   ]
@@ -153,30 +181,31 @@ const columns2: any = computed(() => {
   }
   return initColumns
 })
+const multipleSelection = ref<any[]>([])
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+  console.log('multipleSelection.value:', multipleSelection.value)
+}
+
 const lineChartOptions = computed(() => {
   let xData = allTableData.value.map((item) => item.loginName)
   return {
+    grid: {
+      left: 60,
+      right: 240,
+      bottom: 40,
+    },
+    tooltip: { show: true, trigger: 'axis' },
+    legend: { show: true },
     xAxis: {
       axisLine: { show: false },
       axisTick: { show: false },
       splitLine: { show: false },
-      axisLabel: {
-        align: 'right',
-      },
       data: xData,
     },
-    yAxis: [
-      {
-        type: 'value',
-      },
-      {
-        type: 'value',
-        // axisLabel: {
-        //   formatter: `{value}%`,
-        // },
-        splitLine: { show: false },
-      },
-    ],
+    yAxis: {
+      type: 'value',
+    },
     series: [
       {
         name: dataTypeLabelMap[dataType.value],
@@ -189,8 +218,18 @@ const lineChartOptions = computed(() => {
         markLine: {
           data: averageDatas.value.map((item: any) => {
             return {
-              name: item.markingGroupNumber == 0 ? '总体平均分' : `小组${item.markingGroupNumber}平均分`,
+              name:
+                item.markingGroupNumber == 0
+                  ? '总体' + dataTypeLabelMap[dataType.value]
+                  : `小组${item.markingGroupNumber}` + dataTypeLabelMap[dataType.value],
               yAxis: item[dataType.value === 'markingCount' ? 'avgMarkingCount' : dataType.value],
+              label: {
+                show: true,
+                position: 'end',
+              },
+              lineStyle: {
+                color: item.markingGroupNumber == 0 ? 'red' : 'auto',
+              },
             }
           }),
         },
@@ -200,29 +239,27 @@ const lineChartOptions = computed(() => {
 })
 const multLineChartOptions = computed(() => {
   return {
+    grid: {
+      left: 60,
+      right: 60,
+      bottom: 40,
+    },
+    legend: {
+      show: true,
+    },
     xAxis: {
       axisLine: { show: false },
       axisTick: { show: false },
       splitLine: { show: false },
-      axisLabel: {
-        align: 'right',
-      },
-      data: multLineXdatas,
+      data: multLineXdatas.value,
     },
-    yAxis: [
-      {
-        type: 'value',
-      },
-      {
-        type: 'value',
-        splitLine: { show: false },
-      },
-    ],
-    series: allTableData.value.map((item: any) => {
+    yAxis: {
+      type: 'value',
+    },
+    series: multipleSelection.value.map((item: any) => {
       return {
         name: item.loginName,
         type: 'line',
-        barWidth: 20,
         // itemStyle: {
         //   color: '#3AD500',
         // },
@@ -242,11 +279,38 @@ onOptionInit(onSearch)
 <style scoped lang="scss">
 .personnel-compare-view {
   background-color: #fff;
-  .out-chart-box {
-    height: 300px;
-  }
+  // .out-chart-box {
+  //   height: 300px;
+  // }
   .chart-box {
     height: 300px;
+    position: relative;
+    .right-box {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 180px;
+      height: 100%;
+      z-index: 100;
+      overflow: auto;
+      .legend-item {
+        display: flex;
+        margin-bottom: 5px;
+        align-items: flex-start;
+        font-size: 12px;
+        .color {
+          width: 12px;
+          height: 12px;
+          border-radius: 2px;
+          margin-top: 2px;
+          margin-right: 5px;
+        }
+        .label {
+          flex: 1;
+          color: #666;
+        }
+      }
+    }
   }
 }
 </style>

src/modules/bootstrap/login/index.vue

@@ -146,8 +146,10 @@ function loginSuccess(loginInfo: ExtractApiResponse<'userLogin'>) {
 
 function initLogin() {
   const dialogModeBeforeSubmit = sessionStorage.get('dialogModeBeforeSubmit')
+  const lockScreenStatus = sessionStorage.get('lockScreenStatus')
   sessionStorage.clear()
-  sessionStorage.set('dialogModeBeforeSubmit', dialogModeBeforeSubmit)
+  dialogModeBeforeSubmit && sessionStorage.set('dialogModeBeforeSubmit', dialogModeBeforeSubmit)
+  lockScreenStatus && sessionStorage.set('lockScreenStatus', lockScreenStatus)
   mainStore.$reset()
 }
 

src/modules/marking/assess/index.vue

@@ -57,7 +57,7 @@
         <div class="choose-list-box">
           <div class="row">
             <span class="label"> 强制考核卷组： </span>
-            <div class="value">{{ `第${model.forceGroupNumber}组` }}</div>
+            <div class="value">{{ `${model.forceGroupNumber} 试卷共${paperCount}份` }}</div>
           </div>
           <div class="row">
             <span class="label"> 分发给： </span>
@@ -119,7 +119,11 @@ const { fetch: handOutForceCheck, loading } = useFetch('handOutForceCheck')
 const { fetch: getForceCheckGroupList, result: forceCheckGroupList } = useFetch('getForceCheckGroupList')
 
 const { fetch: getMarkerTree, result: markerTree } = useFetch('getMarkerTree')
-
+const paperCount = computed(() => {
+  return (forceCheckGroupList.value || []).find((item) => {
+    return item.forceGroupNumber == model.forceGroupNumber
+  })?.paperCount
+})
 watch(
   model,
   () => {

src/store/main.ts

@@ -47,7 +47,7 @@ const useMainStore = defineStore<'main', MainStoreState, Record<string, any>, Ma
       userMarkConfig: {},
       newMsgs: { newCount: 0, messages: [] },
       online: true,
-      lockScreenStatus: false,
+      lockScreenStatus: sessionStorage.get('lockScreenStatus') == '1' ? true : false,
       keepAliveViews: ['MainLayout'],
     }
   },
@@ -65,6 +65,7 @@ const useMainStore = defineStore<'main', MainStoreState, Record<string, any>, Ma
     },
     setLockScreen(bool: boolean) {
       this.lockScreenStatus = !!bool
+      sessionStorage.set('lockScreenStatus', bool ? '1' : '0')
     },
     setOnline(bool: boolean) {
       this.online = !!bool

src/utils/common.ts

@@ -250,3 +250,22 @@ export function toggleClass(el: any, className: string) {
   }
   el.className = newClass.join(' ')
 }
+
+export const myColorList = [
+  '#3B99D4',
+  '#8ED14B',
+  '#F06B49',
+  '#ECC2F1',
+  '#82C7C3',
+  '#E3698A',
+  '#1776EB',
+  '#F5B2AC',
+  '#533085',
+  '#89363A',
+  '#19413E',
+  '#D92B45',
+  '#60C9FF',
+  '#1B9F2E',
+  '#BA217D',
+  '#076B82',
+]