组件优化

src/api/dataAdmin/assembly.ts

@@ -29,22 +29,9 @@ export function list(text) {
     if (text && (text.source || text.servicename || text.status)) {
         delete text.pageSize;
         delete text.page;
-        // str = {
-        //     'type': 'SR',
-        //     'servicetype': 'WidgetService',
-        //     // "fields": {
-        //     //     'servicename': text.servicename
-        //     // },
-        //     "status": text.status
-        // }
-        // str = JSON.stringify(str);
-
         str = {
             'type': 'SR',
             'servicetype': 'WidgetService',
-            'fields': {
-                'DATA': ['servicename', 'serviceid'],
-            },
             "status": text.status,
             'filterValue': text.servicename
         }
@@ -53,7 +40,7 @@ export function list(text) {
         str = `{ 'type': 'SR', 'servicetype': 'WidgetService'}`
     }
     formData.append("interfaceName", "antu.space.provider.sservicebase.ServiceBaseMetaDataViewProvider");
-    formData.append("methodName", "getResourceList");
+    formData.append("methodName", "getResourceList2");
     formData.append("args[]", session.getItem('tokenV2'));
     formData.append("args[]", str);
     return new Promise<void>((resolve, reject) => {

src/layouts/page/index.vue

@@ -1,20 +1,15 @@
 <template>
-  <RouterView>
+  <RouterView :key="cacheKey">
     <template #default="{ Component, route }">
       <!-- <div id="tips-container" class="tips-container"></div> -->
-      <transition
-        :name="
-          getTransitionName({
-            route,
-            openCache,
-            enableTransition: getEnableTransition,
-            cacheTabs: getCaches,
-            def: getBasicTransition,
-          })
-        "
-        mode="out-in"
-        appear
-      >
+      <transition v-if="!cacheKey" :name="getTransitionName({
+        route,
+        openCache,
+        enableTransition: getEnableTransition,
+        cacheTabs: getCaches,
+        def: getBasicTransition,
+      })
+        " mode="out-in" appear>
         <keep-alive v-if="openCache" :include="getCaches">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -22,63 +17,83 @@
       </transition>
     </template>
   </RouterView>
-
+  <IframeApp v-show="cacheKey" class="iframeApp" />
   <FrameLayout v-if="getCanEmbedIFramePage" />
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, unref, onMounted } from 'vue';
-  import FrameLayout from '/@/layouts/iframe/index.vue';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-  import { getTransitionName } from './transition';
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-  import { useAlarmNotify } from '/@/views/alarm/log/hook/useAlarmNotify';
-  // import Tips from '/@/views/tips/index.vue';
-  // import { createApp } from 'vue';
-  export default defineComponent({
-    name: 'PageLayout',
-    components: { FrameLayout },
-    setup() {
-      const { getShowMultipleTab } = useMultipleTabSetting();
-      const tabStore = useMultipleTabStore();
+import { computed, defineComponent, unref, onMounted } from 'vue';
+import FrameLayout from '/@/layouts/iframe/index.vue';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { getTransitionName } from './transition';
+import IframeApp from '/@/views/twoThree/index.vue';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useAlarmNotify } from '/@/views/alarm/log/hook/useAlarmNotify';
+// import Tips from '/@/views/tips/index.vue';
+// import { createApp } from 'vue';
+export default defineComponent({
+  name: 'PageLayout',
+  components: { FrameLayout, IframeApp },
+  setup() {
+    const { getShowMultipleTab } = useMultipleTabSetting();
+    const tabStore = useMultipleTabStore();
 
-      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+    const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
 
-      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+    const { getBasicTransition, getEnableTransition } = useTransitionSetting();
 
-      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+    const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
 
-      const getCaches = computed((): string[] => {
-        if (!unref(getOpenKeepAlive)) {
-          return [];
-        }
-        return tabStore.getCachedTabList;
-      });
+    const getCaches = computed((): string[] => {
+      if (!unref(getOpenKeepAlive)) {
+        return [];
+      }
+      return tabStore.getCachedTabList;
+    });
 
-      useAlarmNotify();
-      
-      // onMounted(()=>{
-      //   const tips = createApp(Tips)
-      //   // 挂载消息提示组件
-      //   tips.mount('#tips-container')
-      // })
+    useAlarmNotify();
 
-      return {
-        getTransitionName,
-        openCache,
-        getEnableTransition,
-        getBasicTransition,
-        getCaches,
-        getCanEmbedIFramePage,
-      };
+    // onMounted(()=>{
+    //   const tips = createApp(Tips)
+    //   // 挂载消息提示组件
+    //   tips.mount('#tips-container')
+    // })
+
+    return {
+      getTransitionName,
+      openCache,
+      getEnableTransition,
+      getBasicTransition,
+      getCaches,
+      getCanEmbedIFramePage,
+    };
+  },
+
+  computed: {
+    cacheKey() {
+      var bool = this.getType(this.$route);
+      return bool;
     },
-  });
+  },
+
+  methods: {
+    getType(e) {
+      // 判断是否是iframe页面,iframe页面性能优化
+      return e && e.meta && e.meta.isLink;
+    },
+  },
+});
 </script>
 <style lang="less" scoped>
-.tips-container{
+.tips-container {
   position: absolute;
   z-index: 9999;
 }
+
+.iframeApp {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/router/guard/permissionGuard.ts

@@ -120,7 +120,7 @@ export function createPermissionGuard (router: Router) {
     router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
 
     permissionStore.setDynamicAddedRoute(true);
-    console.log(to.query);
+    // console.log(to.query);
 
     if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
       // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容

src/views/assembly/item/AssemblyData.vue

@@ -85,30 +85,34 @@ export default defineComponent({
     const list = ref([]);
     const actionName = ref('');
     console.log("list", list);
-    eventBus.on('assemblylist', (i) => {
-      console.log("i:", i);
+    eventBus.on('assemblylist', async (i) => {
       for (var j in i) {
         if (i[j]) {
-          i[j].map(async (k) => k.url = await getImg(k.mapingurl, k.publiccurl))
-          // if (i[j]) i[j].map((k) => { k.url = `http://106.12.170.138:4001/examples/img/${k.publiccurl}` });
+          for (var k = 0, len = i[j].length; k < len; k++) {
+            var item = i[j][k];
+            item.url = await getImg(item.mapingurl, item.publiccurl);
+          }
+          //组内排序
+          i[j].sort(function (a, b) {
+            if (!a.crs) return 1;
+            if (!b.crs) return -1;
+            return Number(a.crs) - Number(b.crs);
+          });
         }
       }
-      list.value = i
-      setTimeout(() => list.value = i, 5000)
+      list.value = i;
     })
 
     eventBus.on('actionName', (i) => actionName.value = i);
 
 
     function handleQuery(record: Recordable) {
-      console.log("11111:", record)
       openDrawer(true, {
         record,
       });
     }
 
     async function getImg(i, name) {
-      // var defUrl = '/static/img/Earth.jpg';
       var defUrl = `http://106.12.170.138:4001/examples/img/${name}`;
       var url = null;
       if (i) {

src/views/dataAdmin/assembly/MapSourceModal.vue

@@ -3,13 +3,13 @@
   <BasicModal width="1200px" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
     <div style="height: 60vh" class="res-form-container">
       <a-tabs v-model:activeKey="activeKey" class="res-a-tabs">
-        <a-tab-pane key="1" tab="地图资源信息">
+        <a-tab-pane key="1" tab="组件资源信息">
           <!-- <BasicForm @register="registerForm"></BasicForm> -->
           <source-detail ref="refSourceDetail" @RtnMain="RtnMain" :formData="formData"
             :isUpdate="isUpdate"></source-detail>
         </a-tab-pane>
         <a-tab-pane key="2" tab="流程信息" force-render>
-          <FlowStep :flowTitle="'文件资源上传'" :flowCode="'20220523001'"></FlowStep>
+          <FlowStep :flowTitle="'组件资源上传'" :flowCode="'20220523001'"></FlowStep>
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -40,9 +40,7 @@ export default defineComponent({
   },
   emits: ['success', 'register'],
   setup(_, { emit }) {
-    const data = reactive({
-      activeKey: '2',
-    });
+    const activeKey = ref('1')
     const refSourceDetail = ref(null);
     let formData = ref(null)
     const isUpdate = ref(true);
@@ -62,7 +60,7 @@ export default defineComponent({
 
     onMounted(() => { });
     return {
-      ...ref(data),
+      activeKey,
       registerModal,
       handleSubmit,
       getTitle,

src/views/dataAdmin/assembly/SourceDetail.vue

@@ -29,7 +29,7 @@
               <a-textarea v-model:value="formState.description" :rows="2" />
             </a-form-item>
           </a-col>
-          <a-col :span="9" class="form-col">
+          <!-- <a-col :span="9" class="form-col">
             <a-form-item ref="servicetype" label="适合申请流程" name="servicetype" class="label-form-item">
               <a-select v-model:value="formState.servicetype">
                 <template v-for="(tag, index) in assemblyType" :key="index">
@@ -37,14 +37,27 @@
                 </template>
               </a-select>
             </a-form-item>
-          </a-col>
+          </a-col> -->
           <a-col :span="9" class="form-col">
-            <a-form-item ref="servicetype" label="资源类型" name="servicetype" class="label-form-item">
+            <!-- <a-form-item ref="servicetype" label="资源类型" name="servicetype" class="label-form-item">
               <a-select v-model:value="formState.servicetype">
                 <template v-for="(tag, index) in assemblyType" :key="index">
                   <a-select-option :value="tag.value">{{ tag.value }}</a-select-option>
                 </template>
               </a-select>
+            </a-form-item> -->
+            <a-form-item ref="servicetype" label="资源类型" name="servicetype" class="label-form-item">
+              <a-select v-model:value="formState.servicetype">
+                <template v-for="tag in assemblyType" :key="tag.value">
+                  <a-select-option :value="tag.value">{{ tag.label }}</a-select-option>
+                </template>
+              </a-select>
+            </a-form-item>
+
+          </a-col>
+          <a-col :span="9" class="form-col">
+            <a-form-item ref="crs" label="组内顺序" name="crs" class="label-form-item">
+              <a-input v-model:value="formState.crs" :rows="2" />
             </a-form-item>
           </a-col>
           <!-- <a-col :span="9" class="form-col">
@@ -98,6 +111,7 @@ const props = {
   isUpdate: { type: Boolean, default: ref(false) },
 };
 interface FormState {
+  source: '',
   servicetype: string,
   publiccurl: string;
   servicename: string;
@@ -113,6 +127,7 @@ interface FormState {
   searched: boolean;
   externalApply: boolean;
   date1: undefined;
+  crs: 0
 }
 export default defineComponent({
   name: 'SourceDetail',
@@ -125,18 +140,11 @@ export default defineComponent({
       fileList: [],
     });
     var assemblyType = ref([
-      // { value: '地图基础功能' },
-      // { value: '底图和模型加载' },
-      // { value: '覆盖物' },
-      // { value: '测量工具' },
-      // { value: '绘制工具' },
-      // { value: '空间分析' },
-      // { value: '天气特效' },
-      { value: '地图浏览工具' },
-      { value: '服务加载工具' },
-      { value: 'GIS功能工具' },
-      { value: '空间分析工具' },
-      { value: '三维可视化效果工具' },
+      { value: '地图浏览工具', label: '地图浏览工具', },
+      { value: '服务加载工具', label: '服务加载工具', },
+      { value: 'GIS功能工具', label: 'GIS功能工具', },
+      { value: '空间分析工具', label: '空间分析工具', },
+      { value: '三维可视化效果工具', label: '三维可视化效果工具', },
     ])
 
     const formRef = ref();
@@ -156,6 +164,7 @@ export default defineComponent({
       searched: true,
       externalApply: true,
       date1: undefined,
+      crs: 0
     });
     const moment = Moment;
     const rules = {
@@ -164,11 +173,11 @@ export default defineComponent({
 
       servicename: [
         { required: true, message: '请填写资源名称', trigger: 'blur' },
-        { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
+        { min: 1, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
       ],
       servicealiasname: [
         { required: true, message: '请输入资源别名', trigger: 'blur' },
-        { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
+        { min: 1, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
       ],
       systag: [{ required: true, message: '请选择系统标签', trigger: 'change' }],
       date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
@@ -188,13 +197,14 @@ export default defineComponent({
       () => props.formData,
       (obj) => {
         data.detail = obj;
-        if (data.isUpdate) setFormData();
+        if (data.isUpdate) setFormData()
       }
     );
     watch(
       () => props.isUpdate,
       (obj) => {
         data.isUpdate = obj;
+        if (!data.isUpdate) resetForm()
       }
     );
     const submitForm = () => {
@@ -261,8 +271,10 @@ export default defineComponent({
           source: formState.servicetype, //资源类型
           mapingurl: formState.mapingurl, //服务地址
           publiccurl: formState.publiccurl, //数据表
+          crs: formState.crs,//小组类顺序
         },
         metadata: {
+          crs: formState.crs,//小组类顺序
           publiccurl: formState.publiccurl, //数据表
           source: formState.servicetype, //资源类型
           mapingurl: formState.mapingurl, //服务地址
@@ -294,6 +306,10 @@ export default defineComponent({
       formState.public = data.detail.ispublic === '1' ? true : false;
       formState.servicename = data.detail?.servicename;
       formState.publiccurl = data.detail?.publiccurl;
+      formState.servicetype = data.detail?.source;
+      formState.crs = data.detail?.crs;
+      formState.description = data.detail?.description;
+      formState.publishtime = data.detail?.publishdate
       formState.publishtime = data.detail?.publishdate
         ? moment(data.detail?.publishdate).format('YYYY-MM-DD HH:mm:ss')
         : '';

src/views/dataAdmin/assembly/flowStep/index.vue

@@ -31,11 +31,8 @@
             </template>
             <template #icon>
               <div class="cicle-out">
-                <div
-                  class="cicle"
-                  :style="`border: 2px solid ${colors[step.status]};color:${colors[step.status]};`"
-                  >{{ index + 1 }}</div
-                >
+                <div class="cicle" :style="`border: 2px solid ${colors[step.status]};color:${colors[step.status]};`">{{
+                  index + 1 }}</div>
               </div>
             </template>
             <template #description>
@@ -118,7 +115,7 @@ export default defineComponent({
           data.sysUserInfo[item['EMPLOYEE_ID']] = item['NAME'];
         });
       }
-      console.log('人员信息',data.sysUserInfo)
+      console.log('人员信息', data.sysUserInfo)
     };
     const queryData = async () => {
       const res = await getFlowConfigByBusinessName(data.flowName);
@@ -151,11 +148,11 @@ export default defineComponent({
         },
       ];
       const step = getFlowNodes(flow.flowNode, flow.flowNodePerson);
-      console.log('步骤',step)
-      if(step) data.steps.push(...step)
+      console.log('步骤', step)
+      if (step) data.steps.push(...step)
       const length = step.length
       //最后一步默认完成
-      data.steps.push({ xh: length+2, stepName: '完成', handlers: [], status: '0' })
+      data.steps.push({ xh: length + 2, stepName: '完成', handlers: [], status: '0' })
     };
 
     const getFlowNodes = (flowNode, flowNodePerson) => {
@@ -183,7 +180,7 @@ export default defineComponent({
         }
         else return false;
       }
-      getNextNode(flowNode,'')
+      getNextNode(flowNode, '')
       return steps
     };
 
@@ -204,9 +201,10 @@ export default defineComponent({
 });
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .flow-chart {
   height: 100%;
+
   .flow-title {
     width: 100%;
     height: 40px;
@@ -218,6 +216,7 @@ export default defineComponent({
     letter-spacing: 0px;
     color: #2d74e7;
   }
+
   .flow-code {
     height: 20px;
     text-align: center;
@@ -235,16 +234,19 @@ export default defineComponent({
     top: 53px;
     height: 100px;
     width: 72px;
+
     .item-list {
       margin: 4px 0;
       display: flex;
       align-items: center;
+
       .item-span-legend {
         display: flex;
         height: 10px;
         width: 10px;
         margin-right: 10px;
       }
+
       .item-span {
         font-family: Source Han Sans CN;
         font-size: 12px;
@@ -263,18 +265,22 @@ export default defineComponent({
 
     :deep(.ant-steps) {
       height: 100%;
+
       .ant-steps-item {
         margin-right: 0px !important;
         height: 100%;
+
         .ant-steps-item-container {
           margin-top: 20px;
           height: 100%;
+
           .ant-steps-item-content {
             position: absolute;
             height: 100%;
             width: 100%;
             margin-top: 20px;
             left: 16px;
+
             .ant-steps-item-title {
               .step-title {
                 position: absolute;
@@ -282,13 +288,17 @@ export default defineComponent({
                 left: -16px;
               }
             }
+
             .ant-steps-item-description {
               margin-left: -16px;
+
               .desc-step-name {
                 margin-top: 4px;
               }
+
               .desc-handler {
                 margin-top: 38px;
+
                 .handler-name {
                   display: flex;
                   float: left;
@@ -304,12 +314,15 @@ export default defineComponent({
               }
             }
           }
+
           .ant-steps-item-icon {
             margin-top: 20px;
             margin-right: 0px;
+
             .cicle-out {
               height: 40px;
               width: 40px;
+
               .cicle {
                 height: 30px;
                 width: 30px;

src/views/dataAdmin/assembly/index.vue

@@ -38,24 +38,24 @@
             // ifShow: record.servicealiasname,
             onClick: sendApprove.bind(null, record),
           },
-        ]" :drop-down-actions="[
-  {
-    label: '编辑',
-    icon: '' /**clarity:note-edit-line*/,
-    color: 'warning',
-    onClick: handleEdit.bind(null, record),
-  },
-  {
-    label: '删除',
-    icon: '' /**ant-design:delete-outlined'*/,
-    color: 'error',
-    ifShow: record.roleType != RoleEnum.SYS_ADMIN,
-    popConfirm: {
-      title: '是否确认删除',
-      confirm: handleDelete.bind(null, record),
-    },
-  },
-]" />
+          {
+            label: '编辑',
+            icon: '' /**clarity:note-edit-line*/,
+            color: 'warning',
+            disabled: record.bussid ? true : false,
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            icon: '' /**ant-design:delete-outlined'*/,
+            color: 'error',
+            ifShow: record.roleType != RoleEnum.SYS_ADMIN,
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
+            },
+          },
+        ]" />
       </template>
       <template #pdate="{ record }">
         <Tag :color="'red'">
@@ -64,36 +64,34 @@
           }}
         </Tag>
       </template>
+      <template #nodename="{ record }">
+        <Tag :style="`color:${record.nodename === '' ? 'red' : '#05B069'};`">
+          {{
+            record.nodename === '' ? '未提交' : record.nodename
+          }}
+        </Tag>
+      </template>
       <template #status="{ record }">
         <Tag :style="`color:${record.status === 3 || record.status === 3 ? 'red' : '#05B069'};`">
           {{
-            record.status === 0
-            ? '待审核'
-            : record.status === 1
-              ? '审核通过'
-              : record.status === 2
-                ? '审核不通过'
-                : record.status === 3
-                  ? '被驳回'
-                  : '未提交'
+            record.nodename === '' && record.status === 0 ? '未提交' : record.status === 0
+            ? '待审核' : record.status === 1 ? '审核通过' : record.status === 2
+              ? '审核不通过' : record.status === 3 ? '被驳回' : '未提交'
           }}
         </Tag>
       </template>
     </BasicTable>
-    <!-- <MapDrawer @register="registerDrawer" @success="handleSuccess" /> -->
     <MapSourceModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick, onBeforeMount, createVNode } from 'vue';
+import { defineComponent, nextTick, onBeforeMount } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
-// import { useDrawer } from '/@/components/Drawer';
+import { delRole, setRoleStatus } from '/@/api/system/system';
 import { useModal } from '/@/components/Modal';
 import MapDrawer from './MapDrawer.vue';
 import MapSourceModal from './MapSourceModal.vue';
 import { columns, searchFormSchema } from './map.data';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { Authority } from '/@/components/Authority';
 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
@@ -109,7 +107,6 @@ export default defineComponent({
   name: 'RoleManagement',
   components: { BasicTable, MapDrawer, MapSourceModal, TableAction, Authority, Switch, Popconfirm },
   setup() {
-    //const [registerDrawer, { openDrawer }] = useDrawer();
     const [registerModal, { openModal }] = useModal();
     const [registerTable, { setProps, reload, setSelectedRowKeys, getSelectRows }] = useTable({
       title: '地图资源列表',
@@ -124,7 +121,7 @@ export default defineComponent({
       bordered: true,
       showIndexColumn: true,
       actionColumn: {
-        width: 200,
+        width: 240,
         title: '操作',
         dataIndex: 'action',
         slots: { customRender: 'action' },
@@ -153,19 +150,12 @@ export default defineComponent({
     });
 
     function handleCreate() {
-      // openDrawer(true, {
-      //   isUpdate: false,
-      // });
       openModal(true, {
         isUpdate: false,
       });
     }
 
     function handleEdit(record: Recordable) {
-      // openDrawer(true, {
-      //   record,
-      //   isUpdate: true,
-      // });
       openModal(true, {
         record,
         isUpdate: true,
@@ -258,7 +248,6 @@ export default defineComponent({
               }
             })
           }
-
         }
       })
     }
@@ -269,7 +258,6 @@ export default defineComponent({
       moment,
       createMessage,
       registerTable,
-      // registerDrawer,
       registerModal,
       handleCreate,
       see,

src/views/dataAdmin/assembly/map.data.ts

@@ -128,11 +128,11 @@ export const columns: BasicColumn[] = [
   //   dataIndex: 'publiccurl',
   //   width: 160,
   // },
-  {
-    title: '资源标签',
-    dataIndex: 'typename',
-    width: 120,
-  },
+  // {
+  //   title: '资源标签',
+  //   dataIndex: 'typename',
+  //   width: 120,
+  // },
   {
     title: '发布人',
     dataIndex: 'publisher',
@@ -147,6 +147,7 @@ export const columns: BasicColumn[] = [
   {
     title: '当前环节',
     dataIndex: 'nodename',
+    slots: { customRender: 'nodename' },
     width: 90,
   },
   {