deerflow-code/situation-overview-web/src/components/SentimentAnalysis/StrategyOverview.vue

<template>
  <div class="overview-content">
    <div class="margin-bottom-15">
      <t-row :gutter="16">
        <t-col :span="6">
          <div class="item-card">
            <div class="item-title">
              <img src="/src/assets/icon/完成.svg" alt="" />
              当前态势定性
            </div>
            <div class="item-cotnent">
            {{ strategyData['当前态势定性'] || '暂无数据'}}
            </div>
          </div>
        </t-col>
        <t-col :span="6">
          <div class="item-card">
            <div class="item-title">
              <img src="/src/assets/icon/zf-logo.png" alt="" />
              核心矛盾
            </div>
            <div class="item-cotnent">
              {{ strategyData['核心矛盾'] || '暂无数据' }}
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="item-card">
      <div class="item-title" style="margin-bottom: 15px;">
        <img src="/src/assets/icon/theme-logo.png" alt="" />
        战略机遇与威胁（SWOT）
      </div>
      <t-row :gutter="16">
        <t-col :span="6" v-for="(item, index) in overviewList" :key="index">
          <div class="item-border-card" :class="item.color">
            <div class="item-title">
              {{ item.title }}
            </div>
            <div class="item-content">
              <ul>
                <t-empty v-if="item.list.length===0"/>
                <li v-for="(aItem, aIndex) in item.list" :key="aIndex">
                  {{ aItem.title }}
                </li>
              </ul>
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts';
import { requestAxiosService } from '@/service/request-axios-service';

const props = defineProps({
  msg: String,
  taskData: Object
})

const overviewList = reactive([
  { title: '机遇', color: 'tab-blue', list: [] },
  { title: '威胁', color: 'tab-yellow', list: [] },
  { title: '优势', color: 'tab-green', list: [] },
  { title: '劣势', color: 'tab-red', list: [] },
]);
const opinionPieList = ref([
  {
    value: 1500,
    name: '支持我方观点',
    itemStyle: {
      color: '#7acaa4'
    }
  },
  {
    value: 735,
    name: '中立观点',
    itemStyle: {
      color: '#c8cdd5'
    }
  },
  {
    value: 1500,
    name: '反对我方观点',
    itemStyle: {
      color: '#f5a444'
    }
  }
]);
const chartRef = ref(null);
// 获取 Vuex store
const store = useStore();
const taskData = store.state.taskData;
const service = requestAxiosService;
const strategyData = ref({})

onMounted(() => {
  strategicSituationSearch();
})

// 总体战略态势
const strategicSituationSearch = async () => {
  console.log(store.state.taskData,'任务信息')
  const parmy = {
    query: taskData.overview || ''
  }
  const res = await service.get(`${environment['b1ConsumerUrl']}/cop/copStrategicSituation`, parmy);
  console.log('查询结果', res);
  let result = res.data['总体战略态势分析'];
  strategyData.value = result
  if (result['战略机遇与威胁']) {
    overviewList[0].list = [{title: result['战略机遇与威胁']['机遇']}];
    overviewList[1].list = [{title: result['战略机遇与威胁']['威胁']}];
    overviewList[2].list = [{title: result['战略机遇与威胁']['优势']}];
    overviewList[3].list = [{title: result['战略机遇与威胁']['劣势']}];
  }
}
</script>

<style scoped lang="less">
.judgment-conclusion {
  z-index: 500;
  color: #fff;

  // 态势概览样式
  .overview-content {
    padding: 15px 0;
  }

  // 敌情判定样式
  .enemy-assessmen {
    padding: 15px 0;
  }
}

.item-card {
  padding: 15px;
  background: rgba(0, 98, 217, 0.1);
  border: 1px solid;
  border-color: rgba(85, 166, 254, 0.1);
  border-radius: 4px;

  .item-title {
    font-size: var(--fontSize);
    font-family: 'Noto Sans S Chinese';
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

    img {
      width: var(--fontSize);
      margin-right: 5px;
    }
  }

  .item-content {
    font-family: 'Noto Sans S Chinese';
    font-size: 15px;
  }
}

.item-border-card {
  min-height: 145px;
  border-left: 5px solid;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;

  .item-title {
    font-size: var(--fontSize);
    font-family: 'Noto Sans S Chinese';
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

    img {
      width: var(--fontSize);
      margin-right: 5px;
    }
  }

  .item-content {
    padding: 10px;
  }

  .ul li {
    font-family: 'Noto Sans S Chinese';
    font-size: 15px;
  }
}

.item-blue-card {
  border: 1px solid;
  border-radius: 5px;
  border-color: rgba(85, 166, 254, 0.1);
  padding: 15px;
  margin-bottom: 15px;
  background: rgba(0, 98, 217, 0.3);
}

.narrate-item {
  padding: 10px 25px;
  background: rgba(0, 238, 255, 0.2);
  border-radius: 4px;

  .ul {
    li {
      font-family: 'Noto Sans S Chinese';
      font-size: 15px;
    }
  }
}

.task-list-content {
  padding: 10px 25px;
  font-family: 'Noto Sans S Chinese';
  font-size: 15px;
}

#chart-pie {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.viewpoint-item {
  padding: 10px;
  border-radius: 4px;
  background: rgba(0, 140, 119, 0.1);
  margin-bottom: 10px;

  .item-footer {
    color: #7acaa4;
  }
}

.color-blue {
  color: #0062d9;
  font-family: 'Noto Sans S Chinese';
  font-weight: 500;
}

.color-green {
  color: #1eb07f;
  font-family: 'Noto Sans S Chinese';
  font-weight: 500;
}

.color-orange {
  color: #d97b00;
  font-family: 'Noto Sans S Chinese';
  font-weight: 500;
}

.tab-orange {
  border-color: #d97b00 !important;
  background: #a6895f80;

  .item-blue-card {
    background: rgb(8 67 137);
  }
}
</style>