squi-mobile/src/views/IncidentManagementDetail/index.tsx

import { ref, defineComponent, onMounted, computed, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import './index.scss';
import { useCommonStore, useIncidentStore } from '@/store';
import {
  DropdownItemOption,
  NavBar,
  DropdownMenu,
  DropdownItem,
  Icon,
  PullRefresh,
  Sticky,
  Collapse,
  CollapseItem,
  Field,
  Button,
  Loading,
  Toast,
  Step, Steps 
} from 'vant';
/** @ts-ignore */
import icon_communication from '@/assets/icons/incident/communication@2x.png';
/** @ts-ignore */
import icon_detail from '@/assets/icons/incident/detail@2x.png';
/** @ts-ignore */
import icon_information from '@/assets/icons/incident/information@2x.png';
/** @ts-ignore */
import icon_plan from '@/assets/icons/incident/plan@2x.png';
/** @ts-ignore */
import icon_yjck from '@/assets/icons/incident/yjck@2x.png';
/** @ts-ignore */
import icon_yjya from '@/assets/icons/incident/yjya@2x.png';









export default defineComponent({
  name: 'IncidentManagementDetail',
  setup() {
    const router = useRouter();

    const route = useRoute();

    const store = useIncidentStore();

    const commonStore = useCommonStore();

    const activeNames = ref([]);
    const activeoplanNames = ref([]);
    const message = ref("");
    const dosubmitdata = () => { 
      if (!store.incidentDetail.baseInfo?.id || message.value == "") {
        Toast.fail('信息不完整');
      }
        store.addIncidentProcess({
          incidentId: store.incidentDetail.baseInfo?.id,
          des: message.value,
        }).then(() => { 
          message.value = "";
            store.getIncidentItem(store.incidentDetail.baseInfo?.id ?? '');
        });
      
      
    };

    const planOptions = computed(
      () =>
        Object.keys(store.incidentDetail?.baseTask ?? {})
          .map((idx) => {
            const item = commonStore.globalDict['zhdd_incident_level']?.find(
              (i) =>
                i.dictValue ===
                store.incidentDetail?.baseTask?.[idx]?.[0].level?.toString(),
            );
            const desc = store.incidentDetail?.baseTask?.[idx]?.map(
              (i) => i.taskDes,
            );

            return {
              ...item,
              desc,
            };
          })
          ?.find(
            (item) =>
              item.dictValue?.toString() ===
              store.incidentDetail?.baseInfo?.level?.toString(),
          )?.desc,
    );

    onMounted(() => {
      commonStore.getGlobalDict('zhdd_incident_level');
      commonStore.getGlobalDict('zhdd_incident_type');
      commonStore.getGlobalDict('zhdd_incident_source');

      route.query.id && store.getIncidentItem(route.query.id as string);
    });
    onUnmounted(() => {
      store.incidentDetail = {};
    });

    return () => (
      <div class="incident-detail-container">
        <NavBar
          title="应急处置"
          left-arrow
          fixed
          onClick-left={() => router.push('/home')}
        />
        <Sticky>
          <div class="title">{store.incidentDetail?.baseInfo?.name}</div>
        </Sticky>
        <Collapse v-model={activeNames.value}>
          <CollapseItem
            title="事件信息"
            name="事件信息"
            v-slots={{ icon: <img class="icon-i" src={icon_information} /> }}>
            <p>
              事件类型：
              {
                commonStore.globalDict['zhdd_incident_type']?.find(
                  (o) =>
                    o.dictValue.toString() ===
                    store.incidentDetail?.baseInfo?.type?.toString(),
                )?.dictLabel
              }
            </p>
            <p>
              事件等级：
              {
                commonStore.globalDict['zhdd_incident_level']?.find(
                  (o) =>
                    o.dictValue.toString() ===
                    store.incidentDetail?.baseInfo?.level?.toString(),
                )?.dictLabel
              }
            </p>
            <p>事件时间：{store.incidentDetail?.baseInfo?.createTime}</p>
            <p>地点：{store.incidentDetail?.baseInfo?.addr}</p>
            <p>
              事件来源：
              {commonStore.globalDict['zhdd_incident_source']?.find(
                (i) =>
                  i.dictValue?.toString() ===
                  (store.incidentDetail?.baseInfo?.source ?? '').toString(),
              )?.dictLabel ?? '-'}
            </p>
          </CollapseItem>
          <CollapseItem
            title="应急预案"
            name="应急预案"
            v-slots={{ icon: <img class="icon-i" src={icon_yjya} /> }}>
            {planOptions.value?.map((d, index) => (
              <p>
                {index + 1}、{d}
              </p>
            ))}
          </CollapseItem>
          <CollapseItem
            title="处置方案"
            name="处置方案"
            v-slots={{ icon: <img class="icon-i" src={icon_plan} /> }}>
            <Collapse v-model={activeoplanNames.value}>
              {store.incidentDetail.task?.map((i) => (
                <div class="cz-item">
                  <CollapseItem title={i.taskName} name={i.taskName}>
                    <div class="cz-zh">
                      {i.taskPersonVos
                        ?.map((p) => {
                          return p.person + p.position;
                        })
                        .join('、')}
                    </div>
                    <div>
                      <div class="zl">指令</div>
                      {i.taskCommandVos.map((c, index) => (
                        <div>
                          {index + 1}、{c.command}
                        </div>
                      ))}
                    </div>
                  </CollapseItem>
                </div>
              ))}
            </Collapse>
          </CollapseItem>
          <CollapseItem
            title="处置详情"
            name="处置详情"
            v-slots={{ icon: <img class="icon-i" src={icon_detail} /> }}>
            <div>
              {store.incidentDetail.process?.map((i, index) => (
                <div class="czxq-item">
                  <div class="cz-yuan"></div>
                  <div
                    class="cz-line"
                    style={`display:${
                      index == (store.incidentDetail.process?.length ?? 0) - 1
                        ? 'none'
                        : 'block'
                    }`}></div>
                  <div class="cz-time"> {i.createTime}</div>
                  <div class="cz-des"> {i.des}</div>
                </div>
              ))}
              <Field
                v-model={message.value}
                autosize
                type="textarea"
                placeholder="请输入"
              />
              <div class="cz-action">
                <Button size="small" type="primary" onClick={() => { 
                  dosubmitdata();
                }}>
                  保存
                </Button>
                <Button size="small" type="default" onClick={() => { 
                  message.value="";
                }}>
                  取消
                </Button>
              </div>
            </div>
          </CollapseItem>
          <CollapseItem
            title="融合通信"
            name="融合通信"
            v-slots={{ icon: <img class="icon-i" src={icon_communication} /> }}>
            123
          </CollapseItem>
        </Collapse>
      </div>
    );
  },
});