独墅湖高教创新区危化品智慧管控平台(新危化品)
马宇豪
2025-04-28 e1d380a930e73d8355a4695ca5f5b91f471c2394
src/views/hazardousChemicals/bigScreen/components/midTop.vue
@@ -8,13 +8,31 @@
            v-model="companyType"
            filterable
            placeholder="请选择企业类型"
            style="width: 100%"
            style="flex: 1"
            remote
            remote-show-suffix
            :remote-method="getList"
        >
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
        <el-select
            clearable
            :teleported="false"
            v-model="warningType"
            filterable
            placeholder="请选择风险等级"
            style="flex: 1"
            remote
            remote-show-suffix
            :remote-method="getList"
        >
          <el-option
              v-for="item in warningList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
@@ -67,7 +85,7 @@
// 表格数据
const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
const visibleRows = 10 // 显示的行数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高,与CSS一致
const viewport = ref(null)
@@ -76,7 +94,7 @@
onMounted(()=>{
  getList()
  initChart()
  // initChart()
  // 设置视口高度
  if (viewport.value) {
    viewport.value.style.height = `${visibleRows * rowHeight}px`
@@ -94,6 +112,7 @@
})
const companyType = ref('')
const warningType = ref('')
const typeList = [
  {
    id: 0,
@@ -108,20 +127,36 @@
    name: '中试类'
  }
]
const warningList = [
  {
    id: 1,
    name: '红'
  },
  {
    id: 2,
    name: '橙'
  },
  {
    id: 3,
    name: '黄'
  },
  {
    id: 4,
    name: '蓝'
  }
]
const getList = async () => {
  const res = await getCompanyMessage(companyType.value)
  if(res.code == 200){
    if(res.data && Array.isArray(res.data) && res.data.length>0){
      companyData.value = res.data
      console.log(companyData.value,555)
      const mapData = companyData.value.map(i=>{
        return {
          name: i.companyName + '(' + i.warningCount + ')',
          name: i.companyName + '\n' + i.warningCount,
          value: [i.longitude,i.latitude]
        }
      })
      console.log(mapData,'mapData')
      initChart(mapData)
    }
@@ -166,6 +201,7 @@
    let option = {
      geo: {
        map: '苏州市',
        roam: 'scale',
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '75%',
@@ -235,10 +271,10 @@
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          symbolSize: 4,
          rippleEffect: {
            period: 3,
            scale: 10,
            period: 2,
            scale: 6,
            brushType: 'fill'
          },
          label: {
@@ -247,7 +283,7 @@
              position: 'right',
              formatter: '{b}',
              color: 'yellow',
              fontSize: 12
              fontSize: 14
            }
          },
          data: mapData,
@@ -255,8 +291,8 @@
            //坐标点颜色
            normal: {
              show: true,
              color: 'skyblue',
              shadowBlur: 20,
              color: 'orange',
              shadowBlur: 6,
              shadowColor: '#fff'
            },
            emphasis: {
@@ -281,18 +317,20 @@
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px
}
.container-left{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}
.filter{
  width: 300px;
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}
:deep(.el-input__wrapper){
  height: 28px;
@@ -316,9 +354,11 @@
    }
  }
}
.table-wrapper {
  position: relative;
  width: 300px;
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
@@ -377,8 +417,14 @@
  100% { opacity: 1; }
}
  #areaMap{
    flex: 1;
    height: 500px;
  }
#areaMap{
  flex: 2;
  height: 100%;
}
:deep(.BMap_cpyCtrl) {
  display: none !important;
}
:deep(.anchorBL) {
  display: none !important;
}
</style>